mcpField
S
smartui-skill

smartui-skill

github.com/lambdatest测试与质量384231 次安装2 周前更新
代码仓库

关于 smartui-skill

面向使用 LambdaTest SmartUI 进行视觉回归测试的技能指南，涵盖 Playwright 和 Selenium、命令行运行、截图基线及差异审查。

主要功能

  1. 01Playwright 与 Selenium 用法
  2. 02命令行配置与运行
  3. 03浏览器和视口配置
  4. 04基线比较与审批
  5. 05Storybook 截图流程

适用场景

  1. 01比较不同测试运行的截图
  2. 02检查多个视口下的响应式布局
  3. 03在 SmartUI 控制面板审查视觉变化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lambdatest/agent-skills --skill smartui-skill

安装后在 Claude Code 中输入/smartui-skill确认已加载。

附带文件reference/playbook.md

详细介绍

SmartUI 视觉回归技能

核心模式

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 执行
# Install
npm install @lambdatest/smartui-cli@latest --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 与 Storybook
npx smartui storybook http://localhost:6006 --config smartui.config.json
审批工作流
  1. 首次运行会创建基线截图
  2. 后续运行会与基线进行比较
  3. 差异会在仪表板中高亮显示
  4. 在 LambdaTest SmartUI 仪表板中批准或拒绝更改
  5. 已批准的截图会成为新的基线
反模式
不佳做法良好做法原因
不配置视口配置多个视口响应式问题
不等待渲染完成waitForPageRender截图不完整
对所有内容截图针对关键页面/组件减少噪声
没有审批流程在仪表板中审查差异捕获回归问题
云端身份验证

设置环境变量：

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 方式（使用 PROJECT_TOKEN）：

npx smartui exec -- npx playwright test

Selenium 云端方式（使用 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);

快速参考

任务命令
安装npm install @lambdatest/smartui-cli@latest
初始化配置npx smartui config:create smartui.config.json
运行npx smartui exec -- <test command>
Storybooknpx smartui storybook <url>
仪表板https://smartui.lambdatest.com

深入模式

有关高级模式、调试指南、CI/CD 集成和最佳实践， 请参阅 reference/playbook.md。

评论

支持 Markdown