1
import assert from 'node:assert/strict';
2
import fs from 'node:fs/promises';
3
import { chromium } from 'playwright-core';
4
await fs.mkdir('../artifacts/worker', { recursive: true });
5
const browser = await chromium.connectOverCDP(
6
  process.env.RADIO_CDP_URL ?? 'http://127.0.0.1:19223',
7
);
8
const contexts = [],
9
  result = { cases: [] },
10
  errors = [];
11
try {
12
  for (const width of [320, 390, 1380]) {
13
    const context = await browser.newContext({
14
      viewport: { width, height: 844 },
15
      reducedMotion: 'reduce',
16
      isMobile: width < 600,
17
      hasTouch: width < 600,
18
    });
19
    contexts.push(context);
20
    await context.route('**/api/status', (route) =>
21
      route.fulfill({ json: { online: false, viewers: 0, controller: null, generation: null } }),
22
    );
23
    const page = await context.newPage();
24
    page.on('pageerror', (e) => errors.push(e.message));
25
    await page.goto(process.env.RADIO_TEST_URL ?? 'http://localhost:11880');
26
    for (const selector of [
27
      '[aria-labelledby="board-title"] button',
28
      '[aria-label="Cloudflare Realtime SFU relay"] button',
29
      '[data-anchor="leaf-audio"] button[aria-haspopup]',
30
      '[data-anchor="leaf-spectrum"] button[aria-haspopup]',
31
      '[data-anchor="leaf-robot"] button[aria-haspopup]',
32
    ]) {
33
      const trigger = page.locator(selector).first();
34
      await trigger.scrollIntoViewIfNeeded();
35
      await trigger.click();
36
      const popup = page.getByRole('dialog');
37
      await popup.waitFor();
38
      await page.waitForTimeout(100);
39
      const box = await popup.boundingBox();
40
      assert.ok(
41
        box.x >= 10 && box.y >= 10 && box.x + box.width <= width - 10 && box.y + box.height <= 846,
42
        JSON.stringify({ width, selector, box }),
43
      );
44
      assert.equal(await trigger.getAttribute('aria-expanded'), 'true');
45
      assert.equal(
46
        await page.evaluate(() => document.documentElement.scrollWidth > innerWidth),
47
        false,
48
      );
49
      if (selector.includes('leaf-spectrum'))
50
        await page.screenshot({ path: `../artifacts/worker/popover-${width}.png` });
51
      await page.keyboard.press('Escape');
52
      await popup.waitFor({ state: 'detached' });
53
      assert.equal(await trigger.evaluate((el) => el === document.activeElement), true);
54
      await trigger.click();
55
      await popup.waitFor();
56
      await page.mouse.click(3, 3);
57
      await popup.waitFor({ state: 'detached' });
58
      result.cases.push({
59
        width,
60
        selector,
61
        contained: true,
62
        escape: true,
63
        focusRestored: true,
64
        outsideDismiss: true,
65
      });
66
    }
67
    if (width === 1380) assert.equal(await page.locator('.wire-robot .wire-track').count(), 2);
68
    assert.equal(await page.getByText('REAL HARDWARE. REAL SIGNALS.', { exact: true }).count(), 0);
69
  }
70
  assert.deepEqual(errors, []);
71
  result.passed = true;
72
} catch (error) {
73
  result.passed = false;
74
  result.error = error.message;
75
  process.exitCode = 1;
76
} finally {
77
  result.errors = errors;
78
  await fs.writeFile(
79
    '../artifacts/worker/popovers-result.json',
80
    JSON.stringify(result, null, 2) + '\n',
81
  );
82
  console.log(JSON.stringify(result));
83
  for (const c of contexts) await c.close();
84
  await browser.close();
85
}