Utiliser Playwright pour automatiser et tester dans Microsoft Edge

La bibliothèque Playwright fournit une automatisation inter-navigateurs via une seule API.

Playwright est une bibliothèque Node.js permettant d’automatiser Chromium, Firefox et WebKit avec une seule API. Playwright est conçu pour permettre l’automatisation web inter-navigateurs qui est persistante, capable, fiable et rapide. Étant donné que Microsoft Edge repose sur la plateforme web open source Chromium, Playwright est également en mesure d’automatiser Microsoft Edge.

Playwright lance les navigateurs sans tête par défaut. Les navigateurs sans tête n’affichent pas d’interface utilisateur. Vous devez donc utiliser la ligne de commande à la place. Vous pouvez également configurer Playwright pour qu’il exécute également Microsoft Edge complet (sans tête).

Installer Playwright et les navigateurs

Remarque

Playwright nécessite Node.js version 12 ou ulté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 fichiers binaires du navigateur pour Chromium, Firefox et WebKit fonctionnent sur Windows, macOS et Linux. Pour plus d’informations, consultez Playwright System Requirements.

Tout d’abord, installez Playwright Test pour tester votre site web ou votre application :

npm i -D @playwright/test

Pour installer les navigateurs, exécutez la commande suivante, qui télécharge Chromium, Firefox et WebKit :

npx playwright install 

Exécuter un test de base

L’approche utilisée par Playwright sera familière aux utilisateurs d’autres frameworks de test de navigateur, tels que WebDriver ou Puppeteer. Vous pouvez créer une instance du navigateur, ouvrir une page dans le navigateur, puis manipuler la page à l’aide de l’API Playwright.

Playwright Test, qui est le test-runner de Playwright, lance un navigateur et un contexte pour vous. Une page isolée est ensuite transmise à chaque test, comme indiqué dans le test de base suivant :

// tests/foo.spec.ts
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');
});

À présent, exécutez vos tests, comme suit :

npx playwright test

Pour plus d’informations sur l’exécution de tests, consultez Prise en main de Playwright>.

Exécuter des tests dans Microsoft Edge

Pour exécuter vos tests dans Microsoft Edge, vous devez créer un fichier de configuration pour Playwright Test, tel que playwright.config.ts. Dans le fichier de configuration, créez un projet à l’aide de Microsoft Edge.

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'Microsoft Edge',
      use: {
        // Supported Microsoft Edge channels are: msedge, msedge-beta, msedge-dev, msedge-canary
        channel: 'msedge',
      },
    },
  ],
};

export default config

Si Microsoft Edge n’est pas déjà installé sur votre système, installez-le via Playwright, comme suit :

npx playwright install msedge

Lorsque vous utilisez le fichier ci-dessus playwright.config.ts , Playwright Test utilise Microsoft Edge pour exécuter vos tests, comme suit :

npx playwright test --headed

Utiliser Playwright comme bibliothèque

Vous pouvez également utiliser Playwright en tant que bibliothèque, comme indiqué dans le code suivant. Cette approche vous permet d’utiliser un test-runner différent.

// example.js
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    channel: 'msedge',
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.microsoft.com/edge');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

Fichier example.png produit par example.js

example.js est une démonstration simple des scénarios d’automatisation et de test activés par Playwright. Pour prendre des captures d’écran dans d’autres navigateurs web, remplacez le code ci-dessus par await playwright.chromium.launch le code suivant :

Firefox:

  const browser = await playwright.firefox.launch({

Webkit:

  const browser = await playwright.webkit.launch({

Pour plus d’informations sur Playwright et Playwright Test, accédez au site web playwright. Consultez le dépôt Playwright sur GitHub. Pour partager vos commentaires sur l’automatisation et le test de votre site web ou de votre application avec Playwright, signalez un problème.

Voir également