För Webbapplikation

Integrera dina WebdriverIO-tester med Percy

Innan integration kan du utforska Percy's exempelbyggtutorial för WebdriverIO. Integrera dina WebdriverIO automatiserade tester med BrowserStack Percy, här är en översikt över integrationsstegen:

Steg 1: Skapa ett Percy-projekt

Logga in på Percy. I Percy, skapa ett projekt av typen Web och namnge projektet. Efter att projektet har skapats genererar Percy en token. Anteckna den. Du måste använda den för att ställa in din miljövariabel i nästa steg.

För detaljer om att skapa ett projekt, se Skapa ett Percy-projekt.

Steg 2: Ställ in projekttoken som en miljövariabel

Kör följande kommando för att ställa in PERCY_TOKEN som en miljövariabel:

export PERCY_TOKEN="<your token here>"   // macOS eller Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

Steg 3: Installera Percy-beroenden

Installera de komponenter som krävs för att etablera integrationsmiljön för din testsvit.

För att installera beroendena, kör följande kommando:

npm install --save-dev @percy/cli @percy/webdriverio

Steg 4: Uppdatera ditt testskript

Importera Percy-biblioteket för att använda metoden och attributen som krävs för att ta skärmdumpar. Följande exempel använder funktionen percySnapshot() i asynkront läge:

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriver.io');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

När du använder WebdriverIO i standalone-läge, tillhandahåll browserobjektet som det första argumentet till percySnapshot-funktionen:

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

Snapshotmetodens argument är:

percySnapshot(name[, options])

Standalone-läge

percySnapshot(browser, name[, options])

• browser (krävs) - WebdriverIO-browserobjektet
• name (krävs) - Snapshot-namnet; måste vara unikt för varje snapshot
• options - Se konfigurationsalternativ per snapshot

För att lära dig mer, se Percy snapshot.

Steg 5: Kör Percy

Kör dina tester med kommandot percy exec som visas nedan:

Om du inte kan använda kommandot percy:exec eller föredrar att köra dina tester med IDE-köralternativ, kan du använda kommandona percy:exec:start och percy:exec:stop. För att lära dig mer, besök Kör Percy.

percy exec -- wdio wdio.conf.js

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Besök följande sidor för mer information:

• Integrera dina WebdriverIO-tester med Percy
• Miljövariabelsidan
• Integrera med BrowserStack SDK om du använder BrowserStack Automate.

Resurs	Beskrivning
Officiell dokumentation	Percy's WebdriverIO-dokumentation
Exempelbygge - Handledning	Percy's WebdriverIO-handledning
Officiell video	Visuell testning med Percy
Blogg	Introduktion till Visual Reviews 2.0