Per Applicazioni Web

Integra i tuoi test WebdriverIO con Percy

Prima dell'integrazione, puoi esplorare il tutorial di build di esempio di Percy per WebdriverIO. Integra i tuoi test automatizzati WebdriverIO con BrowserStack Percy, ecco una panoramica dei passaggi di integrazione:

Step 1: Crea un progetto Percy

Accedi a Percy. In Percy, crea un progetto di tipo Web, quindi dagli un nome. Dopo la creazione del progetto, Percy genera un token. Prendine nota. Dovrai usarlo per impostare la tua variabile di ambiente nel passaggio successivo.

Per i dettagli sulla creazione di un progetto, consulta Crea un progetto Percy.

Step 2: Imposta il token del progetto come variabile di ambiente

Esegui il comando fornito per impostare PERCY_TOKEN come variabile di ambiente:

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

Step 3: Installa le dipendenze Percy

Installa i componenti necessari per stabilire l'ambiente di integrazione per la tua suite di test.

Per installare le dipendenze, esegui il seguente comando:

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

Step 4: Aggiorna il tuo script di test

Importa la libreria Percy per utilizzare il metodo e gli attributi necessari per scattare screenshot. Il seguente esempio utilizza la funzione percySnapshot() in modalità asincrona:

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

Quando utilizzi WebdriverIO in modalità standalone, fornisci l'oggetto browser come primo argomento alla funzione percySnapshot:

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

Gli argomenti del metodo snapshot sono:

percySnapshot(name[, options])

Modalità standalone

percySnapshot(browser, name[, options])

• browser (obbligatorio) - L'oggetto browser di WebdriverIO
• name (obbligatorio) - Il nome dello snapshot; deve essere unico per ogni snapshot
• options - Vedi le opzioni di configurazione per-snapshot

Per saperne di più, consulta Percy snapshot.

Step 5: Esegui Percy

Esegui i tuoi test utilizzando il comando percy exec come mostrato di seguito:

Se non puoi utilizzare il comando percy:exec o preferisci eseguire i test utilizzando le opzioni di esecuzione dell'IDE, puoi utilizzare i comandi percy:exec:start e percy:exec:stop. Per saperne di più, visita Esegui 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!

Visita le seguenti pagine per maggiori dettagli:

• Integra i tuoi test WebdriverIO con Percy
• Pagina delle variabili d'ambiente
• Integra usando BrowserStack SDK se stai utilizzando BrowserStack Automate.

Risorsa	Descrizione
Documentazione ufficiale	Documentazione Percy per WebdriverIO
Build di esempio - Tutorial	Tutorial Percy per WebdriverIO
Video ufficiale	Test visuale con Percy
Blog	Introduzione a Visual Reviews 2.0