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
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.
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
- Assurez-vous que Node.js est installé.
- Initialisez un projet PlayWright à l'aide de npm ou de fil?:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 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 ,