Feat/playwright panel screenshots#1279
Draft
acke wants to merge 3 commits into
Draft
Conversation
Wires Playwright as an opt-in JS browser test suite alongside the existing
node --test suite. Two specs:
- tree-runtime.playwright.spec.mjs: behavior tests for the tree view
runtime — IDE placeholder substitution, issue click → bridge call,
product row expand/collapse — exercised in real Chromium against the
actual domain/ide/treeview/template/tree.js.
- panel-screenshots.playwright.spec.mjs: visual regression for 7 HTML
panels (tree view, config page, code/oss/iac/secrets suggestion, scan
summary) × 4 IDE themes (vscode, intellij, visualStudio, eclipse).
Baselines committed under js-tests/screenshots/ as Darwin PNGs.
scripts/panel-fixtures/main.go is a single Go program driven by --panel
that builds one canonical example issue/state per panel and renders via
the real renderers in infrastructure/{code,oss,iac,secrets} and
domain/scanstates. Wired into a panel-fixtures Makefile target consumed
by test-js / test-js-browser.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
acke
force-pushed
the
feat/playwright-panel-screenshots
branch
from
f5780e0 to
d20536a
Compare
…ttern The viewport screenshot from `screenshot: "on"` already lands in the HTML report; the explicit testInfo.attach was producing a second, larger PNG per test. Visual regression continues to compare full-page via toHaveScreenshot, and failure attachments (actual/expected/diff) still show full-page. Aligns with reports-ui's playwright setup. Co-Authored-By: Claude Opus 4.7 (1M context) <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
1 participant
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.
Description
Adds Playwright as an opt-in JS browser test suite alongside the existing
node --testsuite — and uses it as a visual-regression harness for the seven HTML panels snyk-ls renders.Two specs:
tree-runtime.playwright.spec.mjs— behavior tests fordomain/ide/treeview/template/tree.jsrunning in real headless Chromium: IDE placeholder substitution (vscode/intellij/visualStudio/eclipse variants), issue click →__ideExecuteCommand__bridge call, product row expand/collapse.panel-screenshots.playwright.spec.mjs— visual regression for 7 panels × 4 IDE themes = 28 tests: tree view, config page, code/oss/iac/secrets suggestion, scan summary. Each test renders the real panel HTML, applies that IDE's body bg/fg, screenshots full-page, and compares against committed baselines viaexpect(page).toHaveScreenshot()(threshold: 0.2,maxDiffPixelRatio: 0.02).Baselines (
js-tests/screenshots/) — 28 Darwin PNGs (~1.1 MB total) committed. Per-platform suffix (<name>-{darwin,linux}.png) so per-OS font rendering doesn't cause false positives. CI Linux baselines need a one-time generation (see README) when wiring this intobuild.yaml.scripts/panel-fixtures/main.go— single Go program driven by--panel <name>that builds one canonical example issue/state per panel and renders via the real renderers ininfrastructure/{code,oss,iac,secrets}anddomain/scanstates. Wired into apanel-fixturesMakefile target consumed bytest-js/test-js-browser.Opt-in: the Playwright suite requires a Chromium download (~150 MB), so it lives behind:
make test-js-browser-setup— one-time Chromium installmake test-js-browser— run the suitemake test-js-all— node tests + PlaywrightThe default
make testpath is unchanged. CI is not wired to run the Playwright suite yet —js-tests/README.mdincludes a sketch for ajs-browser-testsjob that could be added to.github/workflows/build.yaml.How to view results: after a run,
npx playwright show-reportserves an HTML report with each test's full-page screenshot attached.Checklist
make generate) — N/A, no Go code that requires generationmake lint-fix) —make test-js(ES5 lint) passesjs-tests/README.mddocuments setup, run, baseline workflow, and CI sketch@playwright/testadded as ajs-testsdevDependency only, not a runtime dep