smartui-skill – skill Thiết kế & UI cho agent AI

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.