Webdriverio-client NPM

webdriverio-client

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

Install webdriverio-client in 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
```

Create tests/e2e/jasmine.json and add the following...

{
    "spec_dir": "tests",
    "spec_files": [
        "e2e/**/*-spec.js"
    ]
}

Create a test. 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);
            });
    });

});

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/e2e
DOCKER_CONTAINER: 15d2c2312f0e
DOCKER_PORT: 32782
Removing everything but *.baseline.png files from tests/e2e/screenshots
webdriver server : localhost:32782
isApp is :false
Submitting bundle to localhost:32782 for test...
Running command: curl -s -F "tarball=@test.tar.gz" -F "entry-point=dist/" -F "tests-folder=tests/e2e" localhost:32782/
TIMESTAMP: 1482282334
Waiting 10s before checking
Checking for results...
Checking for results...
Parsing results...
-INPUT VARIABLES---------------
tarball: test.tar.1482282333713.gz
entry-point: dist/
timestamp: 1482282334
-------------------------------
Processing test.tar.1482282333713.gz...
+ set -e
+ set -u
+ TARBALL=test.tar.1482282333713.gz
+ ENTRY_POINT=dist/
+ TIMESTAMP=1482282334
+ TESTS_FOLDER=tests/e2e
+ TEST_CONFIG=tests/e2e/test-config.json
+ NODE_SPECS=tests/e2e
+ echo '-INPUT VARIABLES---------------'
+ echo tarball: test.tar.1482282333713.gz
+ echo entry-point: dist/
+ echo timestamp: 1482282334
+ echo -------------------------------
+ cd /opt/node-envs/6.9.2/lib/node_modules/webdriverio-server/src/..
+ echo Processing test.tar.1482282333713.gz...
+ mkdir build-1482282334
+ ln -s ../build/node_modules build-1482282334/node_modules
+ ln -s ../testUtils build-1482282334/testUtils
+ cd build-1482282334
+ tar -xzf ../uploads/test.tar.1482282333713.gz
+ testIt
+ echo Testing...
Testing...
++ getOpenPort
++ perl -MSocket -le 'socket S, PF_INET, SOCK_STREAM,getprotobyname("tcp"); $$port = int(rand(1080))+1080; ++$$port until bind S, sockaddr_in($$port,inet_aton("127.1")); print $$port'
+ HTTP_PORT=1383
++ lsof -t -i:1383
+ kill
+ echo ''

++ pwd
+ CURRENT_DIR=/opt/node-envs/6.9.2/lib/node_modules/webdriverio-server/build-1482282334
+ cd dist/
+ waitForPort 1383
+ grep -v 1383
+ /opt/node-envs/6.9.2/lib/node_modules/webdriverio-server/build-1482282334/node_modules/.bin/http-server -s -c-1 -p 1383
++ lsof -iTCP -sTCP:LISTEN -P
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 42 root 10u IPv6 96480 0t0 TCP *:3001 (LISTEN)
+ sleep 1
+ grep -v 1383
++ lsof -iTCP -sTCP:LISTEN -P
+ cd /opt/node-envs/6.9.2/lib/node_modules/webdriverio-server/build-1482282334
++ getOpenPort
++ perl -MSocket -le 'socket S, PF_INET, SOCK_STREAM,getprotobyname("tcp"); $$port = int(rand(1080))+1080; ++$$port until bind S, sockaddr_in($$port,inet_aton("127.1")); print $$port'
+ SELENIUM_PORT=2133
++ lsof -t -i:2133
+ kill
+ echo ''

+ waitForPort 2133
+ grep -v 2133
+ ./node_modules/.bin/webdriver-manager start --seleniumPort 2133
++ lsof -iTCP -sTCP:LISTEN -P
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 42 root 10u IPv6 96480 0t0 TCP *:3001 (LISTEN) node 65 root 10u IPv4 97447 0t0 TCP *:1383 (LISTEN)
+ sleep 1
+ grep -v 2133
++ lsof -iTCP -sTCP:LISTEN -P
+ ../bin/replace.js tests/e2e/test-config.json selenium.host:localhost selenium.port:2133 http.host:localhost http.port:1383 http.entryPoint:/
+ echo 'Running jasmine tests with http port 1383 and selenium port 2133'
+ echo
+ TEST_STATUS=0
+ ./node_modules/.bin/jasmine JASMINE_CONFIG_PATH=tests/e2e/jasmine.json
Running jasmine tests with http port 1383 and selenium port 2133

Started
(node:120) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
.

1 spec, 0 failures
Finished in 8.64 seconds

++ lsof -t -i:1383
+ kill 65
++ lsof -t -i:2133
+ kill 88
+ tar -cf ../screenshots/1482282334.tar tests/e2e/screenshots
+ cd /opt/node-envs/6.9.2/lib/node_modules/webdriverio-server/src/..
+ rm -rf build-1482282334
+ exit 0

----------------------------------------------------------------------
Screenshots directory updated with results from server.
Tests Pass.
Reverting any changes in tests/e2e/screenshots
error: pathspec 'tests/e2e/screenshots' did not match any file(s) known to git.
Not using git
```

The first argument to `webdriverio-server`, `local_e2e_test` runs 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:port` of the 
server to send your  `dist` and `tests/e2e` directories 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 tests/e2e/screenshots directory.
Add some script shortcuts for e2e testing. Edit package.json and add the following two commands to the scripts section (create the scripts sections if its missing):
```
"scripts": {
    "local-e2e-test": "wdio-client local_e2e_test dist tests/e2e",
    "update-screenshots": "wdio-client update_screenshots"
}
```

Also, add the following to .gitignore...

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.