smartui-skill

用途

smartui-skill 用于生成 SmartUI 视觉回归测试配置，在 TestMu AI 云（LambdaTest SmartUI）上进行截图的对比与回归检测。该技能与测试框架无关，可配合 Playwright、Selenium 等使用，并支持 Storybook 组件截图。

主要能力

截图与对比：在测试流程中采集页面或组件截图，首次运行生成基线，后续运行与基线比较，差异在仪表板中高亮显示。
多浏览器与多视口：通过 smartui.config.json 配置浏览器（如 chrome、firefox、safari）和视口尺寸（如 1920x1080、1366x768、375x812），覆盖响应式场景。
等待控制：提供 waitForPageRender 与 waitForTimeout 等配置，避免截图不完整。
Storybook 支持：可通过 CLI 直接对 Storybook 地址执行截图。
审批工作流：在 LambdaTest SmartUI 仪表板中审核差异，批准后成为新基线。
框架集成：Playwright 使用 @lambdatest/smartui-cli 的 smartuiSnapshot；Selenium 通过 JavascriptExecutor 执行 smartui.takeScreenshot=页面名。

使用方式

安装：npm install @lambdatest/smartui-cli@latest --save-dev
生成配置：npx smartui config:create smartui.config.json
执行测试：
- npx smartui exec -- node test.js
- 或 npx smartui exec -- npx playwright test
Storybook：npx smartui storybook http://localhost:6006 --config smartui.config.json
认证：CLI 方式设置环境变量 PROJECT_TOKEN（来自 SmartUI 仪表板）；Selenium/Playwright 云方式设置 LT_USERNAME 与 LT_ACCESS_KEY，并在 capabilities 中配置 SmartUI 项目等选项。
仪表板：https://smartui.lambdatest.com 查看差异并审批。

配置示例

smartui.config.json：

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

代码模式

Playwright：

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：

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

Selenium 云 capabilities 示例：

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);

适用场景

UI 视觉回归测试，在代码变更后自动检测视觉差异。
需要多浏览器、多视口覆盖的响应式页面验证。
Storybook 组件库的视觉快照测试。
与 CI/CD 集成，在流水线中自动执行视觉对比（进阶模式可参考 reference/playbook.md）。

反模式与限制

常见反模式及修正：不配置视口应改为多视口；不等待渲染应使用 waitForPageRender；无差别截图应只关注关键页面/组件；缺少审批流程应在仪表板中审核差异。

使用限制：需依赖 LambdaTest SmartUI 云服务与有效令牌；具体收费、价格、配额等未在资料中提供；CI/CD 集成与调试指南等进阶内容需参考 reference/playbook.md。