debugging

remove waitForSelectors and ensure service worker response is done before checking for text

Author: SgtPooki

examples/browser-service-worker/tests/test.js

@@ -22,28 +22,58 @@ play.describe('browser service worker:', () => {
     page.on("pageerror", (err) => {
       console.trace(`pageerror: ${err.message}`)
     })
-    await page.waitForSelector(textDOM)
-    await page.waitForSelector(linkDOM)
+    // await page.waitForSelector(textDOM)
+    // await page.waitForSelector(linkDOM)
 
     expect(await page.textContent(textDOM)).toContain("Load content by adding IPFS path to the URL")
     expect(await page.textContent(linkDOM)).toContain("/ipfs/bafy")
 
-    await page.waitForSelector(`${debugDOM}:has-text("SW is ready")`, {
-      state: 'attached'
-    })
+    const ipfsRequestUrl = `http://localhost:${servers[0].port}/ipfs/Qmf412jQZiuVUtdgnB36FXFX7xg5V6KEbSJ4dpQuhkLyfD`
 
+    /**
+     * Wait for the service worker to be ready
+     * @see https://playwright.dev/docs/service-workers-experimental#accessing-service-workers-and-waiting-for-activation
+     */
     await page.evaluate(async () => {
       const registration = await window.navigator.serviceWorker.getRegistration();
-      console.log(`registration?.active?.state: `, registration?.active?.state);
       if (registration?.active?.state === 'activated') {
+        console.log('Service worker is already activated')
         return;
       }
-      await new Promise(res => window.navigator.serviceWorker.addEventListener('controllerchange', res));
+      await /** @type {Promise<void>} */(new Promise(res => {
+        window.navigator.serviceWorker.addEventListener('controllerchange', () => {
+          console.log('Service worker is activated')
+          res()
+        })
+      }));
     });
+    // await page.waitForSelector(`${debugDOM}:has-text("SW is ready")`, {
+    //   state: 'attached'
+    // })
+
+    context.on('request', (request) => {
+      console.log(`request.url(): ${request.url()}`)
+    })
+    context.on('requestfailed', (request) => {
+      console.log(`requestfailed: ${request.url()}`)
+    })
+    const serviceWorkerResponsePromise = new Promise((resolve, reject) => {
+      context.on('response', (response) => {
+        console.log(`response.url(): ${response.url()}`)
+        if (response.url() === ipfsRequestUrl && response.fromServiceWorker()) {
+          resolve(response);
+        }
+      })
+    })
+    context.on('response', (response) => {
+      console.log(`response.url(): ${response.url()}`)
+      console.log(`response.fromServiceWorker(): `, response.fromServiceWorker());
+    })
 
     // const currentURL = await page.url();
-    await page.goto(`http://localhost:${servers[0].port}/ipfs/Qmf412jQZiuVUtdgnB36FXFX7xg5V6KEbSJ4dpQuhkLyfD`, {waitUntil: 'commit'});
-    await page.waitForSelector('#viewer', {state: 'visible'})
+    await page.goto(ipfsRequestUrl, {waitUntil: 'commit'});
+    await serviceWorkerResponsePromise
+    // await page.waitForSelector('#viewer', {state: 'visible'})
 
     const frameText2 = page.frameLocator('#viewer').locator(textDOM)
     await frameText2.waitFor({state: 'visible'})