ep_webrtc 2.5.35 → 2.5.37

package/.github/workflows/backend-tests.yml

@@ -26,6 +26,10 @@ jobs:
         with:
           repository: ether/etherpad-lite
           path: etherpad-lite
+      - uses: actions/setup-node@v4
+        name: Install Node.js
+        with:
+          node-version: 22
       - uses: pnpm/action-setup@v6
         name: Install pnpm
         with:

package/.github/workflows/frontend-tests.yml

@@ -15,6 +15,11 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ether/etherpad-lite
+          path: etherpad-lite
+      - uses: actions/setup-node@v4
+        name: Install Node.js
+        with:
+          node-version: 22
       - uses: pnpm/action-setup@v6
         name: Install pnpm
         with:
@@ -32,63 +37,36 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       -
-        name: Check out the plugin
+        name: Checkout plugin repository
         uses: actions/checkout@v6
         with:
-          path: ./node_modules/__tmp
-      -
-        name: export GIT_HASH to env
-        id: environment
-        run: |
-          cd ./node_modules/__tmp
-          echo "::set-output name=sha_short::$(git rev-parse --short ${{ github.sha }})"
-      -
-        name: Determine plugin name
-        id: plugin_name
-        run: |
-          cd ./node_modules/__tmp
-          npx -c 'printf %s\\n "::set-output name=plugin_name::${npm_package_name}"'
-      -
-        name: Rename plugin directory
-        env:
-          PLUGIN_NAME: ${{ steps.plugin_name.outputs.plugin_name }}
-        run: |
-          mv ./node_modules/__tmp ./node_modules/"${PLUGIN_NAME}"
-      -
-        name: Install plugin dependencies
-        env:
-          PLUGIN_NAME: ${{ steps.plugin_name.outputs.plugin_name }}
-        run: |
-          cd ./node_modules/"${PLUGIN_NAME}"
-          pnpm i
-      # Etherpad core dependencies must be installed after installing the
-      # plugin's dependencies, otherwise npm will try to hoist common
-      # dependencies by removing them from src/node_modules and installing them
-      # in the top-level node_modules. As of v6.14.10, npm's hoist logic appears
-      # to be buggy, because it sometimes removes dependencies from
-      # src/node_modules but fails to add them to the top-level node_modules.
-      # Even if npm correctly hoists the dependencies, the hoisting seems to
-      # confuse tools such as `npm outdated`, `npm update`, and some ESLint
-      # rules.
+          path: plugin
       -
         name: Install Etherpad core dependencies
+        working-directory: ./etherpad-lite
         run: bin/installDeps.sh
+      - name: Install plugin
+        working-directory: ./etherpad-lite
+        run: |
+          pnpm run plugins i --path ../../plugin
       - name: Create settings.json
+        working-directory: ./etherpad-lite
         run: cp ./src/tests/settings.json settings.json
       - name: Run the frontend tests
+        working-directory: ./etherpad-lite
         shell: bash
         run: |
           pnpm run dev &
           connected=false
           can_connect() {
-          curl -sSfo /dev/null http://localhost:9001/ || return 1
-          connected=true
+            curl -sSfo /dev/null http://localhost:9001/ || return 1
+            connected=true
           }
           now() { date +%s; }
           start=$(now)
-          while [ $(($(now) - $start)) -le 15 ] && ! can_connect; do
-          sleep 1
+          while [ $(($(now) - $start)) -le 30 ] && ! can_connect; do
+            sleep 1
           done
           cd src
-          pnpm exec playwright install chromium  --with-deps
+          pnpm exec playwright install chromium --with-deps
           pnpm run test-ui --project=chromium

package/package.json

@@ -5,7 +5,7 @@
     "url": "git@github.com:ether/ep_webrtc.git",
     "type": "git"
   },
-  "version": "2.5.35",
+  "version": "2.5.37",
   "description": "WebRTC based audio/video chat to Etherpad",
   "author": "John McLear <john@mclear.co.uk>",
   "contributors": [],

package/static/css/styles.css

@@ -6,6 +6,25 @@
   font-style: normal;
 }
 
