SmartUI

TestMu AI (Anciennement LambdaTest) SmartUI fournit des tests de régression visuelle alimentés par l'IA pour vos tests WebdriverIO. Il capture des captures d'écran, les compare aux références de base et met en évidence les différences visuelles avec des algorithmes de comparaison intelligents.

Configuration

Créer un projet SmartUI

Connectez-vous à TestMu AI (Anciennement LambdaTest) et naviguez vers SmartUI Projects pour créer un nouveau projet. Sélectionnez Web comme plateforme et configurez le nom de votre projet, les approbateurs et les tags.

Configurer les identifiants

Obtenez votre LT_USERNAME et LT_ACCESS_KEY depuis le tableau de bord TestMu AI (Anciennement LambdaTest) et définissez-les comme variables d'environnement :

export LT_USERNAME="<your username>"
export LT_ACCESS_KEY="<your access key>"

Installer SmartUI SDK

npm install @lambdatest/wdio-driver

Configurer WebdriverIO

Mettez à jour votre wdio.conf.js :

exports.config = {
  user: process.env.LT_USERNAME,
  key: process.env.LT_ACCESS_KEY,

  capabilities: [{
    browserName: 'chrome',
    browserVersion: 'latest',
    'LT:Options': {
      platform: 'Windows 10',
      build: 'SmartUI Build',
      name: 'SmartUI Test',
      smartUI.project: '<Your Project Name>',
      smartUI.build: '<Your Build Name>',
      smartUI.baseline: false
    }
  }]
}

Utilisation

Utilisez browser.execute('smartui.takeScreenshot') pour capturer des captures d'écran :

describe('WebdriverIO SmartUI Test', () => {
  it('should capture screenshot for visual testing', async () => {
    await browser.url('https://webdriver.io');

    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage Screenshot'
    });

    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage with Options',
      ignoreDOM: {
        id: ['dynamic-element-id'],
        class: ['ad-banner']
      }
    });
  });
});

Exécuter les tests

npx wdio wdio.conf.js

Consultez les résultats dans le SmartUI Dashboard.

Options avancées

Ignorer des éléments

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Ignore Dynamic Elements',
  ignoreDOM: {
    id: ['element-id'],
    class: ['dynamic-class'],
    xpath: ['//div[@class="ad"]']
  }
});

Sélectionner des zones spécifiques

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Compare Specific Area',
  selectDOM: {
    id: ['main-content']
  }
});

Ressources

Ressource	Description
Documentation officielle	Documentation SmartUI
Tableau de bord SmartUI	Accédez à vos projets et builds SmartUI
Paramètres avancés	Configurer la sensibilité de comparaison
Options de build	Configuration avancée des builds