SmartUI

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

Setup

Erstellen Sie ein SmartUI-Projekt

Melden Sie sich an bei TestMu AI (ehemals 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 Ihre LT_USERNAME und LT_ACCESS_KEY vom TestMu AI (ehemals LambdaTest) Dashboard und setzen Sie sie als Umgebungsvariablen:

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

Installieren Sie SmartUI SDK

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	Konfigurieren der Vergleichsempfindlichkeit
Build-Optionen	Erweiterte Build-Konfiguration