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.

[Feature] support route aka request interception for service workers

See original GitHub issue

Hi,

I’d like to be able to include markup directly instead of using page.goto to a remote address. I currently have a small example here of what I’ve tried out but it appears that 'serviceWorker' in navigator is returning false and registering a service worker fails.

I’ve tried page.setContent as well and I had the same results.

Can anyone tell me what I’m missing? The example I am running:

const { chromium } = require('playwright');

const msg = 'hi';

const serviceWorkerPath = '/sw.js';
const serviceWorkerScope = '/';
const serviceWorker = `console.log("${msg}");`;

const html = `<!doctype html>
<html>
  <head>
    <title>One Service Worker</title>
  </head>

  <body>
    <script type="text/javascript">
      console.log('serviceWorker' in navigator);

      try {
        navigator.serviceWorker.register('${serviceWorkerPath}', {
          scope: '${serviceWorkerScope}'
        });
      } catch (e) {
        console.error(e);
      }
    </script>
  </body>
</html>
`.trim();

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.route('**/*.html', async request =>
    request.fulfill({
      status: 200,
      contentType: 'text/html',
      body: html,
    }),
  );

  await page.route(serviceWorkerPath, request =>
    request.fulfill({
      status: 200,
      contentType: 'text/javascript',
      body: serviceWorker,
    }),
  );

  await page.goto('http://example.com/index.html', {
    waitUntil: 'load',
  });

  const sw = await page.evaluate(`window.navigator.serviceWorker`);
  
  console.log(sw);

  if (sw) {
    const swTarget = await browser.waitForTarget(target => target.type() === 'service_worker');
    const worker = await browser.serviceWorker(swTarget);
    // use worker target/handle
  }

  await browser.close();
})();

Issue Analytics

State:
Created 4 years ago
Reactions:66
Comments:24 (15 by maintainers)

Top GitHub Comments

45reactions

RFC2109commented, Apr 14, 2021

Vote up for this feature. It is very usefull because many websites has service worker. Disable sw is not a good idea,because it chang the tested system。

20reactions

Aaron-Poolcommented, Jan 15, 2021

Coming from #5014 . I added my thumbs up to the issue, but I also think it’s worth explicitly pointing out that the inability to use .route with service worker requests makes playwright unable to listen to requests that have been intercepted and handled by mswjs. MSW is a pretty big newcomer to the network mocking scene, thanks in large part to the articles and advocacy of Kent C. Dodds’ (the guy who wrote testing library and is pretty much the premier voice in the frontend testing world). I think compatibility between playwright and msw should be a pretty important consideration in playwright development.