Für Webanwendungen

Integrieren Sie Ihre WebdriverIO-Tests mit Percy

Vor der Integration können Sie Percys Tutorial für Beispiel-Builds mit WebdriverIO erkunden. Integrieren Sie Ihre WebdriverIO-automatisierten Tests mit BrowserStack Percy. Hier ist ein Überblick über die Integrationsschritte:

Schritt 1: Erstellen Sie ein Percy-Projekt

Melden Sie sich an bei Percy. Erstellen Sie in Percy ein Projekt vom Typ Web und benennen Sie es. Nach der Erstellung generiert Percy ein Token. Notieren Sie es. Sie müssen es verwenden, um Ihre Umgebungsvariable im nächsten Schritt zu setzen.

Weitere Informationen zum Erstellen eines Projekts finden Sie unter Ein Percy-Projekt erstellen.

Schritt 2: Setzen Sie das Projekt-Token als Umgebungsvariable

Führen Sie den folgenden Befehl aus, um PERCY_TOKEN als Umgebungsvariable zu setzen:

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

Schritt 3: Installieren Sie Percy-Abhängigkeiten

Installieren Sie die Komponenten, die für die Einrichtung der Integrationsumgebung für Ihre Testsuite erforderlich sind.

Um die Abhängigkeiten zu installieren, führen Sie den folgenden Befehl aus:

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

Schritt 4: Aktualisieren Sie Ihr Testskript

Importieren Sie die Percy-Bibliothek, um die Methoden und Attribute zu verwenden, die für Screenshots benötigt werden. Das folgende Beispiel verwendet die percySnapshot()-Funktion im asynchronen Modus:

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

Wenn Sie WebdriverIO im Standalone-Modus verwenden, übergeben Sie das Browser-Objekt als erstes Argument an die percySnapshot-Funktion:

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();

Die Argumente der Snapshot-Methode sind:

percySnapshot(name[, options])

Standalone-Modus

percySnapshot(browser, name[, options])

• browser (erforderlich) - Das WebdriverIO-Browser-Objekt
• name (erforderlich) - Der Snapshot-Name; muss für jeden Snapshot eindeutig sein
• options - Siehe Konfigurationsoptionen pro Snapshot

Weitere Informationen finden Sie unter Percy-Snapshot.

Schritt 5: Percy ausführen

Führen Sie Ihre Tests mit dem Befehl percy exec aus, wie unten gezeigt:

Wenn Sie den Befehl percy:exec nicht verwenden können oder Ihre Tests lieber mit IDE-Ausführungsoptionen ausführen möchten, können Sie die Befehle percy:exec:start und percy:exec:stop verwenden. Weitere Informationen finden Sie unter Percy ausführen.

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!

Besuchen Sie die folgenden Seiten für weitere Details:

• Integrieren Sie Ihre WebdriverIO-Tests mit Percy
• Seite zu Umgebungsvariablen
• Integration mit BrowserStack SDK, wenn Sie BrowserStack Automate verwenden.

Ressource	Beschreibung
Offizielle Dokumentation	Percys WebdriverIO-Dokumentation
Beispiel-Build - Tutorial	Percys WebdriverIO-Tutorial
Offizielles Video	Visuelles Testen mit Percy
Blog	Einführung in Visual Reviews 2.0