Testcafe crashes with a js error when testing an app with a web worker implemented as a module

What is your Scenario?

Testcafe should work without crashes when testing an app which uses a web worker as a module. A simplest example to that would be creating a worker (of module type) in the application’s main module. See steps below for more details.

What is the Current behavior?

Testcafe crashes with the following JavaScript error:

1) A JavaScript error occurred on "http://localhost:3000/".
      Repeat test actions in the browser and check the console for errors.
      To ignore client-side JavaScript errors, enable the "--skip-js-errors" CLI option, or set
      the "skipJsErrors" configuration file property to "true".
      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:
      Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Module
      scripts don't support importScripts().
          No stack trace available

What is the Expected behavior?

A test comes up green, and TestCafe doesn’t crash

What is your public website URL? (or attach your complete example)

testcafe_module_worker_issue-1.0.0.zip

What is your TestCafe test code?

import {Selector} from 'testcafe';

fixture('Test')
.beforeEach(t => t.navigateTo('http://localhost:3000/'));

test('module web worker should be supported', async t => {
  const text = await Selector('body p').textContent;
  await t.expect(text).eql('Some content which is irrelevant for the purpose of this demo');
});

Your complete configuration file

No configuration file has been used in the attached demo.

Your complete test report

Running tests in:

• Chrome 97.0.4692.99 / macOS 10.15.7

Test ✖ module web worker should be supported

1. A JavaScript error occurred on “http://localhost:3000/”. Repeat test actions in the browser and check the console for errors. To ignore client-side JavaScript errors, enable the “–skip-js-errors” CLI option, or set the “skipJsErrors” configuration file property to “true”. 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: Uncaught TypeError: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: Module scripts don’t support importScripts().     No stack trace available

   Browser: Chrome 97.0.4692.99 / macOS 10.15.7

1/1 failed (0s)

Screenshots

No response

Steps to Reproduce

1. Unzip the attached demo (testcafe_module_worker_issue-1.0.0.tgz)
2. Install the packages (npm i)
3. Run a web server (npm run start-server)
4. Run a sample e2e test (npm run e2e)

TestCafe version

1.18.2

Node.js version

v14.16.1

Command-line arguments

testcafe chrome main.ts

Browser name(s) and version(s)

Chrome 97.0.4692.99

Platform(s) and version(s)

macOS 12.1 (21C52)

Other

No response

[AlexKamaev]

Thank you for sharing the example with us. I was able to reproduce the issue. Please follow this ticket to track our progress.

[val1984]

I had the same issue with an app using a webworker with Vite.js. The working solution is as follows:

import MyWorker from './Workers/index.js?worker&inline';
const worker = new MyWorker({ type: 'classic' });

The worker wasn’t working with testcafe until &inline was added to the import and the worker is not imported as a module nor as a different file as a result but it works.