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

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 :

• 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

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

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

---

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/);
});

• 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

• 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

• Déboguer un scénario de test :

npx playwright test

---

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

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 , ou des éléments avec l'attribut [contenteditable] :<br>

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/);
});

Case à cocher et radio

Utilisez locator.setChecked() ou locator.check() pour interagir avec input[type=checkbox], input[type=radio] ou des éléments avec l'attribut [role=checkbox] :

  npx playwright test

Sélectionnez Contrôle

Utilisez locator.selectOption() pour interagir avec éléments :

  npx playwright test landing-page.spec.ts

Clics de souris

Opérations de base :

  npx playwright test --debug

Pour les éléments couverts par d'autres, utilisez un clic forcé :

npx playwright codegen https://leapcell.io/

Ou déclenchez l'événement de clic par programmation :

// Text input
await page.getByRole('textbox').fill('Peter');

Saisir des caractères

La méthode locator.type() simule la saisie caractère par caractère, déclenchant des événements keydown, keyup et keypress :

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

Clés spéciales

Utilisez locator.press() pour les touches spéciales :

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Les touches prises en charge incluent Backquote, Moins, Equal, Backslash, Backspace, Tab, Supprimer, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9 et KeyA. -KeyZ.

Téléchargement de fichiers

Utilisez locator.setInputFiles() pour spécifier les fichiers à télécharger. Plusieurs fichiers sont pris en charge :

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

Élément de mise au point

Utilisez locator.focus() pour vous concentrer sur un élément :

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

Glisser-déposer

Le processus de glisser-déposer comporte quatre étapes :

1. Passez la souris sur l'élément déplaçable.
2. Appuyez sur le bouton gauche de la souris.
3. Déplacez la souris vers la position cible.
4. Relâchez le bouton gauche de la souris.

Vous pouvez utiliser la méthode locator.dragTo() :

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

Vous pouvez également mettre en œuvre manuellement le processus :

npx playwright test

Gestion des boîtes de dialogue

Par défaut, Playwright annule automatiquement les boîtes de dialogue telles que l'alerte, la confirmation et l'invite. Vous pouvez pré-enregistrer un gestionnaire de dialogue pour accepter les dialogues :

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

Gestion des nouvelles pages

Lorsqu'une nouvelle page apparaît, vous pouvez utiliser l'événement popup pour la gérer :

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/);
});

---

La meilleure plateforme pour les dramaturges : Leapcell

Leapcell est une plateforme de cloud computing moderne conçue pour les applications distribuées. Il adopte un modèle pay-as-you-go sans frais d'inactivité, garantissant que vous ne payez que pour les ressources que vous utilisez.

Avantages uniques de Leapcell pour les applications de dramaturge

1. Efficacité des coûts

   • Pay-as-you-go : évitez le gaspillage de ressources en cas de faible trafic et évoluez automatiquement pendant les heures de pointe.
   • Exemple concret : par exemple, selon les calculs de getdeploying.com, la location d'une machine virtuelle de 1 vCPU et de 2 Go de RAM dans les services cloud traditionnels coûte environ 25 $ par mois. Sur Leapcell, 25 $ peuvent prendre en charge un service traitant 6,94 millions de requêtes avec un temps de réponse moyen de 60 ms, vous offrant ainsi un meilleur rapport qualité-prix.

2. Expérience Développeur

   • Facilité d'utilisation : interface intuitive avec des exigences de configuration minimales.
   • Automation : simplifie le développement, les tests et le déploiement.
   • Intégration transparente : prend en charge Go, Python, Node.js, Rust et plus encore.

3. Évolutivité et performances

   • Mise à l'échelle automatique : ajuste dynamiquement les ressources pour maintenir des performances optimales.
   • Optimisation asynchrone : gère facilement les tâches à forte concurrence.
   • Portée mondiale : accès à faible latence pris en charge par les centres de données distribués.

Pour plus d'exemples de déploiement, reportez-vous à la documentation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!