e2e refactor for sauce labs (#9)

1. use click to simulate mouse move action (cause mouse move is not supported on Safari)
2. use executeScript to get userAgent instead of window size to check if it's a mobile browser (cause getting window size is not supported on Android)
3. add error message for custom matcher
4. add a waitForElementToShow function
5. update appium to 1.5

protractor.config.js

@@ -95,7 +95,7 @@ if (args.ci) {
             build: `${args.buildId}`,
             'tunnel-identifier': `${args.jobId}`,
             browserName: 'Safari',
-            appiumVersion: '1.4.16',
+            appiumVersion: '1.5.0',
             deviceName: 'iPhone 5s',
             deviceOrientation: 'portrait',
             platformVersion: '9.1',
@@ -109,8 +109,9 @@ if (args.ci) {
             build: `${args.buildId}`,
             'tunnel-identifier': `${args.jobId}`,
             browserName: 'Browser',
-            appiumVersion: '1.4.16',
+            appiumVersion: '1.5.0',
             deviceName: 'Android Emulator',
+            deviceType: 'phone',
             deviceOrientation: 'portrait',
             platformVersion: '4.4',
             platformName: 'Android',
@@ -128,7 +129,8 @@ if (args.ci) {
         {
             browserName: 'chrome',
             chromeOptions: {
-                args: ['--window-size=375,627']
+                // https://sites.google.com/a/chromium.org/chromedriver/capabilities
+                args: ['--window-size=375,627', '--user-agent=Android']
             }
         }
     ];

publish-to-gh-pages.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -ev
 
-# run unit test (--travis: use phantomjs browser)
+# run unit test (--ci: use phantomjs browser)
 npm test -- --ci
 
 # apply /#/ style router for SPA

source/test/e2e/helper.js

@@ -100,7 +100,7 @@ class BasePageObject {
             expect(header.title.getText()).toEqual('Aio Angular App');
             expect(header.menus.isPresent()).toBe(true);
             // user name
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 if (isSmall) {
                     expect(header.userName.isDisplayed()).toBe(false);
                 } else {
@@ -113,7 +113,7 @@ class BasePageObject {
             header.dropdownButton.click();
             expect(header.dropdownContent.isDisplayed()).toBe(true);
             // username/divider in dropdown
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 if (isSmall) {
                     expect(header.dropdownUserName.getText()).toEqual('PinkyJie');
                     expect(header.dropdownDivider.isDisplayed()).toBe(true);
@@ -135,7 +135,7 @@ class BasePageObject {
         // sidebar section
         const sidebar = this.getSidebar();
         if (config.sidebar) { // has sidebar
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 if (isSmall) {
                     expect(sidebar.sidebarSmBtn.isDisplayed()).toBe(true);
                     sidebar.sidebarSmBtn.click();
@@ -196,16 +196,33 @@ class BasePageObject {
 }
 
 class E2EHelper {
-    isSmallScreen () {
-        return browser.driver.manage().window().getSize().then((size) => {
-            return size.width < 600;
-        });
+    isMobile () {
+        return browser.executeScript('return /Android|iPhone/.test(window.navigator.userAgent)');
     }
 
     gotoUrl (url) {
         browser.get(`${browser.baseUrl}/${url}`);
     }
 
+    waitForElementToShow (cssSelector) {
+        const self = this;
+        const ele = $(cssSelector);
+        return browser.wait(() => {
+            return ele.isPresent().then((isPresent) => {
+                if (!isPresent) {
+                    return false;
+                }
+                return ele.isDisplayed()
+                    .then((isDisplayed) => {
+                        return isDisplayed;
+                    }, () => {
+                        // just retry
+                        return self.waitForElementToShow(cssSelector);
+                    });
+            });
+        }, browser.params.timeout);
+    }
+
     chooseDate (input, picker, date) {
         // trigger date picker modal
         browser.actions().click(input).perform();
@@ -256,7 +273,8 @@ const customMatchers = {
                 return {
                     pass: actual.getAttribute('class').then((classes) => {
                         return classes.split(' ').indexOf(expected) !== -1;
-                    })
+                    }),
+                    message: `Element does not contain class '${expected}'.`
                 };
             }
         };

source/test/e2e/specs/page-objects/phone-form.comp.js

@@ -33,12 +33,14 @@ class PhoneFormComp {
             expect(input).toHaveClass('invalid');
             expect(errorIcon.isDisplayed()).toBe(true);
             expect(errorMsg.isDisplayed()).toBe(false);
-            // simulate mouse hover
-            browser.actions().mouseMove(errorIcon).perform();
+            // use click to simulate mouse hover
+            // mouse move action not support on Safari
+            // browser.actions().mouseMove(errorIcon).perform();
+            errorIcon.click();
             expect(errorMsg.isDisplayed()).toBe(true);
             expect(errorMsg.getText()).toEqual(message);
-            // rollback mouse hover
-            browser.actions().mouseMove(input).perform();
+            // make mouse on other place
+            $('body').click();
         } else {
             expect(input).not.toHaveClass('invalid');
             expect(errorIcon.isDisplayed()).toBe(false);

source/test/e2e/specs/phone-add.spec.js

@@ -75,7 +75,7 @@ describe('Phone Add Page:', () => {
             expect(phoneList.view.count()).toEqual(6);
             const lastItem = phoneList.view.get(5);
             const expectedItem = [newPhone.Model, newPhone.OS, newPhone.Price];
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 lastItem.$$(phoneList.cell).each((td, index) => {
                     if (index === 3) {
                         // ignore the last cell

source/test/e2e/specs/phone-main.spec.js

@@ -55,7 +55,7 @@ describe('Phone Main Page:', () => {
         it('should show correct table', () => {
             // table header
             const headerText = ['Model', 'OS', 'Price', 'Action'];
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 page.ele.tableHeader.each((th, index) => {
                     if (isSmall && (index === 1 || index === 2)) {
                         expect(th.isDisplayed()).toBe(false);
@@ -70,7 +70,7 @@ describe('Phone Main Page:', () => {
             // first row
             const first = phoneList.view.get(0);
             const expectedFirst = ['iPhone 6', 'iOS', '5288'];
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 first.$$(phoneList.cell).each((td, index) => {
                     if (index === 3) {
                         const firstBtn = td.$(phoneList.firstBtn);
@@ -93,7 +93,7 @@ describe('Phone Main Page:', () => {
             browser._.expectUrlToMatch('phone/1');
             // back to phone List
             const sidebar = page.getSidebar();
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 if (isSmall) {
                     sidebar.sidebarSmBtn.click();
                 }
@@ -103,7 +103,7 @@ describe('Phone Main Page:', () => {
             // third row
             const third = phoneList.view.get(2);
             const expectedThird = ['Nexus 6', 'Android', '4400'];
-            browser._.isSmallScreen().then((isSmall) => {
+            browser._.isMobile().then((isSmall) => {
                 third.$$(phoneList.cell).each((td, index) => {
                     if (index === 3) {
                         return;