Rayrun
← Back to Discord Forum

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:

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

  2. 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!

Screenshot_2023-09-29_at_15.54.25.png

This thread is trying to answer question "Why are requests from a particular component not being intercepted by the `page.route()` method in Playwright?"

11 replies

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

I am having a similar issue. Did you ever solve this?

No, I didn't. I could use the auth flow described in the docs, but couldn't intercept all the requests 🙁 and it's not ideal for our use case because we would like to not depend on any service during the tests.

I assume that the picture of network traffic originates from debugging a test run? Can you give us more details on these requests? Do they have the same domain / baseurl? Was the second request maybe redirected? Can you see how the navbar initiates the request?

2: your logger will only log routes that are not handled by any other page.route that is added after your logger. Use page.on('request') // 'response' ... for that

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

Sorry for not commenting that before, but I've already seen it. The requests are not being made by a service worker, and I've already tried setting the serviceWorkers option to block without any luck :/

refactoreric

Hmm then I think it's worth posting a GitHub issue for this.

Thanks I'll try to do that

_henryxie999
_henryxie999

@refactoreric , could you please help my issue?

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

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.