fix: change CI to install browsers for tests

oliveriosousa · oliveriosousa · commit 85186b1e6307 · 2021-08-17T18:51:34.000+01:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,5 +18,7 @@ jobs:
           cache: "yarn"
       - name: Install dependencies
         run: yarn install
+      - name: Install dependencies for browsers
+        run: npx playwright install-deps
       - name: Run test:examples
         run: yarn run test:examples
diff --git a/examples/browser-video-streaming/index.html b/examples/browser-video-streaming/index.html
@@ -18,5 +18,6 @@
   </head>
   <body>
     <video id="video" controls autoplay></video>
+    <div id="status"></div>
   </body>
 </html>
diff --git a/examples/browser-video-streaming/src/index.js b/examples/browser-video-streaming/src/index.js
@@ -13,11 +13,17 @@ document.addEventListener('DOMContentLoaded', async () => {
   Hls.DefaultConfig.debug = false
   if (Hls.isSupported()) {
     const video = document.getElementById('video')
+    const status = document.getElementById('status')
     const hls = new Hls()
     hls.config.ipfs = node
     hls.config.ipfsHash = testHash
     hls.loadSource('master.m3u8')
     hls.attachMedia(video)
-    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      video.play()
+
+      const node = document.createTextNode("Video ready...");
+      status.appendChild(node);
+    })
   }
 })
diff --git a/examples/browser-video-streaming/tests/test.js b/examples/browser-video-streaming/tests/test.js
@@ -12,13 +12,13 @@ const play = test.extend({
 
 play.describe('browser videostream:', () => {
   // DOM
-  const video = "#video"
+  const status = "#status"
 
   play.beforeEach(async ({servers, page}) => {
     await page.goto(`http://localhost:${servers[0].port}/`);
   })
 
   play('should properly initialized a IPFS node and stream a video', async ({ page }) => {
-    await page.waitForFunction((el) => document.querySelector(el).readyState >= 2, video);
+    await page.waitForSelector(`${status}:has-text('Video ready')`)
   });
 });
