Für Webanwendungen
Integrieren Sie Ihre WebdriverIO-Tests mit Percy
Vor der Integration können Sie Percys Beispiel-Tutorial für WebdriverIO erkunden. Integrieren Sie Ihre automatisierten WebdriverIO-Tests mit BrowserStack Percy. Hier ist ein Überblick über die Integrationsschritte:
Schritt 1: Erstellen eines Percy-Projekts
Melden Sie sich bei Percy an. Erstellen Sie in Percy ein Projekt vom Typ "Web" und benennen Sie es. Nach der Erstellung generiert Percy ein Token. Notieren Sie sich dieses. Sie müssen es im nächsten Schritt als Umgebungsvariable festlegen.
Für Details zur Erstellung eines Projekts, siehe Erstellen eines Percy-Projekts.
Schritt 2: Setzen des Projekt-Tokens 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: Installation der Percy-Abhängigkeiten
Installieren Sie die erforderlichen Komponenten, um die Integrationsumgebung für Ihre Testsuite einzurichten.
Um die Abhängigkeiten zu installieren, führen Sie den folgenden Befehl aus:
npm install --save-dev @percy/cli @percy/webdriverio
Schritt 4: Aktualisieren Ihres Testskripts
Importieren Sie die Percy-Bibliothek, um die Methoden und Attribute zu verwenden, die für Screenshots erforderlich sind. 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
Um mehr zu erfahren, siehe 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 es vorziehen, Ihre Tests mit IDE-Ausführungsoptionen zu starten, 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 zur Umgebungsvariable
- Integration mit BrowserStack SDK, wenn Sie BrowserStack Automate verwenden.
| Ressource | Beschreibung |
|---|---|
| Offizielle Dokumentation | Percy's WebdriverIO-Dokumentation |
| Beispiel-Build - Tutorial | Percy's WebdriverIO-Tutorial |
| Offizielles Video | Visuelles Testen mit Percy |
| Blog | Einführung in Visual Reviews 2.0 |
