Catch visual regressions with cross-browser screenshots

SmartUI Visual Regression Skill describes generating visual regression configurations for screenshot comparison on TestMu AI cloud. It covers workflows with Playwright, Selenium, Cypress, and Puppeteer. Examples include taking page snapshots, creating a SmartUI configuration, running test commands through the CLI, and comparing later runs with baseline screenshots.

Use SmartUI when a browser-based project needs visual regression checks across pages or components, especially when responsive behavior or screenshot changes need review. The skill supports Playwright, Selenium, Cypress, and Puppeteer workflows, with screenshots compared to baselines in the LambdaTest SmartUI dashboard. It is intended for visual comparison and approval, not as a replacement for functional assertions in the test suite.

Inputs include the browser test framework, pages or components to capture, browser and viewport choices, render timing, and the test command. The example configuration lists Chrome, Firefox, and Safari plus desktop and mobile viewport sizes, with separate page-render and timeout values. The output is a set of screenshots compared against stored baselines, with differences shown for review.

The approval workflow starts by creating baseline screenshots. Later runs compare new screenshots with those baselines, and the dashboard highlights differences. Reviewers approve or reject changes in the LambdaTest SmartUI dashboard; approved screenshots become the new baseline. This review step helps distinguish intended UI changes from regressions.

The guide connects SmartUI CLI and SDK patterns with Playwright, Selenium, Cypress, Puppeteer, and Storybook. The Playwright example uses the SmartUI snapshot helper after navigating to pages. CLI examples create a configuration and execute a test command; the Storybook command runs a configured Storybook URL. Selenium examples include SmartUI screenshot calls and LambdaTest remote browser capabilities.

For a local development dependency, Install with:

npm install @lambdatest/smartui-cli --save-dev

The source distinguishes CLI authentication using a project token from Selenium or Playwright cloud access using LambdaTest credentials. Keep those values in environment variables and do not commit them. Advanced debugging, CI/CD integration, and further practices are referred to in a separate playbook.

Frontend developers and QA engineers using browser automation can use this skill to establish a repeatable visual comparison workflow. It is useful when a team needs baseline review, responsive viewport coverage, or a way to inspect screenshot differences in a cloud dashboard.

The configuration patterns also address common sources of noisy comparisons. Include multiple viewport sizes to expose responsive issues, wait for rendering before capturing a page, and limit snapshots to key pages or components. The example uses waitForPageRender and waitForTimeout settings for timing. Storybook can be run through the SmartUI CLI at a local Storybook URL with the configuration file. For cloud authentication, the CLI uses a project token; Selenium or Playwright cloud access uses LambdaTest account credentials. Keep these values in environment variables rather than committing them.