chore: Modified timeouts to address flaky tests (#1284)

Closes muxinc/devextravaganza#216

Changes to try to reduce test flakiness for Webkit runs.
For example on:
https://github.com/muxinc/media-chrome/actions/runs/23017090932/job/66843131347

Also added a step to try to improve run time on job reruns, since they
sometimes take more than 20 mins

Before changes (`Run npx playwright install-deps` step) :

<img width="728" height="141" alt="image"
src="https://github.com/user-attachments/assets/9d866db3-29cc-4dfb-afeb-7dcf943accd5"
/>

After changes:

<img width="780" height="195" alt="image"
src="https://github.com/user-attachments/assets/8b3c280c-1b46-4207-af74-16a6237c96fa"
/>

Note: changes inspired by these two posts [microsoft/playwright -
[Question] Speed up installing browsers in GitHub
Actions](microsoft/playwright#14434) and
related [actions/runner - man-db trigger severely stalls package
installation on ubuntu-24.04 runners
#4030](actions/runner#4030)



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are limited to CI/CD workflow steps and test
timing/await logic; main risk is longer test timeouts potentially
masking legitimate hangs.
> 
> **Overview**
> **Stabilizes Playwright-driven unit tests and speeds up GitHub Actions
runs.** CI and CD workflows now remove `man-db` before Playwright
dependency installs to reduce `apt` delays on Ubuntu runners.
> 
> Updates flaky tests to rely on `waitUntil` (with longer per-suite
timeouts and explicit failure messages) instead of fixed `aTimeout`
sleeps, and adds `preload="auto"` to the test video fixture to make
state assertions more deterministic (notably on WebKit).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
2aedbfd. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Manuel Calleriza <mcalleriza@mux.com>

Author: spuppo-mux

.github/workflows/cd.yml

@@ -71,6 +71,8 @@ jobs:
           path: ~/.cache/ms-playwright
           key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
 
+      - name: Remove man-db to speed up apt installs
+        run: sudo apt-get remove -y man-db
       - run: npx playwright install --with-deps
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
       - run: npx playwright install-deps

.github/workflows/ci.yml

@@ -31,6 +31,8 @@ jobs:
           path: ~/.cache/ms-playwright
           key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
 
+      - name: Remove man-db to speed up apt installs
+        run: sudo apt-get remove -y man-db
       - run: npx playwright install --with-deps
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
       - run: npx playwright install-deps

test/unit/media-controller.spec.ts

@@ -1,5 +1,4 @@
 import {
-  aTimeout,
   assert,
   fixture,
   nextFrame,
@@ -304,7 +303,8 @@ describe('<media-controller>', () => {
   });
 });
 
-describe('receiving state / dispatching (bubbling) events', () => {
+describe('receiving state / dispatching (bubbling) events', function () {
+  this.timeout(30000);
   let mediaController: MediaController;
   let video: HTMLVideoElement;
   let div: HTMLDivElement;
@@ -318,12 +318,14 @@ describe('receiving state / dispatching (bubbling) events', () => {
           muted
           crossorigin
           playsinline
+          preload="auto"
         ></video>
         <div></div>
       </media-controller>
     `);
     video = mediaController.querySelector('video') as HTMLVideoElement;
     div = mediaController.querySelector('div') as HTMLDivElement;
+
   });
 
   it('receives state as attributes from the media', async () => {
@@ -350,8 +352,6 @@ describe('receiving state / dispatching (bubbling) events', () => {
       MediaUIAttributes.MEDIA_VOLUME_LEVEL
     );
 
-    await aTimeout(200);
-
     await video.play();
 
     assert(!mediaController.hasAttribute(MediaUIAttributes.MEDIA_PAUSED));
@@ -364,9 +364,12 @@ describe('receiving state / dispatching (bubbling) events', () => {
     div.dispatchEvent(
       new Event(MediaUIEvents.MEDIA_PLAY_REQUEST, { bubbles: true })
     );
-    await aTimeout(10);
 
-    assert(!video.paused, 'video.paused is false');
+    await waitUntil(() => !video.paused, 'video.paused is false');
+    await waitUntil(() =>
+      !mediaController.hasAttribute(MediaUIAttributes.MEDIA_PAUSED),
+      'has no mediapaused'
+    );
     assert(
       !mediaController.hasAttribute(MediaUIAttributes.MEDIA_PAUSED),
       'has no mediapaused'
@@ -375,9 +378,12 @@ describe('receiving state / dispatching (bubbling) events', () => {
     div.dispatchEvent(
       new Event(MediaUIEvents.MEDIA_PAUSE_REQUEST, { bubbles: true })
     );
-    await aTimeout(10);
 
-    assert(video.paused, 'video.paused is true');
+    await waitUntil(() => video.paused);
+    await waitUntil(() =>
+      mediaController.hasAttribute(MediaUIAttributes.MEDIA_PAUSED),
+      'has mediapaused'
+    );
     assert(
       mediaController.hasAttribute(MediaUIAttributes.MEDIA_PAUSED),
       'has mediapaused'
@@ -390,9 +396,12 @@ describe('receiving state / dispatching (bubbling) events', () => {
     div.dispatchEvent(
       new Event(MediaUIEvents.MEDIA_UNMUTE_REQUEST, { bubbles: true })
     );
-    await aTimeout(10);
 
-    assert(!video.muted, 'video.muted is false');
+    await waitUntil(() => !video.muted, 'video.muted is false');
+    await waitUntil(() =>
+      !mediaController.hasAttribute(MediaUIAttributes.MEDIA_MUTED),
+      'has no mediamuted'
+    );
     assert(
       !mediaController.hasAttribute(MediaUIAttributes.MEDIA_MUTED),
       'has no mediamuted'
@@ -401,9 +410,12 @@ describe('receiving state / dispatching (bubbling) events', () => {
     div.dispatchEvent(
       new Event(MediaUIEvents.MEDIA_MUTE_REQUEST, { bubbles: true })
     );
-    await aTimeout(10);
 
-    assert(video.muted, 'video.muted is true');
+    await waitUntil(() => video.muted, 'video.muted is true');
+    await waitUntil(() =>
+      mediaController.hasAttribute(MediaUIAttributes.MEDIA_MUTED),
+      'has mediamuted'
+    );
     assert(
       mediaController.hasAttribute(MediaUIAttributes.MEDIA_MUTED),
       'has mediamuted'
@@ -423,7 +435,9 @@ describe('receiving state / dispatching (bubbling) events', () => {
     await waitUntil(
       () =>
         // @ts-ignore
-        mediaController.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME) >= 2
+        mediaController.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME) >= 2,
+      'mediacurrenttime did not reach 2',
+      { timeout: 29000 }
     );
     assert(true, 'mediacurrenttime is 2');
   });
@@ -440,8 +454,8 @@ describe('receiving state / dispatching (bubbling) events', () => {
       () =>
         // @ts-ignore
         mediaController.getAttribute(MediaUIAttributes.MEDIA_VOLUME) == 0.73,
-      // @ts-ignore
-      10000
+      'mediavolume did not reach 0.73',
+      { timeout: 29000 }
     );
     assert(true, 'mediavolume is 0.73');
   });

test/unit/media-theme.spec.ts

@@ -4,7 +4,8 @@ import '../../src/js/index.js';
 import '../../src/js/media-theme-element.js';
 import { MediaThemeElement } from '../../src/js/media-theme-element.js';
 
-describe('<media-theme>', () => {
+describe('<media-theme>', function () {
+  this.timeout(15000);
   it(`<media-theme> with template attribute works w/ delayed document append`, async () => {
     const template: HTMLTemplateElement = document.createElement('template');
     template.id = 'not-yet';
@@ -29,8 +30,6 @@ describe('<media-theme>', () => {
   });
 
   it(`<media-theme> w/ template HTML file URL doesn't duplicate fetch/render `, async function () {
-    this.timeout(5000);
-
     const theme = document.createElement('media-theme');
     theme.setAttribute(
       'template',
@@ -39,7 +38,8 @@ describe('<media-theme>', () => {
 
     await waitUntil(
       () => theme!.shadowRoot!.querySelector('media-controller'),
-      5000 as any
+      'media-controller not found in shadow root',
+      { timeout: 10000 }
     );
     const mediaController =
       theme!.shadowRoot!.querySelector('media-controller');