Switch to async Webdriver.io mode.

Author: blueimp

docker-compose.yml

@@ -4,7 +4,6 @@ services:
     build: server/php
     ports:
       - 127.0.0.1:80:80
-      - ${SERVER_HOST:-127.0.0.1}:${SERVER_PORT-}:80
     volumes:
       - .:/var/www/html
   mocha:
@@ -16,7 +15,6 @@ services:
       - example
   chromedriver:
     image: blueimp/chromedriver
-    init: true
     tmpfs: /tmp
     environment:
       - DISABLE_X11=false
@@ -28,7 +26,6 @@ services:
       - 127.0.0.1:5900:5900
   geckodriver:
     image: blueimp/geckodriver
-    init: true
     tmpfs: /tmp
     shm_size: 2g
     environment:
@@ -41,18 +38,17 @@ services:
       - 127.0.0.1:5901:5900
   wdio:
     image: blueimp/wdio
-    init: true
     read_only: true
     tmpfs:
       - /tmp
     environment:
-      - WAIT_FOR_HOSTS= chromedriver:4444 geckodriver:4444 example:80
+      - WAIT_FOR_HOSTS=chromedriver:4444 geckodriver:4444 example:80
       - WINDOWS_HOST
       - MACOS_ASSETS_DIR=$PWD/wdio/assets/
       - WINDOWS_ASSETS_DIR
     volumes:
-      - ./wdio:/opt:ro
-      - ./wdio/reports:/opt/reports
+      - ./wdio:/app:ro
+      - ./wdio/reports:/app/reports
     depends_on:
       - chromedriver
       - geckodriver

wdio/hooks/index.js

@@ -5,11 +5,21 @@
 const cmds = require('wdio-screen-commands')
 
 /* eslint-disable jsdoc/valid-types */
-/** @type WebdriverIO.HookFunctions */
+/** @type WebdriverIO.HookFunctionExtension */
 const config = {
   before: async () => {
+    // Add browser commands:
     browser.addCommand('saveScreenshotByName', cmds.saveScreenshotByName)
     browser.addCommand('saveAndDiffScreenshot', cmds.saveAndDiffScreenshot)
+    // Add element commands:
+    browser.addCommand('saveScreenshotByName', cmds.saveScreenshotByName, true)
+    browser.addCommand(
+      'saveAndDiffScreenshot',
+      cmds.saveAndDiffScreenshot,
+      true
+    )
+    if (browser.config.appium)
+      await browser.updateSettings(browser.config.appium)
     if (browser.config.maximizeWindow) await browser.maximizeWindow()
   },
   beforeTest: async test => {

wdio/test/pages/file-upload.js

@@ -32,42 +32,47 @@ class FileUpload {
    * Opens the file upload form.
    *
    * @param {number} [timeout] Wait timeout
-   * @returns {FileUpload} FileUpload object
    */
-  open(timeout) {
-    browser.url('/')
-    this.fileinput.waitForExist({ timeout })
-    return this
+  async open(timeout) {
+    await browser.url('/')
+    await this.fileinput.waitForExist({ timeout })
   }
   /**
    * Uploads files.
    *
    * @param {Array<string>} files Files to upload
    * @param {number} [timeout] Wait timeout
-   * @returns {FileUpload} FileUpload object
    */
-  upload(files, timeout) {
-    this.fileinput.addValue(files.join('\n'))
-    browser.waitUntil(() => !this.processing.length, { timeout })
-    this.start.click()
-    browser.waitUntil(() => !!this.downloads.length, { timeout })
-    browser.waitUntil(() => !this.uploads.length, { timeout })
-    return this
+  async upload(files, timeout) {
+    await this.fileinput.addValue(files.join('\n'))
+    await browser.waitUntil(async () => !(await this.processing.length), {
+      timeout
+    })
+    await this.start.click()
+    await browser.waitUntil(async () => !!(await this.downloads.length), {
+      timeout
+    })
+    await browser.waitUntil(async () => !(await this.uploads.length), {
+      timeout
+    })
   }
   /**
    * Deletes uploaded files.
    *
    * @param {number} [timeout] Wait timeout
-   * @returns {FileUpload} FileUpload object
    */
-  delete(timeout) {
-    this.toggle.click()
-    browser.waitUntil(() => this.downloads.length === this.checked.length, {
+  async delete(timeout) {
+    await this.toggle.click()
+    await browser.waitUntil(
+      async () => (await this.downloads.length) === (await this.checked.length),
+      {
+        timeout
+      }
+    )
+    await this.remove.click()
+    await browser.waitUntil(async () => !(await this.downloads.length), {
       timeout
     })
-    this.remove.click()
-    browser.waitUntil(() => !this.downloads.length, { timeout })
-    return this
   }
 }
 

wdio/test/specs/01-file-upload.js

@@ -8,16 +8,18 @@ const assetsDir = browser.config.assetsDir
 describe('File Upload', () => {
   if (!assetsDir) return
 
-  it('uploads files', () => {
-    FileUpload.open().upload([
+  it('uploads files', async () => {
+    await FileUpload.open()
+    await FileUpload.upload([
       assetsDir + 'black+white-60x40.gif',
       assetsDir + 'black+white-3x2.jpg'
     ])
-    browser.saveAndDiffScreenshot('Files uploaded')
+    await browser.saveAndDiffScreenshot('Files uploaded')
   })
 
-  it('deletes files', () => {
-    FileUpload.open().delete()
-    browser.saveAndDiffScreenshot('Files deleted')
+  it('deletes files', async () => {
+    await FileUpload.open()
+    await FileUpload.delete()
+    await browser.saveAndDiffScreenshot('Files deleted')
   })
 })