wdio-client v1.0.22
webdriverio-client
This is a client for the webdriverio-server.
Setup
Setting up e2e tests for your app requires
- Prerequisites
- Setting up boilerplate
- Writing tests
Prerequisites
These instructions assume that you already have a server (either Mac or Ubuntu) running the webdriverio-server. The client will need :
Setting up boilerplate
We will describe a typical installation scenario with an ember project, but the client can easily be adapted for use with react projects (or any other setup).
In these instructions, we assume that the fully built application package is placed in the dist
folder (default ember output directory) and the e2e tests are in the tests/e2e
folder. If these are different for your application, just change these in the following instructions to point to the right place.
First, install webdriverio-client
and also add it to the devDependencies.
npm install webdriverio-client --save-dev
Now, we will setup some command shortcuts for e2e testing. Edit package.json
and add the following 2 command to the scripts section (create the scripts sections if its missing)...
"scripts": {
"e2e-test": "wdio-client remote_e2e_test serverip:3000 dist tests/e2e",
"update-screenshots": "wdio-client update_screenshots"
}
The first command e2e-test
passes 4 arguments to the wdio-client
script - remote_e2e_test
, serverip:3000
, dist
and tests/e2e
... the last 3 can be modified to suit your application. Here, serverip
is the ip address of the server running the webdriverio-server
process, which typically runs on port 3000
. dist
and tests/e2e
are the application package folder and e2e tests folder, respectively.
We will now create the directory structure required for the e2e tests, screenshots and jasmine config file.
mkdir tests
mkdir tests/e2e
mkdir tests/e2e/screenshots
Create tests/e2e/jasmine.json
and add the following...
{
"spec_dir": "tests",
"spec_files": [
"e2e/**/*-spec.js"
]
}
Also, add the following to .gitignore
...
test.tar.gz
tests/e2e/test-config.json
tests/e2e/screenshots/diff
Writing tests
Now, we are ready to create an e2e test. Create tests/e2e/main-spec.js
and paste the following...
var webdriverio = require('webdriverio');
var webdrivercss = require('webdrivercss');
var testUtils = require('../../testUtils/utils').e2e
var testConfig = require('./test-config.json');
var url = testUtils.getUrl(testConfig);
var NORMAL_VIEWPORT_WIDTH = 1280;
var NORMAL_VIEWPORT_HEIGHT = 800;
describe('myapp e2e tests using ' + url, function () {
var client, commonScreenshots;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 9999999;
beforeEach(function () {
commonScreenshots = {
name: 'content',
elem: 'html',
};
client = testUtils.init(webdriverio, webdrivercss, testConfig);
client
.setViewportSize({width: NORMAL_VIEWPORT_WIDTH, height: NORMAL_VIEWPORT_HEIGHT})
.url(url);
});
afterEach(function (done) {
client.end(done);
});
it('main-page renders appropriately', function (done) {
client
.pause(1000)
.verifyScreenshots('main-page', [commonScreenshots], function () {
client.call(done);
});
});
});
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 tests/e2e/screenshots/diff
.
If the new screenshots are accurate, you can update your reference screenshots by running
npm run update-screenshots
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago