This is a client for webdriverio-server. If you don't have a server to test against. Go figure that out first.
Setting up your project for e2e testing
webdriverio-clientin your project:npm install webdriverio-client --save-dev
Create the directory structure required for the e2e tests, screenshots and jasmine config file.mkdir -p tests/e2e/screenshots
tests/e2e/jasmine.jsonand add the following...
Create a test. Now, we are ready to create an e2e test. Create
tests/e2e/main-spec.jsand paste the following...var webdriverio = ;var webdrivercss = ;var testUtils = e2evar testConfig = ;var url = testUtils;var NORMAL_VIEWPORT_WIDTH = 1280;var NORMAL_VIEWPORT_HEIGHT = 800;;
Build your app into the
dist/directory. Your app should build all its assets into a single directory. You should be able to run an http server in this directory and see the entire app. Perhaps your app builds into a different directory. If so, copy all the build artifacts into
dist/for now. If your application has a mode in which it can run using test data only, build the app in this mode.
Test it out:$ webdriverio-client local_e2e_test dist tests/e2eDOCKER_CONTAINER: 15d2c2312f0eDOCKER_PORT: 32782Removing everything but *.baseline.png files from tests/e2e/screenshotswebdriver server : localhost:32782isApp is :falseSubmitting bundle to localhost:32782
The first argument to
local_e2e_testruns tests on a docker container attached to this system (the other option is
remote_e2e_test; if you choose this option, the next argument needs to be
name:portof the server to send your
tests/e2edirectories to). The last arguments tell where the built files are and where the test files are, respectively.
Take a look at the screenshot file that was created in the
Add some script shortcuts for e2e testing. Edit
package.jsonand add the following two commands to the scripts section (create the
scriptssections if its missing):"scripts":
Also, add the following to
test.tar.gz tests/e2e/test-config.json tests/e2e/screenshots/diff
Since this test executes on the
webdriverio-server, the dependencies only need to be installed on the server machine (they are, when using the webdriverio-server). So we don't need to worry about all the requires at the top.
Running the tests
To execute e2e tests...
npm run e2e-test
If tests fail because of a mismatch in screenshots, you can inspect the differences by checking out the images in
If the new screenshots are accurate, you can update your reference screenshots by running
npm run update-screenshots