SmartUI

LambdaTest SmartUI erbjuder AI-driven visuell regressionstestning för dina WebdriverIO-tester. Det tar skärmdumpar, jämför dem mot baslinjer och markerar visuella skillnader med intelligenta jämförelsealgorithmer.

Setup

Skapa ett SmartUI-projekt

Logga in på LambdaTest och navigera till SmartUI Projects för att skapa ett nytt projekt. Välj Web som plattform och konfigurera ditt projektnamn, godkännare och taggar.

Konfigurera inloggningsuppgifter

Hämta dina LT_USERNAME och LT_ACCESS_KEY från LambdaTest-instrumentpanelen och ställ in dem som miljövariabler:

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

Installera SmartUI SDK

npm install @lambdatest/wdio-driver

Konfigurera WebdriverIO

Uppdatera din 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
    }
  }]
}

Usage

Använd browser.execute('smartui.takeScreenshot') för att ta skärmdumpar:

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

Kör tester

npx wdio wdio.conf.js

Se resultaten i SmartUI Dashboard.

Advanced Options

Ignorera element

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

Välj specifika områden

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

Resources

Resource	Description
Official Documentation	SmartUI Documentation
SmartUI Dashboard	Access your SmartUI projects and builds
Advanced Settings	Configure comparison sensitivity
Build Options	Advanced build configuration