Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
HammerHead doesn't forward the requests to the service worker
See original GitHub issueWhat 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.
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-testcafe-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
No response
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
2.1.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
- If you replace the page route by level 1 path like
/account/login/test—>/account, the test passes. - By debugging hammerhead codes, it fails at this code line where it was supposed to forward the requests to the service worker. Obviously, if you comment out this check statement, the test will pass too. https://github.com/DevExpress/testcafe-hammerhead/blob/53f57614e829fc8f1f870b9904c3f5bdce76bfa6/src/client/worker/fetch-event.ts#L86
This check fails.
parsedUrl.partAfterHost.startsWith(swFetchCheckSettings.scope)
In my case,
parsedUrl.partAfterHost: "/Kc760vbDm*hhGNZfK60/http://localhost:3000/account/login/test"
swFetchCheckSettings.scope: "/account/login/"
Not sure which one of parsedUrl.partAfterHost or swFetchCheckSettings.scope value is wrong.
Issue Analytics
- State:
- Created 9 months ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
msw in testcafe says its started, but responds with 404 #259
Although the Service Worker registers successfully, I cannot predict how Hammerhead's changes may affect its lifecycle.
Read more >Fetch of the service worker doesn't seem to get triggered
This is because your Service Worker script is located in a directory outside the scope of the requests you're interested in.
Read more >Using Service Workers - Web APIs | MDN
After a successful installation, the service worker activates. This doesn't have much of a distinct use the first time your service worker is ......
Read more >Service workers - web.dev
Before a service worker takes control of your page, it must be registered for your PWA. That means the first time a user...
Read more >How to communicate with Service Workers | Felix Gerschau
Send the message ... As I already mentioned, Service Workers communicate through the postMessage API. This doesn't only allow them to exchange ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @Roy412,
Thanks for your report. I reproduced this behavior. We will inform you as soon as we have news on this issue.
Thank you very much.