Habilidade de Regressão Visual SmartUI

Quando Usar

Use esta habilidade quando precisar gerar configurações de teste de regressão visual SmartUI para comparação de capturas de tela na nuvem TestMu AI. Independente de framework — funciona com Playwright, Selenium, Cypress, Puppeteer. Use quando o usuário mencionar "SmartUI", "regressão visual", "comparação de capturas de tela", "teste visual". Dispara em:...

Padrões Principais

Playwright + SDK SmartUI

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

Execução CLI

# Install
npm install @lambdatest/smartui-cli --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 com Storybook

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

Fluxo de Aprovação

1. A primeira execução cria capturas de tela de linha de base
2. Execuções subsequentes comparam com a linha de base
3. Diferenças destacadas no painel
4. Aprove/rejeite alterações no painel SmartUI do LambdaTest
5. Capturas de tela aprovadas se tornam a nova linha de base

Anti-Padrões

Autenticação na Nuvem

Defina variáveis de ambiente:

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

Abordagem CLI (usa PROJECT_TOKEN):

npx smartui exec -- npx playwright test

Abordagem Selenium Cloud (usa 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);

Referência Rápida

Padrões Avançados

Para padrões avançados, guias de depuração, integração CI/CD e melhores práticas, consulte reference/playbook.md.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem upstream e ao contexto do projeto local.
• Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
• Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.