Pour Application Web

Intégrer vos tests WebdriverIO avec Percy

Avant l'intégration, vous pouvez explorer le tutoriel d'exemple de build Percy pour WebdriverIO. Intégrez vos tests automatisés WebdriverIO avec BrowserStack Percy. Voici un aperçu des étapes d'intégration :

Étape 1 : Créer un projet Percy

Connectez-vous à Percy. Dans Percy, créez un projet de type Web, puis nommez le projet. Une fois le projet créé, Percy génère un jeton. Notez-le. Vous devrez l'utiliser pour définir votre variable d'environnement à l'étape suivante.

Pour plus de détails sur la création d'un projet, consultez Créer un projet Percy.

Étape 2 : Définir le jeton du projet comme variable d'environnement

Exécutez la commande suivante pour définir PERCY_TOKEN comme variable d'environnement :

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

Étape 3 : Installer les dépendances Percy

Installez les composants nécessaires pour établir l'environnement d'intégration pour votre suite de tests.

Pour installer les dépendances, exécutez la commande suivante :

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

Étape 4 : Mettre à jour votre script de test

Importez la bibliothèque Percy pour utiliser la méthode et les attributs nécessaires pour prendre des captures d'écran. L'exemple suivant utilise la fonction percySnapshot() en mode asynchrone :

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

Lorsque vous utilisez WebdriverIO en mode autonome, fournissez l'objet navigateur comme premier argument à la fonction 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();

Les arguments de la méthode snapshot sont :

percySnapshot(name[, options])

Mode autonome

percySnapshot(browser, name[, options])

• browser (obligatoire) - L'objet navigateur WebdriverIO
• name (obligatoire) - Le nom de la capture d'écran ; doit être unique pour chaque capture
• options - Voir les options de configuration par capture

Pour en savoir plus, consultez Percy snapshot.

Étape 5 : Exécuter Percy

Exécutez vos tests en utilisant la commande percy exec comme indiqué ci-dessous :

Si vous ne pouvez pas utiliser la commande percy:exec ou préférez exécuter vos tests à l'aide des options d'exécution de l'IDE, vous pouvez utiliser les commandes percy:exec:start et percy:exec:stop. Pour en savoir plus, visitez Exécuter 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!

Visitez les pages suivantes pour plus de détails :

• Intégrer vos tests WebdriverIO avec Percy
• Page des variables d'environnement
• Intégration à l'aide du SDK BrowserStack si vous utilisez BrowserStack Automate.

Ressource	Description
Documentation officielle	Documentation Percy pour WebdriverIO
Build d'exemple - Tutoriel	Tutoriel WebdriverIO de Percy
Vidéo officielle	Tests visuels avec Percy
Blog	Présentation de Visual Reviews 2.0