Skip to content

NXT-14655 [POC] investigate screenshot tests using Playwright#366

Open
dan-ichim-lgp wants to merge 22 commits into
developfrom
feature/NXT-14655
Open

NXT-14655 [POC] investigate screenshot tests using Playwright#366
dan-ichim-lgp wants to merge 22 commits into
developfrom
feature/NXT-14655

Conversation

@dan-ichim-lgp

@dan-ichim-lgp dan-ichim-lgp commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Checklist

  • I have read and understand the contribution guide
  • A CHANGELOG entry is included
  • At least one test case is included for this feature or bug fix
  • Documentation was added or is not needed
  • This is an API breaking change

Issue Resolved / Feature Added

NXT-14655 — Add a Playwright-based screenshot testing suite alongside the existing WebdriverIO runner (npm run test-ss).

Playwright reuses the same scenario source (tests/screenshot/apps/components/), build output (tests/screenshot/dist/), and case indices (component + testId) as WDIO. It provides an alternative runner with toHaveScreenshot, component-level scripts, benchmarking, and validated Jenkins CI integration (companion PR on build-scripts: enact-playwright-tests.sh chained from enact-screenshot-tests.sh).

Resolution

Added tests/screenshot/playwright/ — config, 27 spec files (9× Default, 9× HighContrast, 9× Light), global setup/teardown, utilities, and developer guide.
Added npm scripts: test-playwright, test-playwright:update, test-playwright:report, test-playwright:component, test-ss:component, benchmark-screenshots, prepare-playwright.
Added helper scripts under tests/screenshot/scripts/ for full-suite and single-component runs (Playwright and WDIO) with optional --parallel.
Playwright serves dist/ on port 4568 (WDIO stays on 4567) so both can coexist locally.
Snapshot paths follow the same naming convention as WDIO reference images (getScreenshotName).
CI tuning: 120s test timeout, 60s navigation/action timeouts, 2 retries in CI; WDIO-aligned page ready (goto → 200ms → fonts.ready); shard coverage validation in global-teardown via shard-registry.js.
Jenkins validation: full suite passed on CI (13,983 tests, 5 workers / 5 instances, ~1h12m). Requires companion build-scripts PR for the Jenkins job.

Additional Considerations

Links

NXT-14655

Comments

Enact-DCO-1.0-Signed-off-by: Dan Ichim (dan.ichim@lgepartner.com)

@dan-ichim-lgp dan-ichim-lgp self-assigned this Jun 4, 2026
@codecov

codecov Bot commented Jun 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.07%. Comparing base (4f0b660) to head (f55a96f).

Additional details and impacted files
@@           Coverage Diff            @@
##           develop     #366   +/-   ##
========================================
  Coverage    82.07%   82.07%           
========================================
  Files          153      153           
  Lines         7507     7507           
  Branches      2262     2262           
========================================
  Hits          6161     6161           
  Misses        1041     1041           
  Partials       305      305           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread tests/screenshot/playwright/README.md Outdated
Comment thread tests/screenshot/playwright/utils/limestone-page.js
Comment thread tests/screenshot/playwright/utils/run-screenshot-tests.js
Comment thread tests/screenshot/playwright/global-setup.js Outdated
Comment thread tests/screenshot/playwright/global-teardown.js Outdated
Comment thread tests/screenshot/scripts/run-playwright-component.mjs Outdated
@daniel-stoian-lgp

Copy link
Copy Markdown
Contributor
  1. fix logic when dist folder does not exist - still not working

  2. when there are no snapshots, the logic should be to set current test results as snapshots automatically, without the need to set --update flag. wdio has this logic. we could use --update just to force current run as snapshot, without caring if there are any existing snapshots or not

Now there is an (doumented in ReadMe, i know) error message:

Error: A snapshot doesn't exist at C:\Users\daniel.stoian\Desktop\LGE\limestone\tests\screenshot\playwright\snapshots\Button-Limestone-click-me-9548aab2a7a8a5618724bc3b507b4362.png, writing actual.
  1. component and spec should be an argument given to the test-playwright script.
    At this moment, the setup runs only tests for Default spec.
    Add option to choose spec.
    The default run npm run test-playwright should run all specs on all components ;
    The run npm run test-playwright -- --component Button should run all specs on components that contain Button on their name ;
    The run npm run test-playwright -- --spec Light should run only Light specs on all components.
    There can be combination of spec and component npm run test-playwright -- --component Button --spec Light

  2. --skip-build flag from readme does not do anything to the test execution at the moment. please wire it up

  3. add information to show test execution time when playwright tests are ran, not just when comparing with wdio

Comment thread tests/screenshot/scripts/spawn-playwright.mjs Outdated
Comment thread tests/screenshot/playwright/global-setup.js
Comment thread tests/screenshot/playwright/global-setup.js Outdated
Comment thread tests/screenshot/scripts/run-component-wdio.mjs
Comment thread tests/screenshot/playwright/static-server.js Outdated
Comment thread tests/screenshot/playwright/utils/shard-registry.js Outdated
Comment thread tests/screenshot/playwright/utils/run-screenshot-tests.js Outdated
Comment thread tests/screenshot/playwright/utils/run-screenshot-tests.js Outdated
Comment thread tests/screenshot/scripts/parse-component-args.mjs Outdated
Comment thread tests/screenshot/playwright/paths.js
Comment thread tests/screenshot/playwright/static-server.js Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants