Worker with ES Modules throws JavaScript TypeError: Using ImportScripts inside a Module Worker is disallowed. (Firefox, Safari, Chrome --disable-native-automation)

[htho]

What is your Scenario?

I want to test a page that uses WebWorkers with real ES modules.

What is the Current behavior?

The page throws with:
TypeError: WorkerGlobalScope.importScripts: Using ImportScripts inside a Module Worker is disallowed.

What is the Expected behavior?

The page should not throw.

What is the public URL of the test page? (attach your complete example)

https://github.com/htho/testcafe-repro-module-worker -- see this repository

What is your TestCafe test code?

import { fixture, test, Selector } from "testcafe";

fixture("Worker")
	.page(`http://127.0.0.1:3000/index.html`)


test("works", async(t) => {
    await t.expect(Selector("#out").textContent).eql("");
    await t.click(Selector("#btn"))
    await t.expect(Selector("#out").textContent).eql("42");
});

Your complete configuration file

No response

Your complete test report

> npm run test

> test
> testcafe firefox test.tc.ts

 Running tests in:
 - Firefox 128.0 / Windows 10

 Worker
 × works

   1) A JavaScript error occurred on "http://127.0.0.1:3000/".
      Repeat test actions in the browser and check the console for errors.
      Enable the “skipJsErrors” option to ignore JavaScript errors during test execution. Learn more:
      "https://testcafe.io/documentation/404038/recipes/debugging/skip-javascript-errors"
      If the website only throws this error when you test it with TestCafe, please create a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

      JavaScript error details:
      TypeError: WorkerGlobalScope.importScripts: Using `ImportScripts` inside a Module Worker is disallowed.
          No stack trace available

      Browser: Firefox 128.0 / Windows 10

          4 |    .page(`http://127.0.0.1:3000/index.html`)
          5 |
          6 |
          7 |test("works", async(t) => {
          8 |    await t.expect(Selector("#out").textContent).eql("");
       >  9 |    await t.click(Selector("#btn"))
         10 |    await t.expect(Selector("#out").textContent).eql("42");
         11 |});

         at <anonymous> (C:\dev\github.com\htho\testcafe-repro-module-worker\test.tc.ts:9:13)
         at fulfilled (C:\dev\github.com\htho\testcafe-repro-module-worker\test.tc.ts:5:58)



 1/1 failed (1s)
PS C:\dev\github.com\htho\testcafe-repro-module-worker> 

Screenshots

No response

Steps to Reproduce

1. git clone https://github.com/htho/testcafe-repro-module-worker.git
2. cd testcafe-repro-module-worker
3. npm i
4. npm run serve
5. npm run test (in another terminal)

TestCafe version

3.6.2

Node.js version

v20.15.1

Command-line arguments

testcafe firefox test.tc.ts

Browser name(s) and version(s)

Firefox 128.0.3

Platform(s) and version(s)

Windows 10

Other

Needles to say that the page/worker does not use importScripts().
But it seems that TestCafe/Hammerhead adds importScripts() to the workers source.
This is also why it works with Chrome with native automation.
Chrome has been suppotring ES Modules in workers for a while now. Firefox just catched up.
There will soon be more people having this problem as soon as they create apps without an importScripts() fallback.

[github-actions]

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.