Migrate UI integration tests from Puppeteer to Playwright - #9735
Merged
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #9735 +/- ##
========================================
Coverage 83.57% 83.57%
========================================
Files 640 640
Lines 38698 38698
Branches 3421 3493 +72
========================================
Hits 32342 32342
+ Misses 6209 5966 -243
- Partials 147 390 +243 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
✅ Deploy Preview for treeherder ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
camd
marked this pull request as ready for review
July 31, 2026 17:20
camd
force-pushed
the
playwright-migration
branch
from
July 31, 2026 17:51
97eaf06 to
1024bc4
Compare
gmierz
reviewed
Aug 3, 2026
| ### Running the Playwright integration tests | ||
|
|
||
| Integration tests are useful when testing higher level components that would be hard to set up with fetch mock. | ||
| They are run with [Playwright] (see `playwright.config.js`) in Firefox, which starts the dev server |
Collaborator
There was a problem hiding this comment.
Could we add a small note somewhere in these docs to specify that the firefox being used is a custom built one from playwright?
camd
force-pushed
the
playwright-migration
branch
2 times, most recently
from
August 12, 2026 16:22
332fea9 to
8721dda
Compare
camd
force-pushed
the
playwright-migration
branch
from
August 16, 2026 03:29
8721dda to
bc83686
Compare
Replace the jest-puppeteer + Polly.js integration test setup with @playwright/test: - Add playwright.config.js; the config starts (or reuses) the dev server on port 5000, matching the previous jest-puppeteer behavior. - Convert the logviewer suite to a Playwright spec, keeping the fetch-mocking approach via page.addInitScript. Selectors and labels are updated to the current toolbar UI (classic-log-toolbar-label replaced the old copy-highlight bar). - Convert the graphs view suite to a Playwright spec. The existing Polly HAR recordings are replayed with page.routeFromHAR; the performance/summary responses are served by signature because the query params have changed since the HAR was recorded. - Remove puppeteer, jest-puppeteer, jest-environment-puppeteer, the @pollyjs packages and setup-polly-jest, along with jest.integration.config.js and jest-puppeteer.config.js. - Update docs/testing.md and biome.json accordingly.
Cover the basic Jobs view workflows end to end: rendering the push list, selecting a job and verifying the details panel opens with the job's details and the selectedTaskRun URL param, and narrowing the displayed jobs with the quick filter. API responses are served from the JSON fixtures in tests/ui/mock/ via page.route, so the tests run deterministically without a backend.
Firefox is the preferred browser for this project. Switch the Playwright project from Chromium to Firefox and update docs/testing.md accordingly. Granting clipboard permissions is a Chromium-only API that throws on Firefox, so the logviewer copy test now only grants them when running in Chromium; Playwright's Firefox permits the clipboard write in tests without an explicit grant.
The rebase onto origin/master conflicted in pnpm-lock.yaml. Took the target branch's version as a starting point and regenerated the lockfile with `pnpm install --no-frozen-lockfile` to ensure it is consistent with package.json (playwright/puppeteer/polly changes from this branch plus master's zustand 5.0.15 bump). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a javascript-integration-tests job that installs and caches the Playwright Firefox build, runs pnpm test:integration (Playwright's webServer starts the dev server itself), and uploads the JUnit results plus the HTML report/traces as artifacts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
camd
force-pushed
the
playwright-migration
branch
from
August 18, 2026 14:18
bc83686 to
c7cc2a8
Compare
gmierz
approved these changes
Aug 19, 2026
gmierz
left a comment
gmierz
left a comment
Collaborator
There was a problem hiding this comment.
r+ thanks for making this change!
gopar
pushed a commit
to gopar/treeherder
that referenced
this pull request
Aug 24, 2026
* Migrate UI integration tests from Puppeteer to Playwright Replace the jest-puppeteer + Polly.js integration test setup with @playwright/test: - Add playwright.config.js; the config starts (or reuses) the dev server on port 5000, matching the previous jest-puppeteer behavior. - Convert the logviewer suite to a Playwright spec, keeping the fetch-mocking approach via page.addInitScript. Selectors and labels are updated to the current toolbar UI (classic-log-toolbar-label replaced the old copy-highlight bar). - Convert the graphs view suite to a Playwright spec. The existing Polly HAR recordings are replayed with page.routeFromHAR; the performance/summary responses are served by signature because the query params have changed since the HAR was recorded. - Remove puppeteer, jest-puppeteer, jest-environment-puppeteer, the @pollyjs packages and setup-polly-jest, along with jest.integration.config.js and jest-puppeteer.config.js. - Update docs/testing.md and biome.json accordingly. * Add Playwright integration tests for the Jobs view Cover the basic Jobs view workflows end to end: rendering the push list, selecting a job and verifying the details panel opens with the job's details and the selectedTaskRun URL param, and narrowing the displayed jobs with the quick filter. API responses are served from the JSON fixtures in tests/ui/mock/ via page.route, so the tests run deterministically without a backend. * Run Playwright integration tests in Firefox by default Firefox is the preferred browser for this project. Switch the Playwright project from Chromium to Firefox and update docs/testing.md accordingly. Granting clipboard permissions is a Chromium-only API that throws on Firefox, so the logviewer copy test now only grants them when running in Chromium; Playwright's Firefox permits the clipboard write in tests without an explicit grant. * fix: regenerate pnpm-lock.yaml after rebase conflict resolution The rebase onto origin/master conflicted in pnpm-lock.yaml. Took the target branch's version as a starting point and regenerated the lockfile with `pnpm install --no-frozen-lockfile` to ensure it is consistent with package.json (playwright/puppeteer/polly changes from this branch plus master's zustand 5.0.15 bump). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Run Playwright integration tests in CircleCI Adds a javascript-integration-tests job that installs and caches the Playwright Firefox build, runs pnpm test:integration (Playwright's webServer starts the dev server itself), and uploads the JUnit results plus the HTML report/traces as artifacts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the jest-puppeteer + Polly.js integration test setup with Playwright (
@playwright/test), and adds new integration coverage for the Jobs view.Migration
playwright.config.js: new root config. Runs specs intests/ui/integration/**/*.spec.jsin Firefox (the preferred browser for this project) and startsBROWSER=none pnpm starton port 5000 automatically (or reuses an already-running dev server), matching the previous jest-puppeteer behavior.pnpm test:integrationnow runsplaywright test.logviewer.spec.js: keeps the fetch-mocking approach (page.addInitScriptreplacesevaluateOnNewDocument), converted to locators and web-first assertions. Selectors/labels updated to the current toolbar UI (.classic-log-toolbar-labelreplaced the old copy-highlight bar, which the old suite still referenced).graphs_view.spec.js: Polly is dropped entirely. The existing Polly recordings are already HAR files, so they are replayed directly withpage.routeFromHAR; unmatched requests fall through to the dev-server proxy (equivalent to Polly'srecordIfMissingpassthrough). Theperformance/summaryresponses are served bysignatureparam through a custom route because the app added areplicatesquery param after the recordings were captured, so exact-URL HAR matching can no longer hit them.puppeteer,jest-puppeteer,jest-environment-puppeteer, all@pollyjs/*packages,setup-polly-jest,jest.integration.config.js,jest-puppeteer.config.js, and the integrationtest-setup.js. Also updateddocs/testing.md,biome.json(removed the puppeteer globals), and.gitignore(Playwright artifacts).New Jobs view tests
tests/ui/integration/job-view/jobs_view.spec.jscovers the basic Jobs view workflows end to end:selected-jobstyling,selectedTaskRunURL param, and the details panel opening with the job's detailssearchStrURL param)API responses are served via
page.routefrom the same JSON fixtures the Jest unit tests use (tests/ui/mock/), so the tests are deterministic and backend-independent.Firefox notes
Granting clipboard permissions is a Chromium-only Playwright API and throws on Firefox, so the logviewer copy test only grants them when running in Chromium; Playwright's Firefox (a Playwright custom, patched version of Firefox) permits the clipboard write in tests without an explicit grant.
By this, I mean: Copy / Paste won't work for Playwright with the "normal" headless Firefox. But Playwright has their own "patched" version that makes it work. So it's seamless, and a non-issue. Just calling out the distinction.
Test plan
pnpm test:integration— 19 tests pass (~5s)pnpm test— 1034 unit tests passpnpm lint/pnpm markdownlint— clean (no new diagnostics)Running locally
pnpm install npx playwright install firefox # one-time browser download pnpm test:integration