Qu'est-ce que Playwright Test

Playwright est une bibliothèque Node.js pour automatiser Chromium, Firefox et WebKit avec une seule API. Playwright est conçu pour permettre une automatisation Web multi-navigateurs évolutive, fiable et rapide. Étant donné que Microsoft Edge adopte aussi la plate-forme Web open source Chromium, Playwright est également capable d'automatiser Microsoft Edge.

Playwright nécessite Node.js version 12 ou supérieure. Exécutez node -v à partir de la ligne de commande pour vous assurer que vous disposez d'une version compatible de Node.js. Les binaires du navigateur pour Chromium, Firefox et WebKit fonctionnent sous Windows, macOS et Linux.

Comme vous l'avez peut-être entendu, l'équipe Playwright vient d'introduire un tout nouveau lanceur de test conçu à partir de zéro par l'équipe de Playwright spécifiquement pour répondre aux principaux besoins de test de bout en bout tels que :

Exécuter vos scripts d'automatisation de test Playwright sur tous les navigateurs importants ;

Exécuter des tests en parallèle ;

Avoir une isolation contextuelle assez pratique prête à l'emploi ;

Économisez votre temps en utilisant des appareils ;

Capture d'écran, vidéo, traces et bien d'autres éléments pour l'échec du test.

Installation

Installons Playwright et Playwright Test :

npm i -D @playwright/test
# install les navigateurs supportés
npx playwright install

Premier test

Créez tests/example.spec.js (ou tests/example.spec.ts pour TypeScript) pour définir votre test.

// JavaScript
const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    const title = page.locator('.navbar__inner .navbar__title');
    await expect(title).toHaveText('Playwright');
});

// TypeScript
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    const title = page.locator('.navbar__inner .navbar__title');
    await expect(title).toHaveText('Playwright');
});

Lancez vos tests

npx playwright test

Pour aller plus loin

Fichier de configuration

Pour profiter de toutes les fonctionnalités que Playwright a à offrir, vous allez créer un fichier de configuration playwright.config.ts (ou playwright.config.js). Il vous permet d'exécuter des tests dans plusieurs navigateurs configurés comme vous le souhaitez.

Voici un exemple de configuration qui exécute chaque test dans Chromium, Firefox et WebKit, en créant un "projet" pour chaque configuration de navigateur. Il spécifie également deux nouvelles options de traçage.

// JavaScript
// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
use: {
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
};
module.exports = config;

// TypeScript
// playwright.config.ts
import { PlaywrightTestConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
use: {
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
};
export default config;

Vous pouvez désormais exécuter des tests dans plusieurs navigateurs par défaut.

npx playwright test
Running 5 tests using 5 workers
✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
✓ [webkit] › example.spec.ts:3:1 › basic test (2s)

Utilisez l'option de ligne de commande --project pour exécuter un seul projet.

npx playwright test --project=firefox
Running 1 test using 1 worker
✓ [firefox] › example.spec.ts:3:1 › basic test (2s)

Ecriture des assertions

Playwright utilise la bibliothèque expect pour les assertions de test. Il l'étend avec les matchers spécifiques à Playwright pour obtenir une plus grande ergonomie de test.

// JavaScript
// example.spec.js
const { test, expect } = require('@playwright/test');
test('my test', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
// Expect an attribute "to be strictly equal" to the value.
await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');
// Expect an element "to be visible".
await expect(page.locator('text=Learn more').first()).toBeVisible();
await page.click('text=Get Started');
// Expect some text to be visible on the page.
await expect(page.locator('text=Introduction').first()).toBeVisible();
});

// TypeScript
// example.spec.ts
import { test, expect } from '@playwright/test';
test('my test', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
// Expect an attribute "to be strictly equal" to the value.
await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');
// Expect an element "to be visible".
await expect(page.locator('text=Learn more').first()).toBeVisible();
await page.click('text=Get Started');
// Expect some text to be visible on the page.
await expect(page.locator('text=Introduction').first()).toBeVisible();
});

Ligne de commande

Lancer tous les tests

npx playwright test

Lancer un test unique

npx playwright test tests/todo-page.spec.ts

Exécuter un ensemble de fichiers de test

npx playwright test tests/todo-page/ tests/landing-page/

Exécuter les fichiers qui ont my-spec ou my-spec-2 dans le nom de fichier

npx playwright test my-spec my-spec-2

Lancer le test avec le titre

npx playwright test -g "add a todo item"

Exécuter des tests dans une configuration spécifique (project)

npx playwright test --project=firefox

Exécuter des tests dans les navigateurs principaux

npx playwright test --headed

Désactiver la parallélisation

npx playwright test --workers=1

Choisisez un reporter

npx playwright test --reporter=dot

Lancer en mode debug

npx playwright test --debug

Obtenir de l'aide

npx playwright test --help

HappyAPI utilise Playwright

Tous les tests de HappyAPI sont exécutés avec Playwright.
Avant chaque mise en production, toutes les API sont testées pour garantir la non régression.