@enact/ui-test-utils 2.0.0-alpha.1 → 2.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-rc.1",
   "description": "UI Testing for the Enact framework",
   "repository": "https://github.com/enactjs/ui-test-utils",
   "main": "index.js",
@@ -20,32 +20,33 @@
     "access": "public"
   },
   "dependencies": {
-    "@wdio/cli": "^7.36.0",
-    "@wdio/dot-reporter": "^7.33.0",
-    "@wdio/local-runner": "^7.36.0",
-    "@wdio/mocha-framework": "^7.33.0",
-    "@wdio/selenium-standalone-service": "^7.33.0",
-    "@wdio/spec-reporter": "^7.33.0",
-    "@wdio/static-server-service": "^7.33.0",
-    "chalk": "^5.3.0",
+    "@wdio/cli": "^9.10.0",
+    "@wdio/dot-reporter": "^9.9.0",
+    "@wdio/local-runner": "9.2.1",
+    "@wdio/mocha-framework": "^9.9.0",
+    "@wdio/spec-reporter": "^9.9.0",
+    "@wdio/static-server-service": "^9.9.0",
+    "@wdio/visual-service": "^6.3.2",
+    "chalk": "^5.4.1",
     "cross-spawn": "^7.0.6",
-    "expect-webdriverio": "^3.6.0",
-    "fs-extra": "^11.2.0",
+    "expect-webdriverio": "^5.1.0",
+    "fs-extra": "^11.3.0",
     "minimist": "^1.2.8",
     "query-string": "^7.1.3",
     "ramda": "^0.30.1",
     "readdirp": "^3.6.0",
     "wdio-docker-service": "^3.2.1",
-    "wdio-image-comparison-service": "^5.0.3",
-    "webdriverio": "^7.36.0"
+    "wdio-selenium-standalone-service": "^0.0.12",
+    "webdriverio": "^9.10.0"
   },
   "devDependencies": {
-    "eslint": "^9.20.0",
-    "eslint-config-enact": "^5.0.0-alpha.5",
+    "eslint": "^9.21.0",
+    "eslint-config-enact": "^5.0.0-rc.1",
     "globals": "^15.14.0"
   },
   "overrides": {
     "cross-spawn": "$cross-spawn",
+    "express": "^4.21.2",
     "ws": "^8.18.0"
   }
 }

package/screenshot/TestChooser.js

@@ -1,6 +1,5 @@
 import css from './TestChooser.module.css';
 
-// eslint-disable-next-line enact/prop-types
 const TestChooser = ({metadata}) => {
 	const tests = Object.keys(metadata);
 

package/screenshot/utils/confHelpers.js

@@ -67,6 +67,14 @@ function beforeTest (testData) {
 	if (testData && testData.title && testData.title.indexOf('/') > 0) {
 		const filename = generateReferenceName({test: testData});
 		testData.ctx.isNewScreenshot = !fs.existsSync(filename);
+
+		// if there are no reference screenshots, we must create the folder before running the tests.
+		const specsPath = testData.title.split('~/');
+		specsPath.pop();
+		const referenceSpecsPath = path.join('tests/screenshot/dist/screenshots/reference', ...specsPath).replace(/ /g, '_');
+		if (testData.ctx.isNewScreenshot) {
+			fs.mkdirSync(referenceSpecsPath, {recursive: true});
+		}
 	}
 }
 

package/screenshot/wdio.conf.js

@@ -4,12 +4,13 @@ const {afterTest, baselineFolder, beforeTest, onComplete, onPrepare, screenshotF
 exports.config = configure({
 	base: 'screenshot',
 	services: [[
-		'image-comparison',
+		'visual',
 		{
 			baselineFolder: baselineFolder,
 			formatImageName: '{tag}',
 			screenshotPath: screenshotFolder,
-			autoSaveBaseline: true
+			autoSaveBaseline: true,
+			waitForFontsLoaded: true
 		}
 	]],
 	//

package/screenshot/wdio.tv.conf.js

@@ -30,13 +30,18 @@ exports.config = Object.assign(
 			// maxInstances can get overwritten per capability. So if you have an in-house Selenium
 			// grid with only 5 firefox instances available you can make sure that not more than
 			// 5 instances get started at a time.
-			maxInstances: 1,
+			'wdio:maxInstances': 1,
 			//
 			browserName: 'chrome',
+			/* WebdriverIO v8.14 and above downloads and uses the latest Chrome version when running tests.
+			We need to specify a browser version that match chromedriver version running in CI/CD environment to
+			ensure testing accuracy.
+			TODO: Update this version when chromedriver version in CI/CD is updated */
+			browserVersion: '120.0.6099.109',
 			'goog:chromeOptions': {
-				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
-			}
+			},
+			'wdio:enforceWebDriverClassic': true
 		}],
 
 		//

package/ui/wdio.conf.js

@@ -31,7 +31,7 @@ exports.config = configure({
 	 * @param {Number} result.duration duration of test
 	 * @param {Boolean} result.passed true if test has passed, otherwise false
 	 */
-	afterTest: function (testCase, _context, {duration, passed}) {
+	afterTest: async function (testCase, _context, {duration, passed}) {
 		if (duration > 2000) {
 			console.log(chalk.yellow(`Long running test case: ${testCase.title}: ${duration}ms`));
 		}
@@ -48,7 +48,7 @@ exports.config = configure({
 			fs.mkdirSync(this.screenshotPath, {recursive: true});	// May only work recursively on Node 10.12+
 		}
 		// save screenshot
-		browser.saveScreenshot(filePath);
+		await browser.saveScreenshot(filePath);
 		console.log('\n\tScreenshot location:', filePath, '\n');
 	},
 	afterSuite: function (_suite) {

package/ui/wdio.tv.conf.js

@@ -6,13 +6,21 @@ exports.config = Object.assign(
 	config,
 	{
 		capabilities: [{
-			maxInstances: 1,
-
+			// maxInstances can get overwritten per capability. So if you have an in-house Selenium
+			// grid with only 5 firefox instances available you can make sure that not more than
+			// 5 instances get started at a time.
+			'wdio:maxInstances': 1,
+			//
 			browserName: 'chrome',
+			/* WebdriverIO v8.14 and above downloads and uses the latest Chrome version when running tests.
+			We need to specify a browser version that match chromedriver version running in CI/CD environment to
+			ensure testing accuracy.
+			TODO: Update this version when chromedriver version in CI/CD is updated */
+			browserVersion: '120.0.6099.109',
 			'goog:chromeOptions': {
-				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
-			}
+			},
+			'wdio:enforceWebDriverClassic': true
 		}],
 
 		baseUrl: `http://${ipAddress()}:4567`,

package/utils/runTest.js

@@ -66,7 +66,8 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 								expect(await browser.checkScreen(screenshotFileName, {
 									disableCSSAnimation: true,
 									ignoreNothing: true,
-									rawMisMatchPercentage: true
+									rawMisMatchPercentage: true,
+									waitForFontsLoaded: true
 								})).toBe(0);
 							});
 						});