Run JS tests in Playwright Firefox alongside Chromium

AGENTS.md

@@ -38,9 +38,9 @@ that matters to the change.
 tests out of `commonTest`, which Android host tests inherit. Android host and
 device tests live in `androidHostTest` and `androidDeviceTest` respectively.
 
-Browser tests run real maps in Chrome. Set `CHROME_BIN` if Karma cannot find it.
-Do not pass `--tests` to the browser suite; it silently runs no tests and
-reports success.
+Browser tests run real maps in Playwright Chromium and Firefox. Set `CHROME_BIN`
+and `FIREFOX_BIN` if Karma cannot find them. Do not pass `--tests` to the
+browser suite; it silently runs no tests and reports success.
 
 Android SDK lookup is `local.properties`, then `ANDROID_HOME`, then
 `ANDROID_SDK_ROOT`. `mise run android-sdk-packages` installs required packages.

ci/jobs.json

@@ -1,7 +1,7 @@
 [
   { "job": "hygiene", "variant": "ubuntu", "tier": "draft" },
   { "job": "docs", "variant": "ubuntu", "tier": "draft" },
-  { "job": "js", "variant": "chromium", "tier": "draft" },
+  { "job": "js", "variant": "chromium-firefox", "tier": "draft" },
   { "job": "ios-device", "variant": "arm64", "tier": "draft" },
   { "job": "ios", "variant": "arm64", "tier": "ready" },
   {

ci/plan_test.py

@@ -63,7 +63,7 @@ def test_draft_keeps_compile_and_linux_runtime_coverage(self) -> None:
             {
                 "hygiene / ubuntu",
                 "docs / ubuntu",
-                "js / chromium",
+                "js / chromium-firefox",
                 "ios-device / arm64",
                 "android / 36",
                 "desktop / linux-x64",

lib/location/build.gradle.kts

@@ -24,7 +24,14 @@ kotlin {
 
   js {
     useEsModules()
-    browser { testTask { useKarma { useChromeHeadless() } } }
+    browser {
+      testTask {
+        useKarma {
+          useChromeHeadless()
+          useFirefoxHeadless()
+        }
+      }
+    }
   }
 
   applyDefaultHierarchyTemplate()

lib/location/karma.config.d/ci.js

@@ -1,10 +1,12 @@
 // The CI runner is an isolated VM, so its launcher disables Chromium's unavailable sandbox.
 if (process.env.CI && process.platform === "linux") {
-  config.customLaunchers = {
+  config.customLaunchers = Object.assign({}, config.customLaunchers, {
     ChromeHeadlessCI: {
       base: "ChromeHeadless",
       flags: ["--no-sandbox"],
     },
-  };
-  config.browsers = ["ChromeHeadlessCI"];
+  });
+  config.browsers = config.browsers.map((browser) =>
+    browser === "ChromeHeadless" ? "ChromeHeadlessCI" : browser,
+  );
 }

lib/maplibre-compose/build.gradle.kts

@@ -39,8 +39,15 @@ kotlin {
     // (CMP-4906).
     binaries.executable()
     // The browser platform composites MapLibre GL JS into the Compose scene, so its tests need a
-    // real WebGL context; karma.config.d supplies the flags that give one to a headless browser.
-    browser { testTask { useKarma { useChromeHeadless() } } }
+    // real WebGL context; karma.config.d supplies the launchers that give one to each browser.
+    browser {
+      testTask {
+        useKarma {
+          useChromeHeadless()
+          useFirefoxHeadless()
+        }
+      }
+    }
   }
 
   applyDefaultHierarchyTemplate()

lib/maplibre-compose/karma.config.d/webgl.js

@@ -1,7 +1,7 @@
 // MapLibre GL JS refuses to start without a WebGL context, and a headless browser on a machine
 // with no GPU has none unless it is told to rasterize in software.
 
-config.customLaunchers = {
+config.customLaunchers = Object.assign({}, config.customLaunchers, {
   ChromeHeadlessWebGL: {
     base: "ChromeHeadless",
     flags: [
@@ -11,5 +11,14 @@ config.customLaunchers = {
       "--no-sandbox",
     ],
   },
-};
-config.browsers = ["ChromeHeadlessWebGL"];
+  // Headless Firefox on Linux has no WebGL, so Linux runs a headed Firefox on the Xvfb display that
+  // test:js provides.
+  FirefoxWebGL: {
+    base: process.platform === "linux" ? "Firefox" : "FirefoxHeadless",
+    prefs: {
+      "webgl.force-enabled": true,
+      "webgl.disabled": false,
+    },
+  },
+});
+config.browsers = ["ChromeHeadlessWebGL", "FirefoxWebGL"];

lib/maplibre-compose/src/liveMapTest/kotlin/org/maplibre/compose/map/AntimeridianContractTest.kt

@@ -123,6 +123,8 @@ class AntimeridianContractTest {
         it.pumpUntil("the style's features to become queryable") {
           it.state.queryRenderedFeatures(offset = DpOffset(800.dp, 256.dp)).isNotEmpty()
         }
+        // The wrapped world copy renders from its own tile, which can land after the first hit.
+        it.settle()
 
         val hits =
           it.state.queryRenderedFeatures(offset = DpOffset(800.dp, 256.dp)).mapNotNull { hit ->

mise.toml

@@ -85,6 +85,7 @@ swiftformat = { version = "{{vars.swiftformat_version}}", backend = "github:nick
 [env]
 PLAYWRIGHT_BROWSERS_PATH = "{{ config_root }}/.cache/playwright"
 CHROME_BIN = { value = '''{{ exec(command="node -e \"console.log(require(process.argv[1]).chromium.executablePath())\" \"" ~ tools.playwright.path ~ "/node_modules/playwright\"") }}''', tools = true }
+FIREFOX_BIN = { value = '''{{ exec(command="node -e \"console.log(require(process.argv[1]).firefox.executablePath())\" \"" ~ tools.playwright.path ~ "/node_modules/playwright\"") }}''', tools = true }
 
 [hooks]
 postinstall = ["hk install --mise --quiet"]
@@ -101,6 +102,15 @@ run = "playwright install chromium --no-shell"
 [tasks."deps:chromium"]
 run = "mise deps install chromium"
 
+[deps.firefox]
+auto = false
+sources = ["mise.lock"]
+outputs = [".cache/playwright/firefox-*"]
+run = "playwright install firefox --no-shell"
+
+[tasks."deps:firefox"]
+run = "mise deps install firefox"
+
 [tasks.check]
 description = "Run every formatter and linter in report-only mode."
 # The type checker reads the types Astro generates.
@@ -198,9 +208,20 @@ udid="$(.mise/bin/boot-ios-simulator)"
 '''
 
 [tasks."test:js"]
-depends = ["deps:chromium"]
+depends = ["deps:chromium", "deps:firefox"]
 description = "Run the Kotlin/JS browser test suite."
-run = "./gradlew jsBrowserTest"
+run = '''
+echo "JS tests launch ${CHROME_BIN:?}"
+"$CHROME_BIN" --version
+echo "JS tests launch ${FIREFOX_BIN:?}"
+"$FIREFOX_BIN" --version
+if [[ "$(uname -s)" == Linux ]]; then
+  xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" \
+    env LIBGL_ALWAYS_SOFTWARE=1 ./gradlew jsBrowserTest
+else
+  ./gradlew jsBrowserTest
+fi
+'''
 
 [tasks."test:desktop"]
 description = "Run the desktop (JVM) test suite against a real Vulkan or Metal device."