Service Worker testing is not working

[amreladawy]

What is your Scenario?

My react app has a service worker. I am trying to test that the service worker was registered successfully using the following code.

import { ClientFunction } from 'testcafe';

const getScriptURL = ClientFunction(() => {
    return window.navigator.serviceWorker.getRegistration()
        .then(serviceWorker => serviceWorker?.active?.scriptURL);
});

fixture `My fixture`
    .page `http://localhost:3000/`;

test('My Test', async t => {
    const scriptURL = await getScriptURL();

    await t.expect(scriptURL).eql('http://localhost:3000/service-worker.js');
});

This is not working. The function getRegsitration() resolves an empty object.

What is the Current behavior?

Client functions does not return navigator object correctly.

What is the Expected behavior?

Client functions should return navigator object correctly.

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

https://twitter.com/

What is your TestCafe test code?

import { ClientFunction } from 'testcafe';

const getScriptURL = ClientFunction(() => {
    return window.navigator.serviceWorker.getRegistration()
        .then(serviceWorker => serviceWorker?.active?.scriptURL);
});

fixture `My fixture`
    .page `http://localhost:3000/`;

test('My Test', async t => {
    const scriptURL = await getScriptURL();

    await t.expect(scriptURL).eql('http://localhost:3000/service-worker.js');
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

TestCafe version

1.15.2

Node.js version

16.16.0

Command-line arguments

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

[felis2803]

Hi @amreladawy,

Thanks for the report. I reproduced this issue. Indeed, when I run the navigator object from TestCafe, it does not have ServiceWorker and some other fields. We'll look into this.

[felis2803]

@amreladawy, We can't figure out the exact cause of the problem in your application because we really need a runnable example to do this. However, in addition to https://twitter.com, we found that the ServiceWorker disappears from the navigator object on https://googlechrome.github.io/samples/service-worker/basic/index.html as well. We'll fix this issue and hope it's the same issue you're having. After the fix, it will be necessary to check the performance of your application. Stay tuned for updates on this issue.

[amreladawy]

Hi @felis2803, thanks for coming back to me on this. I am glad that you (the team) will be working on fixing this. Please let me know if there is anything I can help with.

[lehnerchristian]

Hi, I think I have a similar issue.

I think the main issue here is that the service-worker.js script cannot be loaded from the URL http://localhost:3000/service-worker.js but it should be loaded from http://localhost:<TestcafePort>/<TestcafeHash>/http://localhost:3000/service-worker.js.

So, probably we need to read the first part of the URL within the Testcafe test and inject it into the app and dynamically load the service worker from that full URL including the Testcafe generated part?

@felis2803 , can you confirm that this is the issue and if yes, give us a hint how we get the http://localhost:<TestcafePort>/<TestcafeHash>/ part from the URL?

[lehnerchristian]

Ok, at least I found the port1 and port2 options in the configuration to control the port. Now I would need to know a way how to control the random part in the path.

But nicer would be a way to have a getter to get the whole thing

[miherlosev]

Hello, @lehnerchristian

TestCafe uses the URL-rewritten proxy to control test execution. This proxy hides the service URL part from the DOM engine. Thus, the tested page thinks that it is opened regularly. So, you don't need to manually control any URLs. You encountered an issue with the Service Worker feature. The test will work correctly as soon as this issue is fixed. We will update this thread once we have any results.

[lehnerchristian]

Thank you for your reply and clarification, @miherlosev :+1:

And do you have any idea when this issue will be fixed? Is it already planned to be worked on?

Would be awesome to get it because we are trying to have a single way of mocking things in our test using MSW

[miherlosev]

We cannot say for sure when this issue will be fixed. We will update this thread once we have any news to share.

[Artem-Babich]

We will close this issue since it is fixed in the Native Automation mode. Please try the native automation mode in your tests. Feel free to reopen the issue if you need a fix for the other browsers or you cannot use Native Automation for some reason.