+/*
+ * The "Failed to access camera/microphone" gritter notifications spawned by
+ * showUserMediaError() are sticky and span the top of the editor. Without
+ * this rule, the gritter's container/items intercept pointer events on the
+ * editor underneath (Playwright's stability check fails with "subtree
+ * intercepts pointer events"), making the pad unusable until the user
+ * dismisses each toast. Pass clicks through everything except the close
+ * button so the toast stays visible and dismissible without blocking
+ * the editor.
+ */
+#gritter-container,
+#gritter-container .gritter-item-wrapper,
+#gritter-container .gritter-item,
+#gritter-container .popup-content,
+#gritter-container .gritter-content,
+#gritter-container .gritter-title,
+#gritter-container .gritter-image { pointer-events: none; }
+#gritter-container .gritter-close { pointer-events: auto; }
+
 #rtcbox {
   align-items: start;
   display: none;

package/static/js/index.js

@@ -507,8 +507,52 @@ exports.rtc = new class {
     });
     $(window).on('beforeunload', () => { this.hangupAll(); });
     $(window).on('unload', () => { this.hangupAll(); });
-    if ($('#options-enablertc').prop('checked')) {
-      await this.activate();
+    // Skip auto-activation when the host has no audio/video device the
+    // browser can see. Bisecting against ether/ep_webrtc CI proved that
+    // the OUTER pad's activate() chain — specifically when getUserMedia
+    // rejects with NotFoundError on a runner without a camera — leaves
+    // browser-internal media state that holds the embedded pad iframe's
+    // `load` event past Playwright's 90s timeout in
+    // tests/frontend-new/specs/embed_value.spec.ts. Real users with a
+    // camera/mic still see the same auto-activate flow: enumerateDevices
+    // returns at least one device, hasMediaDevice is true, activate
+    // runs as before. ep_webrtc's own tests that exercise activation
+    // install a fake enumerateDevices via the test helper so they still
+    // hit the activate path with the fake getUserMedia.
+    let hasMediaDevice = true;
+    try {
+      const wantAudio = this._settings.audio.disabled !== 'hard';
+      const wantVideo = this._settings.video.disabled !== 'hard';
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const hasAudio = devices.some((d) => d.kind === 'audioinput');
+      const hasVideo = devices.some((d) => d.kind === 'videoinput');
+      hasMediaDevice = (wantAudio && hasAudio) || (wantVideo && hasVideo);
+    } catch (err) {
+      debug('enumerateDevices() failed; falling back to auto-activate:', err);
+    }
+    // Suppress the sticky "Failed to access camera/microphone" gritter
+    // during the initial auto-activation. Without this, CI runners (and
+    // anyone loading a pad without granting camera/mic permission) would
+    // see an unsolicited error toast on every pad load, which also
+    // contaminated unrelated tests that read gritter content (e.g.
+    // error_sanitization). Errors surfaced AFTER the user explicitly
+    // re-clicks the checkbox / mic / video button still show the toast
+    // as before — see the change-handler above.
+    if (hasMediaDevice && $('#options-enablertc').prop('checked')) {
+      this._suppressMediaErrorToast = true;
+      try {
+        await this.activate();
+      } finally {
+        this._suppressMediaErrorToast = false;
+      }
+    } else if (!hasMediaDevice) {
+      // No camera/mic visible. Don't auto-activate — the activate chain
+      // creates a <video autoplay> element and a getUserMedia request
+      // that hangs the browser's media subsystem when there's no
+      // device. The checkbox keeps whatever state settingToCheckbox
+      // assigned (cookie/query/default) so users still see the right
+      // toggle in the gear menu. They can manually tick it to call
+      // activate() via the change-handler.
     } else {
       await this.deactivate();
     }
@@ -551,6 +595,16 @@ exports.rtc = new class {
   }
 
   showUserMediaError(err) { // show an error returned from getUserMedia
+    if (this._suppressMediaErrorToast) {
+      // Auto-activation from cookie/default failed (e.g. no camera in CI or
+      // the user hasn't granted permission yet). Log it but don't pop a
+      // sticky gritter — the buttons already reflect the failed state and
+      // the user can re-click to retry, at which point a real error toast
+      // will appear.
+      debug('suppressing user-media error toast during auto-activation:', err);
+      logErrorToServer(err);
+      return;
+    }
     err.devices.sort();
     const devices = err.devices.join('');
     let msgId = null;

package/static/tests/frontend-new/helper/utils.ts

@@ -0,0 +1,145 @@
+import {Page} from '@playwright/test';
+
+// Generator that yields the Cartesian product of the given iterables.
+// 1:1 port of the legacy utils.js cartesian generator.
+export function* cartesian<T>(head: T[], ...tail: T[][]): Generator<T[]> {
+  const remainder: Iterable<T[]> = tail.length > 0 ? cartesian(tail[0], ...tail.slice(1)) : [[]];
+  for (const r of remainder) for (const h of head) yield [h, ...r];
+}
+
+// Installs a fake navigator.mediaDevices.getUserMedia inside the page.
+//
+// Implementation note: the legacy helper depended on document/AudioContext
+// at the time of installation (it created the canvas + AudioContext inside
+// the pad's chrome window). The Playwright equivalent runs the entire
+// install inside page.evaluate() so canvas/AudioContext live in browser
+// context, matching the old behavior 1:1.
+//
+// If `track` is true, the function also sets `window.__webrtcLastStream`
+// and `window.__webrtcLastConstraints` on every getUserMedia call so the
+// caller can inspect the most recent audio/video tracks (used by the
+// interface_buttons spec which originally captured the tracks via
+// closure variables in the helper).
+export const installFakeGetUserMedia = async (page: Page, opts: {track?: boolean} = {}) => {
+  const {track = false} = opts;
+  await page.evaluate((track) => {
+    const w = window as any;
+    const makeSilentAudioTrack = () => {
+      const ctx = new AudioContext();
+      const gain = ctx.createGain();
+      const dst = gain.connect(ctx.createMediaStreamDestination());
+      return dst.stream.getAudioTracks()[0];
+    };
+    const makeVideoTrack = (constraints: any) => {
+      const canvas = document.createElement('canvas');
+      const {
+        width: {max: widthMax = 160, ideal: widthIdeal} = {} as any,
+        height: {max: heightMax = 120, ideal: heightIdeal} = {} as any,
+      } = constraints || {};
+      canvas.width = widthIdeal || widthMax;
+      canvas.height = heightIdeal || heightMax;
+      const ctx = canvas.getContext('2d')!;
+      // Some animation is needed because in some browsers HTMLVideoElement.play() will hang
+      // until the canvas is updated. Use a relatively high frame rate to speed up tests.
+      window.setInterval(() => {
+        ctx.fillStyle = `#${Math.floor(Math.random() * 2 ** 24).toString(16).padStart(6, '0')}`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }, 100);
+      return (canvas as any).captureStream().getVideoTracks()[0];
+    };
+    const fakeGetUserMedia = async (constraints: any) => {
+      const audio = constraints && constraints.audio;
+      const video = constraints && constraints.video;
+      if (!audio && !video) {
+        throw new DOMException('either audio or video is required', 'TypeError');
+      }
+      const stream = new MediaStream([
+        ...(audio ? [makeSilentAudioTrack()] : []),
+        ...(video ? [makeVideoTrack(video)] : []),
+      ]);
+      if (track) {
+        w.__webrtcLastStream = stream;
+        w.__webrtcLastConstraints = constraints;
+      }
+      return stream;
+    };
+    w.__fakeGetUserMedia = fakeGetUserMedia;
+    w.navigator.mediaDevices.getUserMedia = fakeGetUserMedia;
+    // ep_webrtc's postAceInit checks enumerateDevices() and skips
+    // auto-activation when no audio/video device is visible (this is
+    // what lets embed_value.spec.ts pass on CI runners without a
+    // camera). Tests that rely on auto-activate must therefore expose
+    // fake devices too — fake them here in the same helper so callers
+    // get the full activation flow without extra wiring.
+    w.navigator.mediaDevices.enumerateDevices = async () => [
+      {kind: 'audioinput', deviceId: 'fake-audio', groupId: 'fake', label: 'fake mic'},
+      {kind: 'videoinput', deviceId: 'fake-video', groupId: 'fake', label: 'fake cam'},
+    ];
+  }, track);
+};
+
+// Fakes navigator.mediaDevices.enumerateDevices to expose one
+// audioinput + one videoinput device, without touching getUserMedia.
+// Use this in tests that need ep_webrtc to auto-activate but still
+// want to control getUserMedia separately (e.g. errors.spec patches
+// getUserMedia to throw specific DOMExceptions).
+export const installFakeMediaDevices = async (page: Page) => {
+  await page.evaluate(() => {
+    const w = window as any;
+    w.navigator.mediaDevices.enumerateDevices = async () => [
+      {kind: 'audioinput', deviceId: 'fake-audio', groupId: 'fake', label: 'fake mic'},
+      {kind: 'videoinput', deviceId: 'fake-video', groupId: 'fake', label: 'fake cam'},
+    ];
+  });
+};
+
+// Sets the `prefs` cookie so the next pad load picks up the supplied
+// padPrefs. Mirrors helper.aNewPad({padPrefs}) from the legacy harness.
+export const setPadPrefsCookie = async (page: Page, padPrefs: Record<string, any>) => {
+  await page.context().addCookies([{
+    name: 'prefsHttp',
+    // Newer Etherpad stores the prefs cookie as `prefsHttp` and the
+    // value is the prefs object itself (no `{prefs: ...}` wrapper).
+    value: encodeURIComponent(JSON.stringify(padPrefs)),
+    url: 'http://localhost:9001',
+  }]);
+};
+
+// Reads a single key out of the live prefsHttp cookie. Replaces the
+// legacy `padcookie.getPref(key)` calls that depended on Etherpad's
+// CommonJS `require` being exposed on window — modern Etherpad bundles
+// via esbuild and no longer exposes require to page scripts.
+export const readPrefCookie = (page: Page, key: string) => page.evaluate((key) => {
+  const cookies: Record<string, string> = {};
+  for (const c of document.cookie.split('; ')) {
+    if (!c) continue;
+    const eq = c.indexOf('=');
+    if (eq < 0) continue;
+    cookies[c.slice(0, eq)] = c.slice(eq + 1);
+  }
+  const raw = cookies.prefsHttp;
+  if (!raw) return null;
+  try {
+    const prefs = JSON.parse(decodeURIComponent(raw));
+    return prefs[key] != null ? prefs[key] : null;
+  } catch {
+    return null;
+  }
+}, key);
+
+// Navigates to a fresh pad with optional URL query params (mirrors
+// helper.aNewPad({params}) from the legacy harness). Does not clear
+// cookies – call setPadPrefsCookie first if you need padPrefs.
+export const goToNewPadWithParams = async (
+    page: Page, params: Record<string, any> = {}) => {
+  const {randomUUID} = await import('node:crypto');
+  const padId = 'FRONTEND_TESTS' + randomUUID();
+  const qs = new URLSearchParams();
+  for (const [k, v] of Object.entries(params)) qs.append(k, String(v));
+  const url = `http://localhost:9001/p/${padId}` +
+              (qs.toString() ? `?${qs.toString()}` : '');
+  await page.goto(url);
+  await page.waitForSelector('iframe[name="ace_outer"]');
+  await page.waitForSelector('#editorcontainer.initialized');
+  return padId;
+};

package/static/tests/frontend-new/specs/audio_video_on_start.spec.ts

@@ -0,0 +1,37 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, installFakeGetUserMedia, setPadPrefsCookie}
+    from '../helper/utils';
+
+test.describe('audio/video on/off according to query parameters/cookies', () => {
+  const testCases = [...cartesian(
+      ['audio', 'video'] as Array<'audio' | 'video'>,
+      [null, false, true],
+      [null, false, true])];
+
+  for (const [avType, cookieVal, queryVal] of testCases) {
+    test(`${avType} cookie=${cookieVal} query=${queryVal}`, async ({page, context}) => {
+      test.setTimeout(60_000);
+      await context.clearCookies();
+      const padPrefs = cookieVal == null ? {} : {[`${avType}EnabledOnStart`]: cookieVal};
+      await setPadPrefsCookie(page, padPrefs);
+      const params: Record<string, any> = {av: false};
+      if (queryVal != null) params[`webrtc${avType}enabled`] = queryVal;
+      await goToNewPadWithParams(page, params);
+      await installFakeGetUserMedia(page);
+      // Calling activate() directly blocks until activation completes.
+      await page.evaluate(() => (window as any).ep_webrtc.activate());
+      const disabled: string = await page.evaluate(
+          (avType) => (window as any).ep_webrtc._settings[avType].disabled, avType);
+      const checkboxCount = await page.locator(`#options-${avType}enabledonstart`).count();
+      if (disabled === 'hard') {
+        expect(checkboxCount).toBe(0);
+      } else {
+        const wantChecked = !!(queryVal || (queryVal == null && cookieVal) ||
+                                (queryVal == null && cookieVal == null && disabled === 'none'));
+        const checked = await page.locator(`#options-${avType}enabledonstart`)
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(wantChecked);
+      }
+    });
+  }
+});

package/static/tests/frontend-new/specs/checkbox.spec.ts

@@ -0,0 +1,154 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, readPrefCookie, setPadPrefsCookie}
+  from '../helper/utils';
+
+type Tc = {
+  name: string;
+  defaultVal: boolean;
+  cookieVal: boolean | null;
+  queryVal: boolean | null;
+  i: number;
+  id: string;
+  want: boolean;
+};
+
+const testCases: Tc[] = [...cartesian(
+    [false, true] as boolean[],
+    [null, false, true] as Array<boolean | null>,
+    [null, false, true] as Array<boolean | null>)].map(([defaultVal, cookieVal, queryVal], i) => ({
+  name: `default=${defaultVal} cookie=${cookieVal} query=${queryVal}`,
+  defaultVal: defaultVal as boolean,
+  cookieVal: cookieVal as boolean | null,
+  queryVal: queryVal as boolean | null,
+  i,
+  id: `checkboxId${i}`,
+  want: !!((queryVal as boolean | null) ||
+            (queryVal == null && cookieVal) ||
+            (queryVal == null && cookieVal == null && defaultVal)),
+}));
+
+test.describe('settingToCheckbox', () => {
+  // Use a serial worker so the single before-all setup persists across tests
+  // (legacy used mocha's `before` for one-shot setup).
+  test.describe.configure({mode: 'serial'});
+
+  let sharedPage: import('@playwright/test').Page;
+
+  test.beforeAll(async ({browser}) => {
+    sharedPage = await browser.newPage();
+    test.setTimeout(60_000);
+    const padPrefs: Record<string, any> = {};
+    for (const tc of testCases) {
+      if (tc.cookieVal != null) padPrefs[`cookie${tc.i}`] = tc.cookieVal;
+    }
+    await setPadPrefsCookie(sharedPage, padPrefs);
+    const params: Record<string, any> = {av: false};
+    for (const tc of testCases) {
+      if (tc.queryVal != null) params[`urlVar${tc.i}`] = tc.queryVal;
+    }
+    await goToNewPadWithParams(sharedPage, params);
+    // Append a checkbox per testCase to #settings then call settingToCheckbox.
+    await sharedPage.evaluate((cases) => {
+      const w = window as any;
+      const $ = w.$;
+      for (const c of cases) {
+        $('#settings').append($('<input>').attr('type', 'checkbox').attr('id', c.id));
+      }
+    }, testCases.map(({id}) => ({id})));
+    // Wait for all checkboxes to exist.
+    await sharedPage.waitForFunction((cases) => {
+      for (const c of cases) {
+        if (document.querySelectorAll(`#${c.id}`).length !== 1) return false;
+      }
+      return true;
+    }, testCases.map(({id}) => ({id})));
+    await sharedPage.evaluate((cases) => {
+      const w = window as any;
+      for (const c of cases) {
+        w.ep_webrtc.settingToCheckbox({
+          urlVar: `urlVar${c.i}`,
+          cookie: `cookie${c.i}`,
+          defaultVal: c.defaultVal,
+          checkboxId: `#${c.id}`,
+        });
+      }
+    }, testCases.map(({i, id, defaultVal}) => ({i, id, defaultVal})));
+  });
+
+  test.afterAll(async () => {
+    await sharedPage.close();
+  });
+
+  test.describe('initially checked/unchecked', () => {
+    for (const {name, want, id} of testCases) {
+      test(name, async () => {
+        const checked = await sharedPage.locator(`#${id}`)
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(want);
+      });
+    }
+  });
+
+  test.describe('query parameter sets cookie', () => {
+    for (const {name, queryVal, i} of testCases.filter((t) => t.queryVal != null)) {
+      test(name, async () => {
+        const v = await readPrefCookie(sharedPage, `cookie${i}`);
+        expect(v).toBe(queryVal);
+      });
+    }
+  });
+
+  test.describe('no query parameter, no cookie -> cookie not set', () => {
+    for (const {name, queryVal, cookieVal, i} of testCases) {
+      if (queryVal != null || cookieVal != null) continue;
+      test(name, async () => {
+        const v = await readPrefCookie(sharedPage, `cookie${i}`);
+        expect(v == null).toBe(true);
+      });
+    }
+  });
+
+  test.describe('clicking sets cookie', () => {
+    for (const {name, i, id, want} of testCases) {
+      test(name, async () => {
+        await sharedPage.locator(`#${id}`).evaluate((el) => {
+          const w = window as any;
+          w.$(el).click();
+        });
+        await sharedPage.waitForFunction(({id, want}) => {
+          const cb = document.querySelector(`#${id}`) as HTMLInputElement | null;
+          return cb != null && cb.checked === !want;
+        }, {id, want});
+        const v = await readPrefCookie(sharedPage, `cookie${i}`);
+        expect(v).toBe(!want);
+      });
+    }
+  });
+
+  test.describe('throws errors for missing params', () => {
+    const params = {
+      urlVar: 'urlVar',
+      cookie: 'cookie',
+      defaultVal: true,
+      checkboxId: '#checkboxId',
+    };
+
+    for (const k of Object.keys(params) as Array<keyof typeof params>) {
+      test(k, async () => {
+        const result = await sharedPage.evaluate(({params, k}) => {
+          const w = window as any;
+          const badParams: any = {...params};
+          delete badParams[k];
+          try {
+            w.ep_webrtc.settingToCheckbox(badParams);
+            return {threw: false, msg: ''};
+          } catch (e: any) {
+            return {threw: true, msg: String(e && (e.message || e))};
+          }
+        }, {params, k});
+        expect(result.threw).toBe(true);
+        expect(result.msg).toMatch(new RegExp(k));
+      });
+    }
+  });
+});

