Tests are not working for app with service worker used for intercepting requests

[radk0s]

What is your Scenario?

I'm using @axa-fr/oidc-client authentication package. Library offers Service Worker to store auth data and intercepts http requests to inject access tokens which is more secure than sessionStorage . We have e2e tests written in Testcafe which stopped working after switching to SW (going back to sessionStorage is not an option for us).

What is the Current behavior?

Test runs with nativeAutomation enabled stopped working at all. There is only blank page displayed without any errors in console - test fails on first selector timeout.

With nativeAutomation disabled is a bit better. Tests are able open initial page, successfully login but fails on going back to the app. I did some investigation and looks like override for fetch event in hammerhead src/client/worker/fetch-event.ts#L93 is cancelling the original request. I noticed that for some requests Referrer Policy header is not overriden by hammerhead with unsafe-url and default strict-origin-when-cross-origin is used - it truncates path and params from url in Referer header. Because of that condition which pass through the request is not met.

What is the Expected behavior?

Tests should pass (at least for old solution with hammerhead).

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

I've created sample repo with reproduction steps : https://github.com/radk0s/testcafe-sw-issue
Also deployed sample app to https://radk0s.github.io/testcafe-sw-issue/

What is your TestCafe test code?

import { Selector } from "testcafe";

fixture`Auth`.page`https://radk0s.github.io/testcafe-sw-issue/`;

test("login works", async (t) => {
  const username = "bob";
  const password = "bob";
  const useNameInput = Selector('input[name="Input.Username"]');
  const passwordInput = Selector('input[name="Input.Password"]');

  await t
    .click("#login")
    .expect(useNameInput.exists)
    .ok()
    .typeText(useNameInput, username, { replace: true })
    .typeText(passwordInput, password, { replace: true })
    .pressKey("enter")
    .click("#logout")
});

Your complete configuration file

No response

Your complete test report

> testcafe chrome ./e2e  --disable-native-automation --hostname localhost

 Running tests in:
 - Chrome 118.0.0.0 / Ventura 13

 Auth
 ✖ login works

   1) A JavaScript error occurred on

   "https://radk0s.github.io/testcafe-sw-issue/#/authentication/callback?code=6D6E77D393EBB9E8E2F4A2A45EDB88B4707327AACEA20068976D811281CEE668-1&scope=openid%20profile%20email%20api%20offline_access&state=6bZjdoRCPkTobwbs&session_state=K7RMrbXrUwfPfsyjJL2VDaexBhAbZ535uIy4mHyKU_g.E8C8D6B4D13EB97C5EA9EC9DF47C52DB&iss=https%3A%2F%2Fdemo.duendesoftware.com".
      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:
      Error: Token request failed
          at https://radk0s.github.io/testcafe-sw-issue/assets/index-cc4e9f27.js:2:30493
          at async n (https://radk0s.github.io/testcafe-sw-issue/assets/index-cc4e9f27.js:3:4440)
          at async yt (https://radk0s.github.io/testcafe-sw-issue/assets/index-cc4e9f27.js:2:34739)

      Browser: Chrome 118.0.0.0 / Ventura 13

         13 |    .expect(useNameInput.exists)
         14 |    .ok()
         15 |    .typeText(useNameInput, username, { replace: true })
         16 |    .typeText(passwordInput, password, { replace: true })
         17 |    .pressKey("enter")
       > 18 |    .click("#logout")
         19 |});
         20 |

         at <anonymous> (/Users/rchamot/Guidewire/jutro/testcafe-sw-issue/e2e/LoginTest.ts:18:6)
         at <anonymous> (/Users/rchamot/Guidewire/jutro/testcafe-sw-issue/e2e/LoginTest.ts:8:71)
         at __awaiter (/Users/rchamot/Guidewire/jutro/testcafe-sw-issue/e2e/LoginTest.ts:4:12)
         at <anonymous> (/Users/rchamot/Guidewire/jutro/testcafe-sw-issue/e2e/LoginTest.ts:5:33)



 1/1 failed (11s)

Screenshots

No response

Steps to Reproduce

All reproduction steps are described in example repo: https://github.com/radk0s/testcafe-sw-issue

Can be also reproduced with http-playground from https://github.com/DevExpress/testcafe-hammerhead:

• Open https://radk0s.github.io/testcafe-sw-issue/ using hammerhead proxy
• Click Login button.
• Provide credentials on external IDP page bob/bob and press Enter.

TestCafe version

3.3.0

Node.js version

18.14.2

Command-line arguments

testcafe chrome ./e2e --disable-native-automation --hostname localhost

Browser name(s) and version(s)

No response

Platform(s) and version(s)

Mac OS ventura 13.6

Other

No response

[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.

[radk0s]

Thanks @AlexKamaev for quick verification. Are you able to provide estimated time when issue could be solved?

[AlexKamaev]

@radk0s
I did not research the issue in detail yet, so it is difficult to give any precise estimates until I know the cause of the issue.

[AlexKamaev]

We fixed the described issue in the following PR: #8084
Please note that the issue is fixed only in Native Automation mode, which is enabled by default. If you need to use a hammerhead-based solution, please describe in detail why you can't use Native Automation mode.
A release with the fix is not published yet, so you can test the solution using the main branch of the TestCafe repository. Please refer to the following help topic to get details: Install TestCafe from source