smartui-skill – Design & UI skill for AI agents

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/playwright-driver');

(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 @lambdatest/playwright-driver --save-dev

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

# Execute
npx smartui exec node test.js --config smartui.config.json
# For a Playwright Test runner, check the installed CLI help for argument
# forwarding and pass the SmartUI config separately from playwright.config.js.

The following web viewport entries are widths for full-page captures, not width/height pairs. Keep the SmartUI config path explicit when running the CLI.

smartui.config.json

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

SmartUI with Storybook

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

Approval Workflow

1. First run creates baseline screenshots

2. Subsequent runs compare against baseline

3. Differences highlighted in dashboard

4. Approve/reject changes in LambdaTest SmartUI dashboard

5. 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

Cloud runs disclose captured page content, screenshots and possibly assets to the provider. Use authorized test data, redact secrets/personal data, confirm cloud usage and cost, and load credentials from a secret store or environment without printing them. Do not approve new baselines automatically: inspect differences first.

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 node test.js --config smartui.config.json

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 the [upstream skill tree](https://github.com/LambdaTest/agent-skills/tree/main/smartui-skill); reference/playbook.md is not bundled here. The [official Playwright SDK guide](https://www.testmuai.com/support/docs/smartui-playwright-sdk/) documents the driver package separately from the CLI. Generate configuration with the installed CLI and validate its schema rather than assuming this illustrative config works across versions.

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.