Skip to content
Docker setup for WebdriverIO with automatic screenshots, image diffing and screen recording support for containerized versions of Chrome and Firefox, Safari Mobile and Chrome Mobile via Appium and Safari on MacOS as well as Internet Explorer and Microsoft Edge on Windows 10.
JavaScript PowerShell Shell Python HTML Dockerfile CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add GitHub Sponsors config. Nov 3, 2019
assets Update config and specs to test mail attachments. Apr 13, 2019
bin Don't keep a shell running when starting appium. Jul 3, 2019
etc Separate custom hosts with a newline. Mar 4, 2019
hooks Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
reports Ignore all files except the .gitignore file itself. Mar 29, 2019
src Remove obsolete cookie test page. Apr 15, 2019
test Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
.dockerignore Install NPM dependencies via package.json. Jul 14, 2019
.gitignore Use /opt as working directory. Mar 27, 2019
Dockerfile Install NPM dependencies via package.json. Jul 14, 2019
FAQ.md Format markdown using prettier. Jul 14, 2019
LICENSE.txt Add license text. Mar 1, 2019
README.md Format markdown using prettier. Jul 14, 2019
chrome.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
docker-compose.yml Implement sample session handling. Apr 15, 2019
edge.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
firefox.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
ie.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
mobile-chrome.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
mobile-safari.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
package-lock.json Update dependencies. Aug 27, 2019
package.json Move eslint and prettier configs to package.json. Jul 15, 2019
safari.js Use blueimp+jsdoc+node+prettier config for eslint. Jul 14, 2019
wdio.conf.js Make wdio.conf.js a symlink to chrome.js. Mar 4, 2019

README.md

WDIO

Docker setup for WebdriverIO with automatic screenshots, image diffing and screen recording support for containerized versions of Chrome and Firefox, Safari Mobile and Chrome Mobile via Appium and Safari on MacOS as well as Internet Explorer and Microsoft Edge on Windows 10.

Contents

Usage

Chrome

Run the tests with Chrome:

docker-compose run --rm wdio [chrome]

Connect to Chrome via VNC:

open vnc://user:secret@localhost:5900

Please Note:
To be able to see Chrome running via VNC or screen recordings, disable headless mode in chrome.js.

Firefox

Run the tests with Firefox:

docker-compose run --rm wdio firefox

Connect to Firefox via VNC:

open vnc://user:secret@localhost:5901

Safari

To run the tests with Safari on MacOS, follow these steps:

  1. Configure Safari to Enable WebDriver Support.

  2. Download and install MJPEG Server as mjpeg-server in your PATH and install FFmpeg via Homebrew:

    brew install ffmpeg
  3. Add the example host to your /etc/hosts file:

    printf '127.0.0.1\t%s\n' example | sudo tee -a /etc/hosts
  4. Start safaridriver and mjpeg-server with the provided helper script:

    bin/safaridriver.sh [screen index]
  5. Run the tests with Safari:

    docker-compose run --rm wdio safari

Mobile Safari

To run the tests with Mobile Safari on iOS Simulator, follow these steps:

  1. Install Xcode from the Mac App Store.

  2. Install the Xcode Command Line Tools:

    xcode-select --install
  3. Install Node.JS and Carthage via Homebrew:

    brew install node carthage
  4. Make sure the necessary Appium dependencies for iOS testing are installed:

    npx appium-doctor --ios
  5. Install Appium as global NPM package:

    npm install -g appium
  6. Add the example host to your /etc/hosts file:

    printf '127.0.0.1\t%s\n' example | sudo tee -a /etc/hosts
  7. Start appium with the provided helper script:

    bin/appium.sh
  8. Run the tests with Mobile Safari:

    docker-compose run --rm wdio mobile-safari

    To run the tests in landscape orientation, provide the ORIENTATION environment variable:

    ORIENTATION=LANDSCAPE docker-compose run --rm wdio mobile-safari

    To use a different iOS device than defined in the config, provide the DEVICE_NAME environment variable:

    DEVICE_NAME='iPad Air' docker-compose run --rm wdio mobile-safari

    To use a different iOS version than defined in the config, provide the PLATFORM_VERSION environment variable:

    PLATFORM_VERSION=12.1 docker-compose run --rm wdio mobile-safari

Mobile Chrome