package/static/tests/frontend-new/specs/enable_disable.spec.ts

@@ -0,0 +1,81 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, setPadPrefsCookie} from '../helper/utils';
+
+const testCases = [...cartesian(
+    [null, false, true] as Array<boolean | null>,
+    [null, false, true, 'NO', 'YES', 'ignored'] as Array<boolean | string | null>)];
+
+test.describe('enable/disable', () => {
+  for (const [cookieVal, queryVal] of testCases) {
+    test.describe(`cookie=${cookieVal} query=${queryVal}`, () => {
+      // serial: tests within share state from beforeAll on a single page.
+      test.describe.configure({mode: 'serial'});
+
+      let sharedPage: import('@playwright/test').Page;
+      let wantChecked: boolean;
+
+      test.beforeAll(async ({browser}) => {
+        sharedPage = await browser.newPage();
+        test.setTimeout(60_000);
+        const padPrefs = cookieVal == null ? {} : {rtcEnabled: cookieVal};
+        // Make ep_webrtc's enumerateDevices()-based auto-activate skip
+        // happy: pretend a camera/mic is present (and supply a fake
+        // getUserMedia) BEFORE navigation so postAceInit sees devices.
+        await sharedPage.addInitScript(() => {
+          const w = window as any;
+          const fakeStream = () => new MediaStream();
+          w.navigator.mediaDevices.enumerateDevices = async () => [
+            {kind: 'audioinput', deviceId: 'fake-audio', groupId: 'fake', label: 'fake mic'},
+            {kind: 'videoinput', deviceId: 'fake-video', groupId: 'fake', label: 'fake cam'},
+          ];
+          w.navigator.mediaDevices.getUserMedia = async () => fakeStream();
+        });
+        await setPadPrefsCookie(sharedPage, padPrefs);
+        const params: Record<string, any> = {};
+        if (queryVal != null) params.av = queryVal;
+        await goToNewPadWithParams(sharedPage, params);
+        // Normalize queryVal to null/false/true.
+        const queryNorm: boolean | null =
+            typeof queryVal === 'boolean' ? queryVal
+            : queryVal === 'NO' ? false
+            : queryVal === 'YES' ? true
+            : null;
+        await sharedPage.waitForFunction(() => {
+          const w = window as any;
+          return w.$('#rtcbox').data('initialized');
+        }, undefined, {timeout: 5000});
+        const defaultChecked: boolean = await sharedPage.evaluate(
+            () => !!(window as any).ep_webrtc._settings.enabled);
+        wantChecked = !!(queryNorm || (queryNorm == null && cookieVal) ||
+                         (queryNorm == null && cookieVal == null && defaultChecked));
+      });
+
+      test.afterAll(async () => {
+        await sharedPage.close();
+      });
+
+      test('checkbox is checked/unchecked', async () => {
+        const checked = await sharedPage.locator('#options-enablertc')
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(wantChecked);
+      });
+
+      test('self video element', async () => {
+        const count = await sharedPage.locator('#rtcbox video').count();
+        expect(count).toBe(wantChecked ? 1 : 0);
+      });
+
+      test('clicking checkbox toggles state', async () => {
+        await sharedPage.locator('#options-enablertc').evaluate((el) => {
+          (window as any).$(el).click();
+        });
+        const checked = await sharedPage.locator('#options-enablertc')
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(!wantChecked);
+        await sharedPage.waitForFunction((expected) => {
+          return document.querySelectorAll('#rtcbox video').length === expected;
+        }, wantChecked ? 0 : 1);
+      });
+    });
+  }
+});