HammerHead doesn't forward the requests to the service worker #8005

ilya2010ujl · 2023-09-05T07:12:04Z

What is your Scenario?

I'm working on the testcafe based on NextJS framework and integrated msw library for mocking requests. Testcafe hammeread doesn't forward the some mock requests to the msw service worker and the requests fail with 404 Not Found.
I debugged some hammerhead library codes and I guess this is related to the scope problem of hammerhead but not sure how I can fix this.
The scenario described below works if experimentalProxyless is enabled on version 2.4.0. On version 3.1.0 - the error is reproduced both with experimentalProxyless disabled and enabled

What is the Current behavior?

Interestingly, the mocking requests at testcafe tests work fine at the level 1 route pages(like '/', '/account', '/login', ...) and not working at deeper level sub-paths (e.g '/account/login', '/account/login/test', ...).

What is the Expected behavior?

The mocking request at testcafe should work at every sub paths. :)

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

To reproduce

Clone the demo repo: https://github.com/Roy412/msw-testcafe-error
Install the packages: yarn
Run the testcafe test: yarn testcafe

What is your TestCafe test code?

https://github.com/Roy412/msw-testcafhttps://github.com/Roy412/msw-testcafe-error/blob/main/testcafe/rest.spec.tse-error/blob/main/testcafe/rest.spec.ts

Your complete configuration file

No response

Your complete test report

roy@Roys-iMac msw-testcafe-error % yarn testcafe
yarn run v1.22.19
$ NEXT_PUBLIC_IS_TESTCAFE=1 node runtestCafe.js
 Running tests in:
 - Chrome 108.0.0.0 / Ventura 13

 Rest
 ✖ should do a GET

   1) An error occurred in Selector code:
      
          TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Success"
      
      Here are the accessible roles:
      
      heading:
      
      Name "Loading...":
      <h1 />
      
      --------------------------------------------------
      button:
      
      Name "fetch":
      <button />
      
      --------------------------------------------------alert:
      
      Name "":
      <p
      aria-live="assertive"
      id="__next-route-announcer__"
      role="alert"
      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space:
      nowrap; overflow-wrap: normal;"
      />
      
      --------------------------------------------------
      
      <body>
      <div
      id="__next"
      >
      <div>
        <h1>
          Loading...
        </h1>
        <button>
          fetch
        </button>
      </div>
      </div>
      <script
      src="/_next/static/chunks/react-refresh.js?ts=1671491285969"
      />
      <script
      id="__NEXT_DATA__"
      type="application/json"
      >
      {"props":{"pageProps":{}},"page":"/account/login/test","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
      </script>
      <div
      id="__next-build-watcher"
      style="position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;"
      />
      <next-route-announcer>
      <p
        aria-live="assertive"
        id="__next-route-announcer__"
        role="alert"
        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space:
      nowrap; overflow-wrap: normal;"
      />
      </next-route-announcer>
      </body>

      Browser: Chrome 108.0.0.0 / macOS 10.15.7

          9 |test("should do a GET", async (t) => {
         10 |  await t
         11 |    .expect(screen.findByRole('heading',{ name: 'Loading...' }).exists).ok('Page loaded')
         12 |    .click(screen.getByRole("button", { name: /fetch/i }))
         13 |    .wait(500)
       > 14 |    .expect(screen.getByRole("heading", { name: 'Success' }).exists).ok('Data Fetch Success')
         15 |});
         16 |// test("should do a DELETE", async (t) => {
         17 |//   await t
         18 |//     .expect(screen.findAllByRole("heading", { name: /foo|bar/ }).count)
         19 |//     .eql(2)

         at <anonymous> (/Users/roy/msw-testcafe-error/testcafe/rest.spec.ts:14:70)
         at <anonymous> (/Users/roy/msw-testcafe-error/testcafe/rest.spec.ts:8:71)
         at __awaiter (/Users/roy/msw-testcafe-error/testcafe/rest.spec.ts:4:12)
         at <anonymous> (/Users/roy/msw-testcafe-error/testcafe/rest.spec.ts:9:37)



 1/1 failed (5s)

Screenshots

Steps to Reproduce

To reproduce

Clone the demo repo: https://github.com/Roy412/msw-testcafe-error
Install the packages: yarn
Run the testcafe test: yarn testcafe

TestCafe version

3.3.0

Node.js version

v16.16.0

Command-line arguments

NEXT_PUBLIC_IS_TESTCAFE=1 node runtestCafe.js

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2023-09-07T07:54:13Z

We appreciate you taking the time to share the information about this issue. We replicated it, and it is currently in our internal queue. Please note that the research may take time. We'll update this thread once we have news.

AlexKamaev · 2023-11-24T07:05:52Z

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

ilya2010ujl added the TYPE: bug The described behavior is considered as wrong (bug). label Sep 5, 2023

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Sep 5, 2023

AlexKamaev added the STATE: Issue accepted An issue has been reproduced. label Sep 7, 2023

github-actions bot removed STATE: Need response An issue that requires a response or attention from the team. STATE: Issue accepted An issue has been reproduced. labels Sep 7, 2023

AlexKamaev added the FREQUENCY: level 1 label Sep 7, 2023

AlexKamaev closed this as completed Nov 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HammerHead doesn't forward the requests to the service worker #8005

HammerHead doesn't forward the requests to the service worker #8005

ilya2010ujl commented Sep 5, 2023 •

edited

Loading

github-actions bot commented Sep 7, 2023

AlexKamaev commented Nov 24, 2023

HammerHead doesn't forward the requests to the service worker #8005

HammerHead doesn't forward the requests to the service worker #8005

Comments

ilya2010ujl commented Sep 5, 2023 • edited Loading

What is your Scenario?

What is the Current behavior?

What is the Expected behavior?

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

What is your TestCafe test code?

Your complete configuration file

Your complete test report

Screenshots

Steps to Reproduce

TestCafe version

Node.js version

Command-line arguments

Browser name(s) and version(s)

Platform(s) and version(s)

Other

github-actions bot commented Sep 7, 2023

AlexKamaev commented Nov 24, 2023

ilya2010ujl commented Sep 5, 2023 •

edited

Loading