SmartUI

LambdaTest SmartUI bietet KI-gestützte visuelle Regressionstests für Ihre WebdriverIO-Tests. Es erfasst Screenshots, vergleicht sie mit Baselines und hebt visuelle Unterschiede mit intelligenten Vergleichsalgorithmen hervor.

Setup

Erstellen Sie ein SmartUI-Projekt

Melden Sie sich an bei LambdaTest und navigieren Sie zu SmartUI Projects, um ein neues Projekt zu erstellen. Wählen Sie Web als Plattform und konfigurieren Sie Ihren Projektnamen, Genehmiger und Tags.

Anmeldedaten einrichten

Holen Sie sich Ihren LT_USERNAME und LT_ACCESS_KEY vom LambdaTest-Dashboard und legen Sie sie als Umgebungsvariablen fest:

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

SmartUI SDK installieren

npm install @lambdatest/wdio-driver

WebdriverIO konfigurieren

Aktualisieren Sie Ihre 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
    }
  }]
}

Verwendung

Verwenden Sie browser.execute('smartui.takeScreenshot'), um Screenshots zu erfassen:

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']
      }
    });
  });
});

Tests ausführen

npx wdio wdio.conf.js

Sehen Sie sich die Ergebnisse im SmartUI Dashboard an.

Erweiterte Optionen

Elemente ignorieren

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

Bestimmte Bereiche auswählen

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

Ressourcen

Ressource	Beschreibung
Offizielle Dokumentation	SmartUI Dokumentation
SmartUI Dashboard	Zugriff auf Ihre SmartUI-Projekte und Builds
Erweiterte Einstellungen	Vergleichsempfindlichkeit konfigurieren
Build-Optionen	Erweiterte Build-Konfiguration