smartui-skill

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
}

Storybook と SmartUI

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

承認ワークフロー

1. 初回の実行でベースラインのスクリーンショットが作成されます
2. 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>
Storybook	npx smartui storybook <url>
ダッシュボード	https://smartui.lambdatest.com

高度なパターン

高度なパターン、デバッグガイド、CI/CD 連携、ベストプラクティスについては、 reference/playbook.md を参照してください。