Upgrade Visual testing

.gitignore

@@ -65,3 +65,9 @@ yarn.lock
 allure-results
 allure-report
 myAllureReport
+
+# For Chapter 11
+*storybook.log
+apps/
+**/__snapshots__/**/*.png
+**/.tmp/

solutions/chapter_11/package.json

@@ -1,25 +1,21 @@
 {
-  "name": "chapter11",
-  "version": "1.0.0",
-  "description": "Chapter 11 of the WebdriverIO workshop: Visual Regression Testing",
-  "main": "index.js",
-  "keywords": [],
-  "author": "Christian Bromann <[email protected]>",
-  "license": "MIT",
+  "name": "visual-demo",
   "type": "module",
-  "scripts": {
-    "test": "wdio wdio.local.conf.js",
-    "test:applitools": "wdio wdio.applitools.conf.js"
-  },
   "devDependencies": {
-    "@applitools/eyes-webdriverio": "^5.51.2",
-    "@wdio/allure-reporter": "^8.34.0",
-    "@wdio/applitools-service": "^7.3.0",
     "@wdio/cli": "^8.35.1",
     "@wdio/local-runner": "^8.35.1",
     "@wdio/mocha-framework": "^8.35.0",
     "@wdio/spec-reporter": "^8.32.4",
-    "allure-commandline": "^2.27.0",
-    "webdriverio": "^8.35.1"
+    "@wdio/visual-service": "^4.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.3"
+  },
+  "scripts": {
+    "test:desktop": "wdio run ./wdio.conf.ts --spec='test/specs/desktop.spec.ts'",
+    "test:desktop:layout": "ENABLE_LAYOUT_TESTING=true wdio run ./wdio.conf.ts --spec='test/specs/desktop.spec.ts'",
+    "test:storybook:local": "wdio ./wdio.conf.ts --storybook",
+    "test:storybook:external": "wdio ./wdio.conf.ts --storybook --url=https://govuk-react.github.io/govuk-react/ --numShards=10",
+    "test:storybook:external:skipped": "wdio ./wdio.conf.ts --storybook --url=https://govuk-react.github.io/govuk-react/ --numShards=10 --skipStories=\"/.*(loading-box|spinner).*/\"",
+    "test:mobile:android:app": "wdio run ./wdio.android.emulator.conf.ts --spec='test/specs/mobile.app.spec.ts'"
   }
-}
+}

solutions/chapter_11/test/specs/desktop.spec.ts

@@ -0,0 +1,21 @@
+import {$, browser, expect} from '@wdio/globals'
+
+describe('Guinea Pig Application', () => {
+  beforeEach(async () => {
+    await browser.setWindowSize(1200, 800)
+    await browser.url('http://guinea-pig.webdriver.io/image-compare.html')
+    await $('.hero__title-logo').waitForDisplayed()
+  });
+
+  it('should be able to create an element snapshot', async () => {
+    await expect($('.hero__title-logo')).toMatchElementSnapshot('logo', {hideElements: [await $('nav.navbar')]})
+  })
+
+  it('should be able to create a viewport snapshot', async () => {
+    await expect(browser).toMatchScreenSnapshot('viewport')
+  })
+
+  it('should be able to create fullpage snapshot', async () => {
+    await expect(browser).toMatchFullPageSnapshot('fullpage', {hideAfterFirstScroll: [await $('nav.navbar')]})
+  })
+})

solutions/chapter_11/test/specs/mobile.app.spec.ts

@@ -0,0 +1,32 @@
+import {$, browser, expect} from '@wdio/globals'
+
+describe('Mobile Application', () => {
+  beforeEach(async () => {
+    await relaunchApp()
+    await $('~Home-screen').waitForDisplayed()
+    await $('~Login').click()
+    await $('~button-LOGIN').waitForDisplayed()
+  })
+
+  it('should be able to create an element snapshot', async () => {
+    await expect($('~button-LOGIN')).toMatchElementSnapshot('login-button', {hideElements: [await $('nav.navbar')]})
+  })
+
+  it('should be able to create a device snapshot', async () => {
+    await expect(browser).toMatchScreenSnapshot('app-forms', {blockOutToolBar: true, blockOutStatusBar: true})
+  })
+})
+
+/**
+ * Simple function to relaunch the app
+ */
+async function relaunchApp() {
+  const PACKAGE_NAME = 'com.wdiodemoapp'
+  const BUNDLE_ID = 'org.reactjs.native.example.wdiodemoapp'
+  const appIdentifier = browser.isAndroid ? { 'appId': PACKAGE_NAME } : { 'bundleId': BUNDLE_ID }
+  const terminateCommand = 'mobile: terminateApp'
+  const launchCommand = `mobile: ${driver.isAndroid ? 'activateApp' : 'launchApp'}`
+
+  await browser.execute(terminateCommand, appIdentifier)
+  await browser.execute(launchCommand, appIdentifier)
+}

solutions/chapter_11/tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "moduleResolution": "node",
+        "module": "ESNext",
+        "target": "es2022",
+        "lib": [
+            "es2022",
+            "dom"
+        ],
+        "types": [
+            "node",
+            "@wdio/globals/types",
+            "expect-webdriverio",
+            "@wdio/mocha-framework",
+            "@wdio/visual-service"
+        ],
+        "skipLibCheck": true,
+        "noEmit": true,
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "test/**/*.ts",
+        "*.conf.ts"
+    ]
+}

solutions/chapter_11/wdio.android.emulator.conf.ts

@@ -0,0 +1,21 @@
+import type { Options } from '@wdio/types'
+import {join} from 'node:path';
+import {config as sharedConfig} from './wdio.conf.js';
+
+export const config: Options.Testrunner = {
+  ...sharedConfig,
+  capabilities: [
+    {
+      platformName: 'Android',
+      'appium:automationName': 'UIAutomator2',
+      // Change this to the name of your emulator
+      'appium:deviceName': 'Pixel_7_Pro_Android_14_API_34',
+      // Change this to the version of your emulator
+      'appium:platformVersion': '14.0',
+      // Change this to the path/name of your app
+      'appium:app': join(process.cwd(), './apps/android.wdio.native.app.v1.0.8.apk'),
+      'appium:newCommandTimeout': 240,
+    }
+  ],
+  port: 4723,
+};