Front end testing base

Start point for browser based testing

Front end testing base

What is it?

A starter boilerplate project for writing browser-based functional tests in WebdriverIO 6.

Stack

WebdriverIO 6
Cucumber.js for writing BDD features in Gherkin syntax
TypeScript
ESLint and Prettier for code style and linting
Uses @nice-digital/wdio-cucumber-steps shared step definitions
TeamCity reporter for TeamCity integration
Cucumber (Gherkin) Full Support VSCode extension support

Required software

Node >= 12
Chrome, Firefox or Edge

Cucumber (Gherkin) Full Support

The Cucumber (Gherkin) Full Support VSCode extension is great for intellisense for step definitions.

Install the extension and configure by adding the following to .vscode/settings.json:

{
+    "cucumberautocomplete.steps": [
+        "node_modules/@nice-digital/wdio-cucumber-steps/src/given/definitions.js",
+        "node_modules/@nice-digital/wdio-cucumber-steps/src/when/definitions.js",
+        "node_modules/@nice-digital/wdio-cucumber-steps/src/then/definitions.js",
+    ]
}

Getting started

git clone https://github.com/nice-digital/frontend-testing-base.git
cd frontend-testing-base
npm i

If you have issues with regard to:

gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

After the install has finished run the tests by running the following command. This starts a selenium server and opens Chrome to run the tests:

npm test

Excluding tests

Exclude tests by using the @pending cucumber tag.

Running single features

To run a single feature file, use the following command:

npm test -- --spec ./features/homepage.feature

Note: you can pass in multiple files, separated by a comma.

Or you can use a keyword to filter e.g.:

npm test -- --spec homepage

Finally, if you've grouped your specs into suites you can run and individual suite with:

npm test -- --suite homepage

See organizing test suites in the WebdriverIO docs for more info.

if you want to run tests against all browsers locally you can do so via this command:

npm run test:allbrowsers

The baseUrl in wdio.conf.js determines which instance of guidance web that tests will run against, you can change this to suit your needs.

Docker

Running tests on Docker is a good option as it means you don't need browsers installed on the host machine, and the Selenium grid is automatically created for you. This is useful on a TeamCity build agent where you can't rely on Chrome and Firefox being installed.

In bash:

./run.sh

Or in CMD on Windows:

run

Or in PowerShell:

cmd /c "run"

nice-digital/frontend-testing-base