communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web js tutoriel Dramaturge : un aperçu complet du cadre de test d'automatisation de l'interface utilisateur Web

Dramaturge : un aperçu complet du cadre de test d'automatisation de l'interface utilisateur Web

Susan Sarandon
Susan Sarandon
Dec 26, 2024 pm 05:57 PM

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.

Playwright: A Comprehensive Overview of Web UI Automation Testing Framework

Comme décrit sur sa page d'accueil officielle :

  • L'attente automatique, les assertions intelligentes pour les éléments de la page et le suivi de l'exécution le rendent très efficace dans la gestion de l'instabilité des pages Web.
  • Il contrôle les navigateurs dans un processus différent de celui qui exécute le test, éliminant les limitations des exécuteurs de tests en cours et prenant en charge la pénétration du Shadow DOM.
  • PlayWright crée un contexte de navigateur pour chaque test. Un contexte de navigateur équivaut à un tout nouveau profil de navigateur, permettant une isolation complète des tests sans coût. La création d'un nouveau contexte de navigateur ne prend que quelques millisecondes.
  • Fournit des fonctionnalités telles que la génération de code, le le débogage étape par étape et la visualisation de traces.

PlayWright contre Selenium contre Cypress

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

Comparaisons clés :

  • Langues prises en charge : PlayWright et Selenium prennent en charge Java, C# et Python, ce qui les rend plus populaires parmi les ingénieurs de test qui ne sont peut-être pas familiers avec JavaScript/TypeScript.
  • Approche technique : PlayWright et Selenium utilisent le protocole de débogage à distance de Google pour contrôler les navigateurs basés sur Chromium. Pour les navigateurs comme Firefox, sans de tels protocoles, ils utilisent l'injection JavaScript. Selenium l'encapsule dans un pilote, tandis que PlayWright l'appelle directement. Cypress, quant à lui, utilise JavaScript pour contrôler les navigateurs.
  • Prise en charge du navigateur : Selenium prend en charge Internet Explorer, ce qui n'est pas pertinent car IE est progressivement supprimé.
  • Facilité d'utilisation : les trois frameworks ont une courbe d'apprentissage. Cependant, PlayWright et Cypress sont plus conviviaux pour les scénarios simples que Selenium.

Commencer

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.

Installation et démo

  1. Assurez-vous que Node.js est installé.
  2. Initialisez un projet PlayWright à l'aide de npm ou de fil : 
   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright
Copier après la connexion
Copier après la connexion
Copier après la connexion
  1. Suivez les instructions :
    • Choisissez TypeScript ou JavaScript (par défaut : TypeScript).
    • Spécifiez le nom du répertoire de test.
    • Décidez si vous souhaitez installer les navigateurs pris en charge par PlayWright (par défaut : True).

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.

Structure du projet

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
Copier après la connexion
Copier après la connexion
Copier après la connexion

Exécutez l'exemple de cas de test :

npx playwright test
Copier après la connexion
Copier après la connexion
Copier après la connexion

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
Copier après la connexion
Copier après la connexion
Copier après la connexion

Exemple de code source

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/);
});
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Premier test : Vérifie que le titre de la page contient « Dramaturge ».
  • Deuxième test : clique sur le lien « Commencer » et vérifie l'URL.

Chaque méthode de test a :

  • Un nom du test (par exemple, « a un titre »).
  • Une fonction pour exécuter la logique de test.

Les méthodes clés incluent :

  • page.goto : permet d'accéder à une URL.
  • expect(page).toHaveTitle : affirme le titre de la page.
  • page.getByRole : localise un élément par son rôle.
  • wait : attend la fin des opérations asynchrones.

Exécuter des tests à partir de la ligne de commande

Voici les commandes courantes :

  • Exécutez tous les tests : 
   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Exécutez un fichier de test spécifique : 
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Déboguer un scénario de test : 
npx playwright test
Copier après la connexion
Copier après la connexion
Copier après la connexion

Enregistrement de codes

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
Copier après la connexion
Copier après la connexion
Copier après la connexion

Le code enregistré peut être copié dans vos fichiers. Remarque : L'enregistreur peut ne pas gérer des actions complexes comme le survol.

Guide détaillé du dramaturge

Actions et comportements

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é.

Saisie de texte

Utilisez la méthode de remplissage pour la saisie de texte, en ciblant principalement ,