Playwright microphone simulation demo

A small demo repository for testing browser microphone recording flows with Playwright.

The demo app requests microphone access, analyzes the incoming audio stream, displays a live level meter and waveform, and records MediaRecorder chunks. The Playwright suite verifies that the browser and app recording pipeline works with both browser-level fake media devices and deterministic in-page getUserMedia mocks.

Screenshots

Idle demo app:

Active mocked microphone:

Regenerate screenshots with:

npm run screenshots

What this demonstrates

• Test browser microphone permission flows with Chromium fake media flags.
• Feed Chromium a generated .wav file with --use-file-for-fake-audio-capture.
• Replace navigator.mediaDevices.getUserMedia in tests for deterministic audio scenarios.
• Test silence, tone, and speech-like microphone profiles without physical hardware.
• Exercise Web Audio analysis and MediaRecorder behavior from Playwright.
• Run the same Playwright projects as a Checkly Playwright check suite.

Requirements

• Node.js 22 or newer.
• npm.
• Playwright browsers installed by npx playwright install if your environment has not installed them yet.

Quick start

Install dependencies:

npm install
npx playwright install

Run the full local Playwright suite:

npm test

Open the demo app manually:

npm run demo

Then visit:

http://127.0.0.1:4173

Test with Playwright

If you have not installed the project yet, install dependencies and Playwright browsers:

npm install
npx playwright install

Run all Playwright projects:

npm test

Run a single project:

npx playwright test --project=chromium-fake-device
npx playwright test --project=chromium-mocked-get-user-media

See which tests run in each project without launching browsers:

npx playwright test --list

Run the tests in a visible browser while developing:

npm run test:headed

Test and monitor with Checkly

Install or update the Checkly CLI dependency:

npm install checkly@latest

Run the Checkly Playwright check suite from the CLI:

npx checkly test

Deploy the Checkly Playwright check suite for scheduled monitoring:

npx checkly deploy

checkly.config.js points Checkly at the same playwright.config.js used locally. The suite runs in eu-west-2 for manual CLI test runs and is configured to deploy scheduled checks in eu-west-2 and us-east-1.

The checks are active by default after deployment. You need a Checkly account and an authenticated CLI before you can run or deploy checks.

Test projects

playwright.config.js defines two Playwright projects and runs both locally, in CI, and in Checkly. CI=1 or CHECKLY=1 only changes automation behavior, such as using the list reporter and starting a fresh local server.

chromium-fake-device uses Chromium's built-in fake media flags:

--use-fake-device-for-media-stream
--use-fake-ui-for-media-stream
--use-file-for-fake-audio-capture=fixtures/fake-microphone.wav

This project is closest to a real browser permission and media-device flow.

chromium-mocked-get-user-media injects tests/helpers/mockMicrophone.js before the page loads. The helper replaces navigator.mediaDevices.getUserMedia with a stream generated by Web Audio. This project is best for repeatable CI and monitoring checks because each test controls the microphone profile directly.

Useful commands

npm run setup          # Generate fixtures/fake-microphone.wav
npm run demo           # Serve the demo app on 127.0.0.1:4173
npm test               # Run all Playwright projects
CI=1 npm test          # Run all projects with automation settings
npm run test:headed    # Watch the browser while tests run
npm run screenshots    # Capture README screenshots
npm run checkly:test   # Run the Checkly Playwright check suite locally via npx checkly test
npm run checkly:deploy # Deploy the Checkly Playwright check suite

The server and Playwright config both respect PORT, for example:

PORT=4174 npm run demo
PORT=4174 npm test

Repository layout

app/
  index.html           # Browser demo UI
  app.js               # Microphone request, analyzer, recorder, and test state
  styles.css           # Demo UI styles
docs/screenshots/      # README screenshots generated by npm run screenshots
fixtures/
  fake-microphone.wav  # Generated audio fixture for Chromium fake capture
scripts/
  make-fixtures.js     # Creates the fake microphone WAV fixture
  server.js            # Static localhost server with no runtime dependencies
  capture-screenshots.js
tests/
  fake-microphone.spec.js
  mocked-microphone.spec.js
  helpers/mockMicrophone.js
  helpers/microphoneDemoPage.js
playwright.config.js
checkly.config.js

Notes

The generated WAV fixture is intentionally committed so the fake-device test is reproducible after cloning. You can rebuild it at any time with npm run setup.

The mocked microphone helper is intentionally small and test-local. It avoids app changes while still giving tests precise control over signal strength.

These tests verify that the app can request an audio stream, process audio samples, and produce MediaRecorder chunks. They do not validate physical microphone hardware, operating system device selection, or real-world audio quality.