Setting up and using Nightwatch

Nightwatch is the automated browser testing framework that we're going to be using to test our full-stack Vue application.


This is a companion discussion topic for the original entry at https://vuejsdevelopers.com/lessons/setting-up-and-using-nightwatch/1/

Hi Anthony i have a problem runnin e2e test.
Im using Windows 10 home with WSL and docker, OS build 19042.685.
i start with
PS C:\Courses\vue_ent\printbay> bash run-dev-env.sh
user@255da8a8a9cf:/workdir$ npm i
user@255da8a8a9cf:/workdir$ npm run seed

when i run

user@255da8a8a9cf:/workdir$ npm run test:e2e
The log says this. (I have tried to update caniuse-lite-browserlist without luck)

INFO Starting development server…
Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist

WARNING Compiled with 2 warnings 7:46:48 PM
warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
js/chunk-vendors.c8769fdc.js (985 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.45 MiB)
css/chunk-vendors.6fc3a04e.css
js/chunk-vendors.c8769fdc.js
css/app.099df847.css
js/app.2c435339.js

App running at:

It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container’s external mapped port>/

App is served in production mode.
Note this is for preview or E2E testing only.

Starting selenium server… started - PID: 101

[Test Copy] Test Suite

Running: default e2e tests

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
{ value:
{ message:
‘session not created: Chrome version must be between 71 and 75\n (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.19.128-microsoft-standard x86_64) (WARNING: The server did not provide any stacktrace information)\nCommand duration or timeout: 1.30 seconds\nBuild info: version: ‘3.141.59’, revision: ‘e82be7d358’, time: ‘2018-11-14T08:25:53’\nSystem info: host: ‘255da8a8a9cf’, ip: ‘172.17.0.2’, os.name: ‘Linux’, os.arch: ‘amd64’, os.version: ‘4.19.128-microsoft-standard’, java.version: ‘11.0.9.1’\nDriver info: driver.version: unknown’,
error: ‘session not created’ },
status: 33 }

ERROR Error: Command failed: /workdir/node_modules/nightwatch/bin/nightwatch --config /workdir/node_modules/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js --env chrome
Error: Command failed: /workdir/node_modules/nightwatch/bin/nightwatch --config /workdir/node_modules/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js --env chrome
at makeError (/workdir/node_modules/execa/index.js:174:9)
at Promise.all.then.arr (/workdir/node_modules/execa/index.js:278:16)
at process._tickCallback (internal/process/next_tick.js:68:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! printbay@0.1.0 test:e2e: vue-cli-service test:e2e
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the printbay@0.1.0 test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2021-01-07T19_47_01_938Z-debug.log
user@255da8a8a9cf:/workdir$

The issue is that the version of chrome that has been installed does not match the version of chromedriver that has been installed by the Vue CLI Nightwatch plugin.

Unfortunately, Google does not provide old versions of chrome so we have no choice but to isntall the latest version. That means we have to manually update chromedriver.

Go into the Docker environment and do this:

$ npm i chromedriver && cp node_modules/chromedriver/lib/chromedriver/chromedriver node_modules/\@vue/cli-plugin-e2e-nightwatch/node_modules/chromedriver/lib/chromedriver

Hi Anthony

I ran the chromedriver install. But before that i had to remove node_modules and re install with this command because i got a lot of error’s.

/workdir$ rm -rf node_modules package-lock.json && npm install

after that i installed

/workdir$ vue add e2e-nightwatch

because i got this error when i ran npm run test:e2e

Error: Cannot find module ‘@vue/cli-plugin-e2e-nightwatch’

Now the test is running but with errors.

Running: default e2e tests
Proxy error: Could not proxy request /public/logo.png from localhost:8080 to http://localhost:8070.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /items from localhost:8080 to http://localhost:8070.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Warn: WaitForElement found 2 elements for selector “#app”. Only the first one will be checked.
:heavy_check_mark: Element <#app> was visible after 206 milliseconds.
:heavy_multiplication_x: Testing if element <.hello> is present. - expected “present” but got: “not present”
at Object.default e2e tests (/workdir/tests/e2e/specs/test copy.js:9:15)
at process._tickCallback (internal/process/next_tick.js:61:11)

FAILED: 1 assertions failed and 1 passed (5.092s)

[Test] Test Suite

Running: default e2e tests
Proxy error: Could not proxy request /public/logo.png from localhost:8080 to http://localhost:8070.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /items from localhost:8080 to http://localhost:8070.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Warn: WaitForElement found 2 elements for selector “#app”. Only the first one will be checked.
:heavy_check_mark: Element <#app> was visible after 100 milliseconds.
:heavy_multiplication_x: Testing if element <.hello> is present. - expected “present” but got: “not present”
at Object.default e2e tests (/workdir/tests/e2e/specs/test.js:9:15)
at process._tickCallback (internal/process/next_tick.js:61:11)

FAILED: 1 assertions failed and 1 passed (2.998s)


TEST FAILURE: 2 assertions failed, 2 passed. (10.4s)

:heavy_multiplication_x: test copy

  • default e2e tests (5.092s)
    Testing if element <.hello> is present. - expected “present” but got: “not present”
    at Object.default e2e tests (/workdir/tests/e2e/specs/test copy.js:9:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

:heavy_multiplication_x: test

  • default e2e tests (2.998s)
    Testing if element <.hello> is present. - expected “present” but got: “not present”
    at Object.default e2e tests (/workdir/tests/e2e/specs/test.js:9:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

ERROR Error: Command failed: /workdir/node_modules/nightwatch/bin/nightwatch --config /workdir/node_modules/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js --env chrome
Error: Command failed: /workdir/node_modules/nightwatch/bin/nightwatch --config /workdir/node_modules/@vue/cli-plugin-e2e-nightwatch/nightwatch.config.js --env chrome
at makeError (/workdir/node_modules/execa/index.js:174:9)
at Promise.all.then.arr (/workdir/node_modules/execa/index.js:278:16)
at process._tickCallback (internal/process/next_tick.js:68:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! printbay@0.1.0 test:e2e: vue-cli-service test:e2e
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the printbay@0.1.0 test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2021-01-09T18_10_34_451Z-debug.log
user@30791cce400a:/workdir$

I think the problem is that you’ve now installed a different version of the Vue CLI Nightwatch plugin. It’s important to keep the same version as I have in package.json

I’d suggest you ensure the correct version is installed and then re-follow my instructions for overwriting the Chrome Driver version above.