Build: Run GitHub Action browser tests on Playwright WebKit

So far, we've been running browser tests on GitHub Actions in Chrome and Firefox. Regular Safari is not available in GitHub Actions but Playwright WebKit comes close to a dev version of Safari. With this change, our GitHub CI & local test runs will invoke tests on all actively developed browser engines on all PRs. Also, our GitHub Actions browser tests are now running on Node.js 18. Detection of the Playwright WebKit browser in support unit tests is done by checking if the `test_browser` query parameter is set to `"Playwright"`; this is a `karma-webkit-launcher` feature. Detecting that browser via user agent as we normally do is hard as the UA on Linux is very similar to a real Safari one but it actually uses a newer version of the engine. In addition, we now allow to pass custom browsers when one needs it; e.g., to run the tests in all three engines on Linux/macOS, run: ``` grunt && BROWSERS=ChromeHeadless,FirefoxHeadless,WebkitHeadless grunt karma:main ``` Closes gh-5190 (cherry picked from commit b02a257)
jquery · Jan 23, 2023 · da7057e · da7057e
1 parent 6b2abbd
commit da7057e
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 35 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -16,28 +16,28 @@ 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"
-            NODE_VERSION: "16.x"
+          - NAME: "Browser tests: full build, Chrome, Firefox & WebKit"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:browser"
-            BROWSERS: "ChromeHeadless,FirefoxHeadless"
-          - NAME: "Browser tests: slim build, Chrome stable"
-            NODE_VERSION: "16.x"
+            BROWSERS: "ChromeHeadless,FirefoxHeadless,WebkitHeadless"
+          - NAME: "Browser tests: slim build, Chrome"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:slim"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: no-deprecated build, Chrome stable"
-            NODE_VERSION: "16.x"
+          - NAME: "Browser tests: no-deprecated build, Chrome"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:no-deprecated"
             BROWSERS: "ChromeHeadless"
-          - NAME: "Browser tests: selector-native build, Chrome stable"
-            NODE_VERSION: "16.x"
+          - NAME: "Browser tests: selector-native build, Chrome"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:selector-native"
             BROWSERS: "ChromeHeadless"
              - NAME: "Browser tests: AMD build, Chrome stable"
-            NODE_VERSION: "16.x"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:amd"
             BROWSERS: "ChromeHeadless"
           - NAME: "Browser tests: full build, Firefox ESR"
-            NODE_VERSION: "16.x"
+            NODE_VERSION: "18.x"
             NPM_SCRIPT: "test:browser"
             BROWSERS: "FirefoxHeadless"
     steps:
@@ -67,6 +67,10 @@ jobs:
       run: |
         npm install
 
