Cannot intercept requests from a particular component
Hi all,
I'm pretty new to Playwright and coming from Cypress. I'm trying to implement an e2e test for our react application mocking all the API requests.
The issue is that two requests to two different resources are not being intercepted by the page.route() method. The funny thing is that those two requests are intercepted when they are made from our main application (I could mock the responses just fine), but when those requests come from our navigation component -which has its own bundle- they simply are not detected by the route method.
This is one of the routes:
await page.route('/api/user/v2/details?userId=*', async (route) => {
const header = await route.request().headerValue('X-http-caller-id');
console.log(`HEADER page -> ${header}`);
let counter = 0;
console.log(`Details page ${++counter}`);
route.fulfill({ path: 'src/mocks/mocks/user/details.json' });
});I made a few things in order to debug the problem:
-
I logged a header that tells us the requester and counted the times the request was made and intercepted. The logging showed me only one request with the header from our main app, while the other request goes directly to the service, which as the user is not logged in gives me a 401, as you can see in the screenshot.
-
I put another route at the beginning to catch all the requests, log the urls, and allow them to continue:
await page.route('*/**', (route) => {
const url = route.request().url();
console.log('URL ->', url);
route.continue();
});that shows me all the urls that are not intercepted, but no the two ones that are made from this component (a navbar) and I would like to intercept without luck.
So, the requests to /api/user/v2/details?userId=* are intercepted only once, although there two of them. One of them is not detected by Playwright.
What am I missing? Any idea would be much appreciated. Thanks in advance!
This thread is trying to answer question "Why are requests from a particular component not being intercepted by the `page.route()` method in Playwright?"
Well, I found kind of a solution. Apparently one of the problems was in the "I'm coming from Cypress" part... I implemented the authorization as it is indicated in the docs, instead of doing the same we were doing with Cypress, and all work... but, the second request, the one from the navbar, is not intercepted, so I am not able to mock it :/ The test works, although I would like to mock all the requests and I can't
Thanks for answering. Yes, the picture is from debugging a test run. The requests have the same domain and baseurl, we are querying the same service in both of them. None of them were redirected. I don't know how the navbar initiates the request, I'll check that, but I assume it should be the same way as in the main application. 2. Right. I can try removing the route for the request I am interested, and logged all of them. But I guess that the request to the user service will be logged only once, when the request is made from the main app. I'll take a look at that on Monday when I have access to the code. Thanks again
Could it have anything to do with service workers? https://playwright.dev/docs/network#missing-network-events-and-service-workers
Related Ask AI answer for "What are some reasons why the `page.route()` method in Playwright might not intercept certain requests from a specific component?".
Answer
Why Your Requests Might Not Be Intercepted in Playwright
You might be wondering why certain requests from a specific component aren't being intercepted by the page.route() method in Playwright. Let's dive into some possible reasons.
Service Workers
Service Workers are scripts that run in the background of your browser, separate from a web page. They can take over network requests, making them invisible to browserContext.route() and page.route(). If you're using Playwright's native browserContext.route() and page.route(), and it seems like network events are missing, you should disable Service Workers. Here's how you can do it:
const context = await browser.newContext({
serviceWorkers: 'block'
});Mock Tools
Mock tools like Mock Service Worker (MSW) can also interfere. MSW works great for mocking responses, but it adds its own Service Worker that takes over network requests. This makes these network requests invisible to both browserContext.route() and page.route(). If you're interested in both network testing and mocking, consider using built-in browserContext.route() and page.route() for response mocking.
Experimental Feature
Lastly, if you're interested in not only using Service Workers for testing and network mocking but also routing and listening for requests made by Service Workers themselves, there's an experimental feature available.
In conclusion, while Playwright provides powerful APIs like page.route() for monitoring or modifying HTTP/HTTPS traffic including XHRs & fetches request made by pages, certain factors like service workers or mock tools can interfere with their ability to intercept all types of request effectively. Understanding these nuances is crucial when working with Playwright's networking capabilities.
Related Discord Threads
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.