Update WDIO to v8 to handle automatic chromedriver installs

package.json

@@ -49,7 +49,8 @@
   },
   "resolutions": {
     "webpack": "4.46.0",
-    "ua-parser-js": "1.0.35"
+    "ua-parser-js": "1.0.35",
+    "typesafe-i18n": "5.16.3"
   },
   "devDependencies": {
     "@babel/cli": "7.14.8",
@@ -66,20 +67,19 @@
     "@justeat/fozzie": "11.x",
     "@justeat/pie-design-tokens": "5.0.0",
     "@justeat/stylelint-config-fozzie": "2.2.0",
-    "@percy/cli": "1.0.5",
-    "@percy/webdriverio": "2.0.1",
-    "@vercel/ncc": "0.31.1",
+    "@percy/cli": "1.27.4",
+    "@percy/webdriverio": "3.0.1",
     "@vue/babel-preset-app": "4.5.16",
     "@vue/cli-plugin-babel": "4.5.16",
     "@vue/cli-plugin-unit-jest": "4.5.16",
     "@vue/cli-service": "4.5.16",
     "@vue/eslint-config-standard": "4.0.0",
     "@vue/test-utils": "1.3.0",
-    "@wdio/allure-reporter": "7.19.7",
-    "@wdio/cli": "7.19.7",
-    "@wdio/local-runner": "7.19.7",
-    "@wdio/mocha-framework": "7.19.7",
-    "@wdio/spec-reporter": "7.19.7",
+    "@wdio/allure-reporter": "8.21.0",
+    "@wdio/cli": "8.22.1",
+    "@wdio/local-runner": "8.22.1",
+    "@wdio/mocha-framework": "8.22.0",
+    "@wdio/spec-reporter": "8.21.0",
     "allure-commandline": "2.17.2",
     "axe-core": "4.3.5",
     "axe-reports": "1.1.11",
@@ -90,7 +90,7 @@
     "babel-loader": "8.1.0",
     "bundlewatch": "0.3.1",
     "chromedriver": "115.0.0",
-    "core-js": "3.26.1",
+    "core-js": "3.33.2",
     "cross-env": "7.0.2",
     "css-loader": "1.0.1",
     "danger": "11.2.8",
@@ -127,8 +127,8 @@
     "vue-template-compiler": "2.6.10",
     "vuex": "3.5.1",
     "wdio-chromedriver-service": "8.0.0",
-    "wdio-video-reporter": "3.2.1",
-    "webdriverio": "7.19.7"
+    "wdio-video-reporter": "4.0.5",
+    "webdriverio": "8.22.1"
   },
   "bugs": {
     "url": "https://github.com/justeat/fozzie-components/issues"

packages/components/organisms/f-cookie-banner/package.json

@@ -59,6 +59,7 @@
   "devDependencies": {
     "@justeat/f-button": "4.x",
     "@justeat/f-link": "3.x",
+    "core-js": "3.33.2",
     "@justeat/f-mega-modal": "7.x",
     "@justeat/f-vue-icons": "3.x",
     "@justeat/f-wdio-utils": "1.x",

test/configuration/ci.config.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const { testType } = require('./shared.config');
 
 const configuration = {
@@ -15,9 +14,7 @@ const configuration = {
     availableServices: {
         chromedriver: {
             args: ['--whitelisted-ips=127.0.0.1', '--disable-dev-shm-usage'],
-            chromedriverCustomPath: path.join(process.env.CHROMEWEBDRIVER, 'chromedriver'),
-            headless: true,
-            path: '/'
+            headless: true
         },
         percy: {
             viewports: {

test/configuration/local.config.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const { testType } = require('./shared.config');
 
 const configuration = {
@@ -20,7 +21,6 @@ const configuration = {
         },
         chromedriver: {
             headless: false,
-            path: '/',
             args: []
         }
     },

test/configuration/shared.config.js

@@ -1,29 +1,31 @@
 const TEST_TYPE = process.env.TEST_TYPE.toLowerCase();
+const path = require('path');
 
 const { SPEC_FILE, VS_DEBUGGER } = process.env;
+const currentDirectory = process.cwd();
 
 exports.testType = {
     ...(TEST_TYPE === 'component' ? {
         name: 'component',
         services: ['chromedriver'],
         specs: VS_DEBUGGER ? [SPEC_FILE] : [
-            'test/component/*.component.spec.js'
+            [path.join(process.cwd(), './test/component/*.component.spec.js')]
         ]
     } : {}),
     ...(TEST_TYPE === 'a11y' ? {
         name: 'accessibility',
         services: ['chromedriver', 'percy'],
         specs: VS_DEBUGGER ? [SPEC_FILE] : [
-            'test/accessibility/axe-accessibility.spec.js'
+            [path.join(currentDirectory, 'test/accessibility/axe-accessibility.spec.js')]
         ],
         violationCSVDirectory: `${global.baseDir}/test/results/axe-violations`
     } : {}),
     ...(TEST_TYPE === 'visual' ? {
         name: 'visual',
         services: ['chromedriver', 'percy'],
         specs: [
-            'test/visual/*.visual.*.spec.js',
-            'test/visual/*.visual.spec.js'
+            [path.join(currentDirectory, '/test/visual/*.visual.*.spec.js'),
+                path.join(currentDirectory, './test/visual/*.visual.spec.js')]
         ]
     } : {})
 };

wdio-chrome.conf.js

@@ -8,12 +8,6 @@ exports.config = merge(sharedConf.config, {
     // =====================
     // Server Configurations
     // =====================
-    path: configuration.availableServices.chromedriver.path,
-    // Test runner services
-    // Services take over a specific job you don't want to take care of. They enhance
-    // your test setup with almost no effort. Unlike plugins, they don't add new
-    // commands. Instead, they hook themselves up into the test process.
-    services: ['chromedriver'],
     // ============
     // Capabilities
     // ============

wdio-shared.conf.js

@@ -21,7 +21,6 @@ exports.config = {
     // See the full list at http://mochajs.org/
     mochaOpts: {
         // Babel setup
-        require: ['@babel/register'],
         ui: 'bdd',
         timeout: configuration.mochaOpts.timeout
     },
@@ -42,7 +41,7 @@ exports.config = {
     connectionRetryCount: configuration.connectionRetryTimeout,
     // Framework you want to run your specs with.
     // The following are supported: Mocha, Jasmine, and Cucumber
-    // see also: https://webdriver.io/docs/frameworks.html
+    // see also: https://webdriver.io/docs/frameworks tml
     //
     // Make sure you have the wdio adapter package for the specific framework installed
     // before running any tests.