HappyApi
HappyAPI Playwright

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 etrapide.É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 commandepour vous assurer que vous disposez d'une version compatible de Node.js. Les binaires du navigateur pourChromium, 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 detest conçu à partir de zéro par l'équipe de Playwright spécifiquement pour répondre aux principauxbesoins 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 fichierde configuration playwright.config.ts (ou playwright.config.js). Il vous permet d'exécuter des testsdansplusieurs 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 optionsde 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 matchersspé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.

    Références

    Le site officiel de PlaywrightPlaywright surgithubLa documentation surPlaywright

    D'autres infos

    Retour à la rubrique actualitésCatalogue d'API