Using object composition instead of class inheritance for page objects

test/e2e/page-objects/flash.js

@@ -1,11 +1,15 @@
 'use strict';
 
-const Page = require('./page');
+const page = require('./page');
 
-class Flash extends Page {
+module.exports = driver => Object.assign(page(driver), {
+    elementToWaitFor: 'alert',
+    elements: {
+        alert: 'div.alert:not(.js-warning)'
+    },
     getText() {
         return this.element('alert').getText();
-    }
+    },
     clear() {
         return this.driver.executeScript(`
             var elements = document.getElementsByClassName('alert');
@@ -14,11 +18,4 @@ class Flash extends Page {
             }
         `);
     }
-}
-
-module.exports = driver => new Flash(driver, {
-    elementToWaitFor: 'alert',
-    elements: {
-        alert: 'div.alert:not(.js-warning)'
-    }
 });

test/e2e/page-objects/home.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const Page = require('./page');
+const page = require('./page');
 
-module.exports = driver => new Page(driver, {
+module.exports = driver => Object.assign(page(driver), {
     url: '/',
     elementToWaitFor: 'body',
     elements: {

test/e2e/page-objects/page.js

@@ -5,50 +5,47 @@ const webdriver = require('selenium-webdriver');
 const By = webdriver.By;
 const until = webdriver.until;
 
-class Page {
+module.exports = driver => ({
-    constructor(driver, props) {
+    driver,
-        this.driver = driver;
+    url: '/',
-        this.props = props || {
+    elements: {},
-            elements: {}
-        };
-    }
 
     element(key) {
-        return this.driver.findElement(By.css(this.props.elements[key] || key));
+        return this.driver.findElement(By.css(this.elements[key] || key));
-    }
+    },
 
     navigate() {
-        this.driver.navigate().to(config.baseUrl + this.props.url);
+        this.driver.navigate().to(config.baseUrl + this.url);
         return this.waitUntilVisible();
-    }
+    },
 
     waitUntilVisible() {
-        let selector = this.props.elements[this.props.elementToWaitFor];
+        let selector = this.elements[this.elementToWaitFor];
-        if (!selector && this.props.url) {
+        if (!selector && this.url) {
-            selector = 'body.page--' + (this.props.url.substring(1).replace(/\//g, '--') || 'home');
+            selector = 'body.page--' + (this.url.substring(1).replace(/\//g, '--') || 'home');
         }
         return selector ? this.driver.wait(until.elementLocated(By.css(selector))) : this.driver.sleep(1000);
-    }
+    },
 
     submit() {
         return this.element('submitButton').click();
-    }
+    },
 
     click(key) {
         return this.element(key).click();
-    }
+    },
 
     getText(key) {
         return this.element(key).getText();
-    }
+    },
 
     getValue(key) {
         return this.element(key).getAttribute('value');
-    }
+    },
 
     setValue(key, value) {
         return this.element(key).sendKeys(value);
-    }
+    },
 
     containsText(str) {
         // let text = await driver.findElement({ css: 'body' }).getText();
@@ -56,6 +53,4 @@ class Page {
             return (document.documentElement.textContent || document.documentElement.innerText).indexOf('${str}') > -1;
         `);
     }
-}
+});
-
-module.exports = Page;

test/e2e/page-objects/subscription.js

@@ -1,45 +1,36 @@
 'use strict';
 
 const config = require('../helpers/config');
-const Page = require('./page');
+const page = require('./page');
 
-class Web extends Page {
+const web = {
     enterEmail(value) {
         this.element('emailInput').clear();
         return this.element('emailInput').sendKeys(value);
     }
-}
+};
 
-class Mail extends Page {
+const mail = {
     navigate(address) {
         this.driver.sleep(100);
         this.driver.navigate().to(`http://localhost:${config.app.testserver.mailboxserverport}/${address}`);
         return this.waitUntilVisible();
     }
-}
+};
-
-class WebSubscribe extends Web {
-    constructor(driver, list) {
-        super(driver, {
-            url: `/subscription/${list.cid}`,
-            elementToWaitFor: 'form',
-            elements: {
-                form: `form[action="/subscription/${list.cid}/subscribe"]`,
-                emailInput: '#main-form input[name="email"]',
-                submitButton: 'a[href="#submit"]'
-            }
-        });
-    }
-    foo() {
-        // ...
-    }
-}
 
 module.exports = (driver, list) => ({
 
-    webSubscribe: new WebSubscribe(driver, list),
+    webSubscribe: Object.assign(page(driver), web, {
+        url: `/subscription/${list.cid}`,
+        elementToWaitFor: 'form',
+        elements: {
+            form: `form[action="/subscription/${list.cid}/subscribe"]`,
+            emailInput: '#main-form input[name="email"]',
+            submitButton: 'a[href="#submit"]'
+        }
+    }),
 
-    webConfirmSubscriptionNotice: new Web(driver, {
+    webConfirmSubscriptionNotice: Object.assign(page(driver), web, {
         url: `/subscription/${list.cid}/confirm-notice`,
         elementToWaitFor: 'homepageButton',
         elements: {
@@ -47,21 +38,21 @@ module.exports = (driver, list) => ({
         }
     }),
 
-    mailConfirmSubscription: new Mail(driver, {
+    mailConfirmSubscription: Object.assign(page(driver), mail, {
         elementToWaitFor: 'confirmLink',
         elements: {
             confirmLink: `a[href^="${config.settings['service-url']}subscription/subscribe/"]`
         }
     }),
 
-    webSubscribedNotice: new Web(driver, {
+    webSubscribedNotice: Object.assign(page(driver), web, {
         elementToWaitFor: 'homepageButton',
         elements: {
             homepageButton: 'a[href^="https://mailtrain.org"]'
         }
     }),
 
-    mailSubscriptionConfirmed: new Mail(driver, {
+    mailSubscriptionConfirmed: Object.assign(page(driver), mail, {
         elementToWaitFor: 'unsubscribeLink',
         elements: {
             unsubscribeLink: 'a[href*="/unsubscribe/"]',
@@ -69,21 +60,21 @@ module.exports = (driver, list) => ({
         }
     }),
 
-    webUnsubscribe: new Web(driver, {
+    webUnsubscribe: Object.assign(page(driver), web, {
         elementToWaitFor: 'submitButton',
         elements: {
             submitButton: 'a[href="#submit"]'
         }
     }),
 
-    webUnsubscribedNotice: new Web(driver, {
+    webUnsubscribedNotice: Object.assign(page(driver), web, {
         elementToWaitFor: 'homepageButton',
         elements: {
             homepageButton: 'a[href^="https://mailtrain.org"]'
         }
     }),
 
-    mailUnsubscriptionConfirmed: new Mail(driver, {
+    mailUnsubscriptionConfirmed: Object.assign(page(driver), mail, {
         elementToWaitFor: 'resubscribeLink',
         elements: {
             resubscribeLink: `a[href^="${config.settings['service-url']}subscription/${list.cid}"]`

test/e2e/page-objects/users.js

@@ -1,30 +1,27 @@
 'use strict';
 
-const Page = require('./page');
+const page = require('./page');
-
-class Login extends Page {
-    enterUsername(value) {
-        // this.element('usernameInput').clear();
-        return this.element('usernameInput').sendKeys(value);
-    }
-    enterPassword(value) {
-        return this.element('passwordInput').sendKeys(value);
-    }
-}
 
 module.exports = driver => ({
 
-    login: new Login(driver, {
+    login: Object.assign(page(driver), {
         url: '/users/login',
         elementToWaitFor: 'submitButton',
         elements: {
             usernameInput: 'form[action="/users/login"] input[name="username"]',
             passwordInput: 'form[action="/users/login"] input[name="password"]',
             submitButton: 'form[action="/users/login"] [type=submit]'
+        },
+        enterUsername(value) {
+            // this.element('usernameInput').clear();
+            return this.element('usernameInput').sendKeys(value);
+        },
+        enterPassword(value) {
+            return this.element('passwordInput').sendKeys(value);
         }
     }),
 
-    account: new Page(driver, {
+    account: Object.assign(page(driver), {
         url: '/users/account',
         elementToWaitFor: 'emailInput',
         elements: {

test/e2e/tests/subscription.js

@@ -4,10 +4,10 @@ const config = require('../helpers/config');
 const shortid = require('shortid');
 const expect = require('chai').expect;
 const driver = require('../helpers/driver');
-const Page = require('../page-objects/page');
 
-const page = new Page(driver);
+const page = require('../page-objects/page')(driver);
 const flash = require('../page-objects/flash')(driver);
+
 const {
     webSubscribe,
     webConfirmSubscriptionNotice,