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[bot]]

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.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

[github-actions[bot]]

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.

[CommonGuy]

@PavelMor25 Can this be reopened? I'm facing the same issue

[aleks-pro]

Hello @CommonGuy ,

Could you please specify the browser and OS version that you are using to run TestCafe tests?

[CommonGuy]

@aleks-pro I'm using Microsoft Edge version 136.0.3240.76 on Windows 11 24H2.

I'm importing a WebWorker with { type: 'module' }. The WebWorker itself does not import anything external. However, testcafe injects code that uses importScripts, which is forbidden inside Module Workers.

[aleks-pro]

@CommonGuy , please try to reproduce the issue in Native Automation mode and share your results.

[CommonGuy]

@aleks-pro It seems to work with native automation, since testcafe/hammerhead do not inject these imports there. However, we need to run tests with Safari (and WebKit) and the tests fail there.

[htho]

@aleks-pro It seems to work with native automation, since testcafe/hammerhead do not inject these imports there. However, we need to run tests with Safari (and WebKit) and the tests fail there.

And Firefox

[aleks-pro]

However, we need to run tests with Safari (and WebKit)

And Firefox

It makes sense then. I will reopen the issue.

[CommonGuy]

Not sure how difficult this fix is to implement for testcafe/hammerhead...

For me, a workaround via a testcafe setting that would switch between injecting importScripts and import in JavaScript files would be enough