Build: Run GitHub Action browser tests on Puppeteer WebKit

mgol · mgol · commit e9b07eb470ad · 2023-01-03T19:07:14.000+01:00
So far, we've been running browser tests on GitHub Actions in Chrome
and Firefox. Regular Safari is not available in GitHub Actions but
Puppeteer WebKit comes close to a dev version of Safari.

With this change, our GitHub CI will invoke tests on all actively
developed browser engines on all PRs.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -16,27 +16,27 @@ jobs:
         NODE_VERSION: [10.x, 14.x, 16.x, 18.x, 19.x]
         NPM_SCRIPT: ["test:browserless"]
         include:
-          - NAME: "Browser tests: full build, Chrome & Firefox stable"
+          - NAME: "Browser tests: full build, Chrome, Firefox & WebKit"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:browser"
-            BROWSERS: "ChromeHeadless,FirefoxHeadless"
-          - NAME: "Browser tests: slim build, Chrome stable"
+            BROWSERS: "ChromeHeadless,FirefoxHeadless,WebkitHeadless"
+          - NAME: "Browser tests: slim build, Chrome"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:slim"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: no-deprecated build, Chrome stable"
+          - NAME: "Browser tests: no-deprecated build, Chrome"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:no-deprecated"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: selector-native build, Chrome stable"
+          - NAME: "Browser tests: selector-native build, Chrome"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:selector-native"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: ES modules build, Chrome stable"
+          - NAME: "Browser tests: ES modules build, Chrome"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:esmodules"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: AMD build, Chrome stable"
+          - NAME: "Browser tests: AMD build, Chrome"
             NODE_VERSION: "16.x"
             NPM_SCRIPT: "test:amd"
             BROWSERS: "ChromeHeadless"
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -21,11 +21,14 @@ module.exports = function( grunt ) {
 
 	var fs = require( "fs" ),
 		gzip = require( "gzip-js" ),
+		playwright = require( "playwright" ),
 		oldNode = /^v10\./.test( process.version ),
 		nodeV17OrNewer = !/^v1[0246]\./.test( process.version ),
 		isCi = process.env.GITHUB_ACTION,
 		ciBrowsers = process.env.BROWSERS && process.env.BROWSERS.split( "," );
 
+	process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();
+
 	if ( !grunt.option( "filename" ) ) {
 		grunt.option( "filename", "jquery.js" );
 	}
@@ -242,7 +245,8 @@ module.exports = function( grunt ) {
 				singleRun: true
 			},
 			main: {
-				browsers: isCi && ciBrowsers || [ "ChromeHeadless", "FirefoxHeadless" ]
+				browsers: isCi && ciBrowsers ||
+					[ "ChromeHeadless", "FirefoxHeadless", "WebkitHeadless" ]
 			},
 			esmodules: {
 				browsers: isCi && ciBrowsers || [ "ChromeHeadless" ],
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "url": "https://github.com/jquery/jquery/issues"
   },
   "license": "MIT",
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "7.10.5",
     "@babel/plugin-transform-for-of": "7.10.4",
@@ -47,15 +46,17 @@
     "gzip-js": "0.3.2",
     "husky": "4.2.5",
     "jsdom": "19.0.0",
-    "karma": "^6.3.17",
+    "karma": "6.4.1",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "3.1.1",
     "karma-firefox-launcher": "2.1.2",
     "karma-ie-launcher": "1.0.0",
     "karma-jsdom-launcher": "12.0.0",
     "karma-qunit": "4.1.2",
+    "karma-webkit-launcher": "1.1.0",
     "load-grunt-tasks": "5.1.0",
     "native-promise-only": "0.8.1",
+    "playwright": "1.29.1",
     "promises-aplus-tests": "2.1.2",
     "q": "1.5.1",
     "qunit": "2.10.1",
diff --git a/test/unit/ajax.js b/test/unit/ajax.js
@@ -2270,7 +2270,7 @@ if ( typeof window.ArrayBuffer === "undefined" || typeof new XMLHttpRequest().re
 	// beforeunload, unload, pagehide, and visibilitychange event handlers.
 	// See https://bugs.chromium.org/p/chromium/issues/detail?id=952452
 	// Safari 13 did similar changes. The below check will catch them both.
-	if ( !/safari/i.test( navigator.userAgent ) ) {
+	if ( !/webkit/i.test( navigator.userAgent ) ) {
 		testIframe(
 			"trac-14379 - jQuery.ajax() on unload",
 			"ajax/onunload.html",
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1757,7 +1757,7 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
 	var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
 		$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
 			.appendTo( "#qunit-fixture" ),
-		webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
+		webkitOrBlink = /\webkit\b/i.test( navigator.userAgent ),
 		expected = 20;
 
 	if ( webkitOrBlink ) {
diff --git a/test/unit/selector.js b/test/unit/selector.js
@@ -1,7 +1,10 @@
 QUnit.module( "selector", {
 	beforeEach: function() {
-		this.safari = /\bsafari\b/i.test( navigator.userAgent ) &&
-			!/\b(?:headless)?chrome\b/i.test( navigator.userAgent );
+
+		// Puppeteer WebKit doesn't expose `Safari` in its user agent string.
+		// However, this particular version of WebKit is only present in modern
+		// WebKit UAs (Safari 13+) as Chromium is locked to an older version.
+		this.safari = /\bapplewebkit\/605\.1\.15\b/i.test( navigator.userAgent );
 	},
 	afterEach: moduleTeardown
 } );
diff --git a/test/unit/support.js b/test/unit/support.js
@@ -70,6 +70,10 @@ testIframe(
 				cssSupportsSelector: false,
 				reliableTrDimensions: true
 			},
+			webkit: {
+				cssSupportsSelector: true,
+				reliableTrDimensions: true
+			},
 			firefox_102: {
 				cssSupportsSelector: false,
 				reliableTrDimensions: false
@@ -97,14 +101,20 @@ testIframe(
 
 		// Catches Edge, Chrome on Android & Opera as well.
 		expected = expectedMap.chrome;
-	} else if ( /\b\d+(\.\d+)+ safari/i.test( userAgent ) ) {
-		expected = expectedMap.safari;
 	} else if ( /firefox\/102\./i.test( userAgent ) ) {
 		expected = expectedMap.firefox_102;
 	} else if ( /firefox/i.test( userAgent ) ) {
 		expected = expectedMap.firefox;
 	} else if ( /(?:iphone|ipad);.*(?:iphone)? os \d+_/i.test( userAgent ) ) {
 		expected = expectedMap.ios;
+	} else if ( /\b\d+(\.\d+)+ safari/i.test( userAgent ) ) {
+		expected = expectedMap.safari;
+
+	// Puppeteer WebKit doesn't expose `Safari` in its user agent string.
+	// However, this particular version of WebKit is only present in modern
+	// WebKit UAs (Safari 13+) as Chromium is locked to an older version.
+	} else if ( /\bapplewebkit\/605\.1\.15\b/i.test( userAgent ) ) {
+		expected = expectedMap.webkit;
 	}
 
 	QUnit.test( "Verify that support tests resolve as expected per browser", function( assert ) {
