SmartUI

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

Configuration

Créer un projet SmartUI

Connectez-vous à LambdaTest et accédez aux Projets SmartUI 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 LambdaTest et définissez-les comme variables d'environnement :

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

Installer le SDK SmartUI

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 Tableau de bord SmartUI.

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