+    - name: Install Playwright dependencies
+      run: npx playwright-webkit install-deps
+      if: "matrix.NPM_SCRIPT == 'test:browser'"
+
     - name: Run tests
       env:
         BROWSERS: ${{ matrix.BROWSERS }}

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -2,8 +2,8 @@
 
 module.exports = function( grunt ) {
 	function readOptionalJSON( filepath ) {
-		var stripJSONComments = require( "strip-json-comments" ),
-			data = {};
+		const stripJSONComments = require( "strip-json-comments" );
+		let data = {};
 		try {
 			data = JSON.parse( stripJSONComments(
 				fs.readFileSync( filepath, { encoding: "utf8" } )
@@ -12,19 +12,23 @@ module.exports = function( grunt ) {
 		return data;
 	}
 
-	// Support: Node.js <12
-	// Skip running tasks that dropped support for Node.js 10
+	const fs = require( "fs" );
+	const gzip = require( "gzip-js" );
+	const nodeV14OrNewer = !/^v1[0-3]\./.test( process.version );
+	const nodeV17OrNewer = !/^v1[0-6]\./.test( process.version );
+	const customBrowsers = process.env.BROWSERS && process.env.BROWSERS.split( "," );
+
+	// Support: Node.js <14
+	// Skip running tasks that dropped support for Node.js 10 or 12
 	// in this Node version.
 	function runIfNewNode( task ) {
-		return oldNode ? "print_old_node_message:" + task : task;
+		return nodeV14OrNewer ? task : "print_old_node_message:" + task;
 	}
 
-	var fs = require( "fs" ),
-		gzip = require( "gzip-js" ),
-		oldNode = /^v10\./.test( process.version ),
-		nodeV17OrNewer = !/^v1[0246]\./.test( process.version ),
-		isCi = process.env.GITHUB_ACTION,
-		ciBrowsers = process.env.BROWSERS && process.env.BROWSERS.split( "," );
+	if ( nodeV14OrNewer ) {
+		const playwright = require( "playwright-webkit" );
+		process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();
+	}
 
 	if ( !grunt.option( "filename" ) ) {
 		grunt.option( "filename", "jquery.js" );
@@ -228,10 +232,11 @@ module.exports = function( grunt ) {
 				singleRun: true
 			},
 			main: {
-				browsers: isCi && ciBrowsers || [ "ChromeHeadless", "FirefoxHeadless" ]
+				browsers: customBrowsers ||
+					[ "ChromeHeadless", "FirefoxHeadless", "WebkitHeadless" ]
 			},
 			amd: {
-				browsers: isCi && ciBrowsers || [ "ChromeHeadless" ],
+				browsers: customBrowsers || [ "ChromeHeadless" ],
 				options: {
 					client: {
 						qunit: {
@@ -333,7 +338,9 @@ module.exports = function( grunt ) {
 	} );
 
 	// Load grunt tasks from NPM packages
-	require( "load-grunt-tasks" )( grunt );
+	require( "load-grunt-tasks" )( grunt, {
+		pattern: nodeV14OrNewer ? [ "grunt-*" ] : [ "grunt-*", "!grunt-eslint" ]
+	} );
 
 	// Integrate jQuery specific tasks
 	grunt.loadTasks( "build/tasks" );

diff --git a/package.json b/package.json
@@ -45,15 +45,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": "2.1.0",
     "load-grunt-tasks": "5.1.0",
     "native-promise-only": "0.8.1",
+    "playwright-webkit": "1.29.2",
     "promises-aplus-tests": "2.1.2",
     "q": "1.5.1",
     "qunit": "2.9.2",

diff --git a/test/unit/ajax.js b/test/unit/ajax.js
@@ -2201,7 +2201,7 @@ if ( typeof window.ArrayBuffer === "undefined" || typeof new XMLHttpRequest().re
 	// Safari 13 did similar changes. The below check will catch them both.
 	// Edge Legacy fakes Chrome which fakes Safari in their user agents so we need
 	// to exclude Edge specifically here so that the test continues to run there.
-	if ( !/safari/i.test( navigator.userAgent ) || /edge\//i.test( navigator.userAgent ) ) {
+	if ( !/webkit/i.test( navigator.userAgent ) || /edge\//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
@@ -1773,11 +1773,11 @@ QUnit.test( "Do not throw on frame elements from css method (trac-15098)", funct
 			"</style>"
 		);
 
-		var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
-			$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
-				.appendTo( "#qunit-fixture" ),
-			webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
-			expected = 20;
+	var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
+		$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
+			.appendTo( "#qunit-fixture" ),
+		webkitOrBlink = /\webkit\b/i.test( navigator.userAgent ) && !/edge\//i.test( navigator.userAgent ),
+		expected = 20;
 
 		if ( webkitOrBlink ) {
 			expected -= 2;

diff --git a/test/unit/selector.js b/test/unit/selector.js
@@ -1,7 +1,14 @@
 QUnit.module( "selector", {
 	beforeEach: function() {
-		this.safari = /\bsafari\b/i.test( navigator.userAgent ) &&
-			!/\b(?:headless)?chrome\b/i.test( navigator.userAgent );
+
+		// Playwright WebKit on macOS doesn't expose `Safari` in its user agent
+		// string; use the "AppleWebKit" token. This token is also present
+		// in the Chromium UA, but it is locked to an older version there.
+		// Modern WebKit (Safari 13+) locks it to `605.1.15`.
+		// Since the `3.x` branch is also tested on older WebKit UAs, we
+		// need the `Safari` check as well.
+		this.safari = /\bapplewebkit\/605\.1\.15\b/i.test( navigator.userAgent ) ||
+			/\bsafari\b/i.test( navigator.userAgent );
 	},
 	afterEach: moduleTeardown
 } );

diff --git a/test/unit/support.js b/test/unit/support.js
@@ -183,6 +183,31 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
+			webkit: {
+				ajax: true,
+				boxSizingReliable: true,
+				checkClone: true,
+				checkOn: true,
+				clearCloneStyle: true,
+				cssSupportsSelector: true,
+				cors: true,
+				createHTMLDocument: true,
+				disconnectedMatch: true,
+				focusin: false,
+				getById: true,
+				noCloneChecked: true,
+				option: true,
+				optSelected: true,
+				pixelBoxStyles: true,
+				pixelPosition: true,
+				radioValue: true,
+				reliableMarginLeft: true,
+				reliableTrDimensions: true,
+				scope: true,
+				scrollboxSize: true,
+				sortDetached: true,
+				sortStable: true
+			},
 			safari_9_10: {
 				ajax: true,
 				boxSizingReliable: true,
@@ -459,6 +484,18 @@ testIframe(
 		expected = expectedMap.ios_7;
 	} else if ( /(?:iphone|ipad);.*(?:iphone)? os \d+_/i.test( userAgent ) ) {
 		expected = expectedMap.ios;
+	} else if ( typeof URLSearchParams !== "undefined" &&
+
+		// `karma-webkit-launcher` adds `test_browser=Playwright` to the query string.
+		// The normal way of using user agent to detect the browser won't help
+		// as on macOS Playwright doesn't specify the `Safari` token but on Linux
+		// it does.
+		// See https://github.com/google/karma-webkit-launcher#detected-if-safari-or-playwright-is-used
+		new URLSearchParams( document.referrer || window.location.search ).get(
+			"test_browser"
+		) === "Playwright"
+	) {
+		expected = expectedMap.webkit;
 	} else if ( /\b\d+(\.\d+)+ safari/i.test( userAgent ) ) {
 		expected = expectedMap.safari;
 	}
@@ -491,7 +528,8 @@ testIframe(
 			if ( includesModule( "ajax" ) || i !== "ajax" && i !== "cors" ) {
 				assert.equal( computedSupport[ i ], expected[ i ],
 					"jQuery.support['" + i + "']: " + computedSupport[ i ] +
-						", expected['" + i + "']: " + expected[ i ] );
+						", expected['" + i + "']: " + expected[ i ] +
+						";\nUser Agent: " + navigator.userAgent );
 			} else {
 				assert.ok( true, "no ajax; skipping jQuery.support['" + i + "']" );
 			}