Added configuration for nightwatch browser local tests

+ includes a simple test to use as a sample

README.md

@@ -29,3 +29,9 @@ docker-compose run --rm node npm
 ```sh
 docker-compose up dev
 ```
+
+### Running browser tests
+
+#### To run browser tests locally:
+
+Run: `QB_URL=localhost:8080 npm run e2e`

nightwatch.conf.js

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/camelcase */
+const build = `Nightwatch QB build-${process.env.DATE}`;
+
+module.exports = {
+	src_folders: [ 'tests/e2e/specs' ],
+	page_objects_path: '',
+	custom_commands_path: '',
+	custom_assertions_path: '',
+	globals_path: 'tests/e2e/globals.js',
+
+	webdriver: {},
+
+	test_settings: {
+		default: {
+			launch_url: process.env.QB_URL,
+			isLocal: true,
+		},
+
+		docker: {
+			launch_url: `http://dev:${process.env.PORT}`,
+			isLocal: true,
+			selenium_host: 'selenium',
+			desiredCapabilities: {
+				browserName: 'chrome',
+				chromeOptions: {
+					args: [ 'headless', 'no-sandbox', 'disable-gpu' ],
+					w3c: false,
+				},
+			},
+		},
+		sauceLabs: {
+			launch_url: `https://${process.env.COMMIT_HASH}--5efdb3b5f65950002286285d.chromatic.com`,
+			isLocal: false,
+			selenium_host: 'ondemand.saucelabs.com',
+			selenium_port: 80,
+			username: process.env.SAUCE_USERNAME,
+			access_key: process.env.SAUCE_ACCESS_KEY,
+			desiredCapabilities: {
+				build,
+				screenResolution: '1600x1200',
+				seleniumVersion: '3.141.59',
+			},
+		},
+		sauceChrome: {
+			extends: 'sauceLabs',
+			desiredCapabilities: {
+				browserName: 'googlechrome',
+				platform: 'Windows 10',
+				version: 'latest',
+			},
+		},
+
+		sauceFirefox: {
+			extends: 'sauceLabs',
+			desiredCapabilities: {
+				browserName: 'firefox',
+				platform: 'Windows 10',
+				version: 'latest',
+			},
+		},
+
+		sauceIE: {
+			extends: 'sauceLabs',
+			desiredCapabilities: {
+				browserName: 'internet explorer',
+				platform: 'Windows 10',
+				version: 'latest',
+			},
+		},
+
+		sauceEdge: {
+			extends: 'sauceLabs',
+			desiredCapabilities: {
+				browserName: 'MicrosoftEdge',
+				platform: 'Windows 10',
+				version: 'latest',
+			},
+		},
+
+		sauceSafari: {
+			extends: 'sauceLabs',
+			desiredCapabilities: {
+				browserName: 'safari',
+				platform: 'macOS 10.15',
+				version: 'latest',
+			},
+		},
+	},
+};

package.json

@@ -7,6 +7,7 @@
     "name": "The Wikidata team"
   },
   "scripts": {
+    "e2e": "vue-cli-service test:e2e",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",

tests/e2e/globals.js

@@ -0,0 +1,17 @@
+module.exports = {
+	// this controls whether to abort the test execution when an assertion failed and skip the rest
+	// it's being used in waitFor commands and expect assertions
+	abortOnAssertionFailure: false,
+
+	// this will overwrite the default polling interval (currently 500ms) for waitFor commands
+	// and expect assertions that use retry
+	waitForConditionPollInterval: 500,
+
+	// default timeout value in milliseconds for waitFor commands and implicit waitFor value for
+	// expect assertions
+	waitForConditionTimeout: 20000,
+
+	connectionRetryTimeout: 90000,
+	connectionRetryCount: 3,
+
+};

tests/e2e/specs/QueryBuilder.test.js

@@ -0,0 +1,9 @@
+module.exports = {
+	'QueryBuilder Component is rendered': ( client ) => {
+		client
+			.init()
+			.waitForElementPresent( 'body' )
+			.assert.visible( '.querybuilder' )
+			.assert.containsText( '.querybuilder__heading', 'Simple Query Builder' );
+	},
+};