To run the tests with Mobile Chrome on Android Simulator, follow these steps:

  1. Download Android Studio and on first start, follow the instructions to install the Android SDK and Emulator.

  2. Add the following lines to your ~/.profile to make the JDK included in Android Studio and the installed Android SDK available to Appium:

    export JAVA_HOME='/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home'
    export PATH="$JAVA_HOME/bin:$PATH"
    export ANDROID_HOME=~/Library/Android/sdk
  3. Install Node.JS via Homebrew:

    brew install node
  4. Make sure the necessary Appium dependencies for Android testing are installed:

    npx appium-doctor --android
  5. Install Appium as global NPM package:

    npm install -g appium [--chromedriver_version=VERSION]

    Make sure to configure appium with a Chromedriver version compatible with the version of Chrome running in your Android device. If appium has already been installed with an incompatible chromedriver version, you might want to uninstall and reinstall it with the proper --chromedriver_version argument.

  6. Start appium with the provided helper script:

    bin/appium.sh
  7. Start the Android Virtual Device with a custom /etc/hosts file:

    bin/android-emulator.sh -hosts etc/android.hosts
  8. Run the tests with Mobile Chrome:

    docker-compose run --rm wdio mobile-chrome

    To run the tests in landscape orientation, provide the ORIENTATION environment variable:

    ORIENTATION=LANDSCAPE docker-compose run --rm wdio mobile-chrome

Internet Explorer

Please Note:
This guide assumes that a system with Windows 10 has been set up, e.g. using the "MSEdge on Win10" virtual machine image (which also includes Internet Explorer) from Microsoft's Free VMs site.

To run the tests with Internet Explorer, follow these steps:

  1. Set "Change the size of text, apps, and other items" to 100% in Windows Display Settings.
    If the option is grayed out, make sure the graphics configuration allows changing the scaling setting (see e.g. Parallels article #123951).

  2. Make sure the Internet Explorer Zoom level is set to 100% so that the native mouse events can be set to the correct coordinates.

  3. Create a .env file in the same directory as docker-compose.yml and add the following environment variables:

    SERVER_HOST=<DOCKER_HOST_IP>
    SERVER_PORT=8080
    WINDOWS_HOST=<WINDOWS_HOST_IP>
    WINDOWS_ASSETS_DIR=C:\Users\<USERNAME>\Desktop\assets\

    Make sure that the DOCKER_HOST_IP is accessible from the Windows machine and the WINDOWS_HOST_IP is accessible from a Docker container (see also the FAQ).
    Also make sure that WINDOWS_ASSETS_DIR points to a valid folder path and ends with a backslash.

  4. Edit the example host entry in etc/windows.hosts and set its IP address to the SERVER_HOST IP defined in the .env file.

  5. Copy bin/webdriver.ps1 and etc/windows.hosts to the same folder in the Windows machine (e.g. the Desktop).
    Also copy the files in the assets directory to the folder defined as WINDOWS_ASSETS_DIR.

  6. Create a shortcut to webdriver.ps1 (via "Right-Click" → "Create shortcut"), then open the properties dialog for the shortcut (via "Right-Click" → "Properties") and set the Target property to the following value:

    powershell -ExecutionPolicy ByPass -File webdriver.ps1

    Click "OK" to save the changes to the shortcut.

  7. Double-Click on the webdriver shortcut to setup and start the servers.
    Allow nginx and MJPEGServer to communicate on all networks in the Windows Defender Firewall dialog.

  8. Run the tests with Internet Explorer:

    docker-compose run --rm wdio ie

Microsoft Edge

Please Note:
This guide assumes that a system with Windows 10 has been set up.
The scripted installation of MicrosoftWebDriver also requires 17763 as minimum Windows build version.

To run the tests with Microsoft Edge, follow these steps:

  1. Create a .env file in the same directory as docker-compose.yml and add the following environment variables:

    SERVER_HOST=<DOCKER_HOST_IP>
    SERVER_PORT=8080
    WINDOWS_HOST=<WINDOWS_HOST_IP>
    WINDOWS_ASSETS_DIR=C:\Users\<USERNAME>\Desktop\assets\

    Make sure that the DOCKER_HOST_IP is accessible from the Windows machine and the WINDOWS_HOST_IP is accessible from a Docker container (see also the FAQ).
    Also make sure that WINDOWS_ASSETS_DIR points to a valid folder path and ends with a backslash.

  2. Edit the example host entry in etc/windows.hosts and set its IP address to the SERVER_HOST IP defined in the .env file.

  3. Copy bin/webdriver.ps1 and etc/windows.hosts to the same folder in the Windows machine (e.g. the Desktop).
    Also copy the files in the assets directory to the folder defined as WINDOWS_ASSETS_DIR.

  4. Create a shortcut to webdriver.ps1 (via "Right-Click" → "Create shortcut"), then open the properties dialog for the shortcut (via "Right-Click" → "Properties") and set the Target property to the following value:

    powershell -ExecutionPolicy ByPass -File webdriver.ps1

    Click "OK" to save the changes to the shortcut.

  5. Double-Click on the webdriver shortcut to setup and start the servers.
    Allow nginx and MJPEGServer to communicate on all networks in the Windows Defender Firewall dialog.

  6. Run the tests with Microsoft Edge:

    docker-compose run --rm wdio edge

Shutdown

Stop and remove the container set:

docker-compose down

License

Released under the MIT license.

Author

Sebastian Tschan

You can’t perform that action at this time.