PlayWright est un framework de test d'automatisation de l'interface utilisateur Web développé par Microsoft.
Il vise à fournir un cadre de test d'automatisation multiplateforme, multilingue et multi-navigateur qui prend également en charge les navigateurs mobiles.
Comme décrit sur sa page d'accueil officielle :
Quels sont les meilleurs frameworks de tests d'automatisation de l'interface utilisateur Web disponibles aujourd'hui ? Les options les plus remarquables incluent le Selenium vieux de dix ans, le Cypress récemment populaire et celui que nous présentons ici : PlayWright. En quoi diffèrent-ils ? Vous trouverez ci-dessous une comparaison résumée pour votre référence
| Feature | PlayWright | Selenium | Cypress |
|---|---|---|---|
| Supported Languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
| Supported Browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
| Testing Framework | Frameworks for supported languages | Frameworks for supported languages | Frameworks for supported languages |
| Usability | Easy to use and configure | Complex setup with a learning curve | Easy to use and configure |
| Code Complexity | Simple | Moderate | Simple |
| DOM Manipulation | Simple | Moderate | Simple |
| Community Maturity | Improving gradually | Highly mature | Fairly mature |
| Headless Mode Support | Yes | Yes | Yes |
| Concurrency Support | Supported | Supported | Depends on CI/CD tools |
| iframe Support | Supported | Supported | Supported via plugins |
| Driver | Not required | Requires a browser-specific driver | Not required |
| Multi-Tab Operations | Supported | Not supported | Supported |
| Drag and Drop | Supported | Supported | Supported |
| Built-in Reporting | Yes | No | Yes |
| Cross-Origin Support | Supported | Supported | Supported |
| Built-in Debugging | Yes | No | Yes |
| Automatic Wait | Yes | No | Yes |
| Built-in Screenshot/Video | Yes | No video recording | Yes |
Bien que PlayWright prenne en charge plusieurs langues, il s'appuie fortement sur Node.js. Que vous utilisiez la version Python ou Java, PlayWright nécessite un environnement Node.js lors de l'initialisation, en téléchargeant un pilote Node.js. Par conséquent, nous nous concentrerons sur JavaScript/TypeScript pour ce guide.
# Using npm npm init playwright@latest # Using yarn yarn create playwright
Si vous choisissez de télécharger des navigateurs, PlayWright téléchargera Chromium, Firefox et WebKit, ce qui peut prendre un certain temps. Ce processus se produit uniquement lors de la première configuration, sauf si la version PlayWright est mise à jour.
Après l'initialisation, vous obtiendrez un modèle de projet :
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
Exécutez l'exemple de cas de test :
npx playwright test
Les tests s'exécutent silencieusement (en mode sans tête) et les résultats sont affichés comme :
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
Voici le cas de test example.spec.ts :
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page).toHaveURL(/.*intro/);
});
Chaque méthode de test a :
Les méthodes clés incluent :
Voici les commandes courantes :
# Using npm npm init playwright@latest # Using yarn yarn create playwright
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
npx playwright test
Utilisez la fonctionnalité Codegen pour enregistrer les interactions :
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
Le code enregistré peut être copié dans vos fichiers. Remarque : L'enregistreur peut ne pas gérer des actions complexes comme le survol.
Cette section présente quelques actions typiques de Playwright pour interagir avec les éléments de la page. Notez que l'objet localisateur introduit précédemment ne localise pas réellement l'élément sur la page lors de sa création. Même si l'élément n'existe pas sur la page, l'utilisation des méthodes de localisation d'élément pour obtenir un objet localisateur ne générera aucune exception. La recherche d'élément réelle n'a lieu que pendant l'interaction. Cela diffère de la méthode findElement de Selenium, qui recherche directement l'élément sur la page et lève une exception si l'élément n'est pas trouvé.
Utilisez la méthode de remplissage pour la saisie de texte, en ciblant principalement ,