SmartUI Visual Regression Skill

When to Use

Use this skill when you need generates SmartUI visual regression test configurations for screenshot comparison on TestMu AI cloud. Framework-agnostic — works with Playwright, Selenium, Cypress, Puppeteer. Use when user mentions "SmartUI", "visual regression", "screenshot comparison", "visual testing". Triggers on:...

Core Patterns

Playwright + SmartUI SDK

const { chromium } = require('playwright');
const { smartuiSnapshot } = require('@lambdatest/smartui-cli');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await smartuiSnapshot(page, 'Homepage');

  await page.goto('https://example.com/login');
  await smartuiSnapshot(page, 'Login Page');

  await browser.close();
})();

Selenium + SmartUI

// Take SmartUI screenshot
((JavascriptExecutor) driver).executeScript(
    "smartui.takeScreenshot=Login Page"
);

CLI Execution

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

# Configure
npx smartui config:create smartui.config.json

# Execute
npx smartui exec -- node test.js
# or with Playwright
npx smartui exec -- npx playwright test

smartui.config.json

{
  "web": {
    "browsers": ["chrome", "firefox", "safari"],
    "viewports": [[1920, 1080], [1366, 768], [375, 812]]
  },
  "waitForPageRender": 5000,
  "waitForTimeout": 1000
}

SmartUI with Storybook

npx smartui storybook http://localhost:6006 --config smartui.config.json

Approval Workflow

First run creates baseline screenshots
Subsequent runs compare against baseline
Differences highlighted in dashboard
Approve/reject changes in LambdaTest SmartUI dashboard
Approved screenshots become new baseline

Anti-Patterns

Bad	Good	Why
No viewport config	Multiple viewports	Responsive issues
No wait for render	`waitForPageRender`	Incomplete screenshots
Screenshot everything	Key pages/components	Noise reduction
No approval process	Review diffs in dashboard	Catch regressions

Cloud Authentication

Set environment variables:

export PROJECT_TOKEN="your-smartui-project-token"   # From SmartUI dashboard
export LT_USERNAME="your-username"                   # For Selenium/Playwright cloud
export LT_ACCESS_KEY="your-access-key"               # For Selenium/Playwright cloud

CLI approach (uses PROJECT_TOKEN):

npx smartui exec -- npx playwright test

Selenium Cloud approach (uses LT_USERNAME/LT_ACCESS_KEY):

// Capabilities include SmartUI options
HashMap<String, Object> ltOptions = new HashMap<>();
ltOptions.put("user", System.getenv("LT_USERNAME"));
ltOptions.put("accessKey", System.getenv("LT_ACCESS_KEY"));
ltOptions.put("build", "SmartUI Build");
ltOptions.put("smartUI.project", "My SmartUI Project");
ChromeOptions options = new ChromeOptions();
options.setCapability("LT:Options", ltOptions);
WebDriver driver = new RemoteWebDriver(
    new URL("https://hub.lambdatest.com/wd/hub"), options);

Quick Reference

Task	Command
Install	`npm install @lambdatest/smartui-cli`
Init config	`npx smartui config:create smartui.config.json`
Run	`npx smartui exec -- <test command>`
Storybook	`npx smartui storybook <url>`
Dashboard	`https://smartui.lambdatest.com`

Deep Patterns

For advanced patterns, debugging guides, CI/CD integration, and best practices, see reference/playbook.md.

Limitations

Use this skill only when the task clearly matches its upstream source and local project context.
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

smartui-skill