imagesPlaywright Visual Testing

Integrating Playwright Visual Comparison tools with Currents - including Argos, Percy and Applitools.

Native Playwright Visual Comparison

Playwright has a built-in support for Visual Comparisonsarrow-up-right, allowing generation of screenshots and failing a test in case reference screenshots differ from the actual ones.

Here's an example of a test that includes visual comparison:

test('example test', async ({ page }) => { 
  await page.goto('https://playwright.dev'); 
  await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });}
);

Currents automatically detects tests with visual comparison enabled and shows a dedicated widget for the relevant tests:

Current Visual Comparison Widget for Playwright Tests

Playwright Visual Testing with Argos

While Native Playwright Visual Comparison is a good start as a basic tool, a more advanced and dedicated visual testing solution can greatly improve the effectiveness of your testing suite. Our friends at Argosarrow-up-right offer a comprehensive, open-source (and loved) visual testing platform that takes care of the difficult parts of visual testing:

  • stabilization: prevent visual testing flakiness by preventing font and styling changes

  • test across various resolutions: ensuring every detail is captured without missing a thing

  • pull request comments and status checks

Argos is 100% compatible with Playwright Sharding and Currents Reporting + Orchestration, allowing effective and painless CI setup, continuous reporting, debugging with supercharged visual testing.

Argos + Currents Reporter

Argos and Currents natively support Playwright Sharding for parallel CI executions - follow the setup instructionsarrow-up-right and configure both reporters to see the visual testing artifacts reported to Argos and the rest of test results reported to Currents.

chevron-rightPlaywright configurationhashtag
chevron-rightGitHub Actions Workflowhashtag

Argos + Currents Orchestration

Using Argos with Orchestration Setup requires an additional step - notifying Argos after run's completion. This is necessary because Currents Orchestration can have an arbitrary number of CI machines participating in an execution and the allocation of tests to CI machines is dynamic.

circle-info

Requires @currents/playwright 1.6.0+

Currents Orchestration onFinish callback finalizes Parallel Argos build

See the example repositoryarrow-up-right which showcases using GitHub Actions with 3 parallel containers + Currents Orchestration + Argos.

chevron-rightPlaywright Configurationarrow-up-righthashtag

chevron-rightGitHub Actions Workflowarrow-up-right hashtag
chevron-rightCurrents Configurationarrow-up-righthashtag
  • set orchestration.skipReporterInjection to true

  • note the use of onFinish lifecycle hook - the corresponding function will run and receive OrchestrationStatus object that can be used to determine run's completion

Applitools, Percy and other visual testing tools

You can use the same concept to send a "finalize" command to other visual testing tools like Applitools and Percy.

Last updated

Was this helpful?