Setting saucelabs to work with netlify configuration

.env.example

@@ -1,2 +1,6 @@
 # The port for the development server
 PORT=8080
+
+#Saucelabs access data - needed if testing from local-cli
+SAUCE_USERNAME='<username>'
+SAUCE_ACCESS_KEY='<access_key>'

.github/workflows/test-and-netlify.yml

@@ -0,0 +1,37 @@
+# This workflow will do
+# - a clean install of node dependencies
+# - run tests
+# - build and upload the storybook to a staging area
+#
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+on: [push]
+
+name: Test and deploy to netlify
+jobs:
+  test-and-demo:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Set up node
+      uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - name: Install
+      run: npm ci
+    - name: Test
+      run: npm run test
+    - name: Build Query Builder
+      run: npm run build
+    - name: Deploy to netlify
+      env:
+        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+      run: DEPLOY_URL=$(npm run netlify --json | jq '.deploy_url' --raw-output);echo "::set-env name=DEPLOY_URL::$DEPLOY_URL"
+    - name: Run e2e cross browser tests
+      env:
+        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+        DEPLOY_URL: ${{ env.DEPLOY_URL }}
+      run: npm run e2e:saucelabs

nightwatch.conf.js

@@ -1,5 +1,6 @@
-/* eslint-disable @typescript-eslint/camelcase */
+const build = `Nightwatch build-${process.env.DATE}`;
 
+/* eslint-disable @typescript-eslint/camelcase */
 module.exports = {
 	src_folders: [ 'tests/e2e/specs' ],
 	page_objects_path: '',
@@ -27,5 +28,63 @@ module.exports = {
 				},
 			},
 		},
+
+		sauceLabs: {
+			launch_url: `${process.env.DEPLOY_URL}`,
+			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,7 +7,7 @@
     "name": "The Wikidata team"
   },
   "scripts": {
-    "e2e": "vue-cli-service test:e2e",
+    "e2e:saucelabs": "env DATE=\"$(date)\" nightwatch --config nightwatch.conf.js --env sauceChrome,sauceFirefox,sauceIE,sauceEdge,sauceSafari",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",

tests/e2e/globals.js

@@ -1,3 +1,6 @@
+const SauceLabs = require( 'saucelabs' ).default;
+const account = new SauceLabs( { user: process.env.SAUCE_USERNAME, key: process.env.SAUCE_ACCESS_KEY } );
+
 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
@@ -14,4 +17,23 @@ module.exports = {
 	connectionRetryTimeout: 90000,
 	connectionRetryCount: 3,
 
+	// Pass information about the browser tests to SauceLabs
+	afterEach( client, done ) {
+		if ( !this.isLocal ) {
+			const sessionId = client.sessionId;
+			const testPassed = client.currentTest.results.failed === 0;
+			client.end( function () {
+				account.updateJob(
+					process.env.SAUCE_USERNAME,
+					sessionId,
+					{
+						tags: [ 'QueryBuilder' ],
+						passed: testPassed,
+					},
+				);
+				done();
+			} );
+		}
+	},
+
 };