I have a service worker that is registered with

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.bundle.js').then(registration => {
        console.log('Service worker was registered');
    }).catch(error => {
        console.log('Registration failed: ', error);
    });
}

The actual service worker is logging its install and activate events with regular console.log() calls, all of this is working as expected.

However, when it came to the testing automation, the Headless Chrome / puppeteer solution is not working as it was expected, the service worker is not installed (the install event does not happen). So, the question is, is there any special way of testing pages with service workers with Headless Chrome / puppeteer?

The puppeteer code:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));

  await page.goto('https://***', { waitUntil: 'networkidle0' });
  await page.waitFor(1*4000);
  console.log('Before reload');
  await page.reload({ waitUntil: 'networkidle0' });
  await page.screenshot({path: 'public/vidi.png'});
  await browser.close();
})();

Links:

• GitHub issue
• Headless Chrome
• Puppeteer
• Chrome DevTools Protocol

I have a service worker that is registered with

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.bundle.js').then(registration => {
        console.log('Service worker was registered');
    }).catch(error => {
        console.log('Registration failed: ', error);
    });
}

The actual service worker is logging its install and activate events with regular console.log() calls, all of this is working as expected.

However, when it came to the testing automation, the Headless Chrome / puppeteer solution is not working as it was expected, the service worker is not installed (the install event does not happen). So, the question is, is there any special way of testing pages with service workers with Headless Chrome / puppeteer?

The puppeteer code:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));

  await page.goto('https://***.', { waitUntil: 'networkidle0' });
  await page.waitFor(1*4000);
  console.log('Before reload');
  await page.reload({ waitUntil: 'networkidle0' });
  await page.screenshot({path: 'public/vidi.png'});
  await browser.close();
})();

Links:

• GitHub issue
• Headless Chrome
• Puppeteer
• Chrome DevTools Protocol

• javascript
• google-chrome
• google-chrome-devtools
• puppeteer
• google-chrome-headless

1 Answer 1

Yes,

const browser = await puppeteer.launch({
    args: ['--enable-features=NetworkService'],
    headless: true,
    ignoreHTTPSErrors: true,
  });

--enable-features=NetworkService enables service worker (experimental) and ignoreHTTPSErrors is required to overe the https requirement of service workers when in the puppeteer context (served over file:///)