Automatisation à l'aide de Playwright, TypeScript et JavaScript-js tutoriel-php.cn

Dramaturge avec TypeScript | Installation JavaScript

Playwright est l'outil Web moderne et d'automatisation d'API de Microsoft en collaboration avec l'équipe Puppeteer, Puppeteer est une bibliothèque JavaScript qui fournit une API de haut niveau pour contrôler Chrome ou Firefox via le protocole DevTools ou WebDriver BiDi. Puppeteer fonctionne sans tête (pas d'interface utilisateur visible) par défaut.

Playwright prend en charge les navigateurs Web modernes pour l'automatisation des applications Web via une seule API et prend également en charge l'automatisation de l'API.

Architecture du dramaturge

Automation using Playwright and TypeScript and JavaScript

Playwright fonctionne sur Web Socket Protocol, une fois la connexion établie, il déclenche les tests et envoie la requête au format JSON au serveur en utilisant le protocole Web Socket, ce qui signifie qu'une fois la connexion établie par Playwright, il n'est pas nécessaire d'établir à nouveau la connexion pour envoyer les requêtes à serveur jusqu'à l'exécution complète du test. Le dramaturge doit déconnecter la connexion par la méthode playwright.quit().

Comprenons la différence entre la connexion au protocole HTTP et la connexion au protocole Web Socket

Automation using Playwright and TypeScript and JavaScript

Différence entre WebSocket et protocole HTTP
Caractéristiques du dramaturge :
N'importe quel navigateur • N'importe quelle plateforme • Une API
Multi-navigateur. Playwright prend en charge tous les moteurs de rendu modernes, notamment Chromium, WebKit et Firefox.

Multiplateforme. Testez sur Windows, Linux et macOS, localement ou sur CI, sans tête ou avec tête.

Multilingue. Utilisez l'API Playwright en TypeScript, JavaScript, Python, .NET, Java.

Testez le Web mobile. Émulation mobile native de Google Chrome pour Android et Mobile Safari. Le même moteur de rendu fonctionne sur votre bureau et dans le Cloud.

Résilient • Pas de tests irréguliers

Attente automatique. Le dramaturge attend que les éléments soient exploitables avant d'effectuer des actions. Il propose également un riche ensemble d’événements d’introspection. La combinaison des deux élimine le besoin de délais d’attente artificiels – la principale cause des tests irréguliers.

Affirmations axées sur le Web. Les affirmations du dramaturge sont créées spécifiquement pour le Web dynamique. Les contrôles sont automatiquement retentés jusqu'à ce que les conditions nécessaires soient remplies.

Traçage. Configurez la stratégie de nouvelle tentative de test, capturez la trace d'exécution, les vidéos, les captures d'écran pour éliminer les flocons.

Aucun compromis • Aucune limite

Les navigateurs exécutent du contenu Web appartenant à différentes origines dans différents processus. Playwright est aligné sur l'architecture des navigateurs modernes et exécute des tests hors processus. Cela libère Playwright des limitations typiques des testeurs en cours de processus.

Tout multiple. Testez des scénarios couvrant plusieurs onglets, plusieurs origines et plusieurs utilisateurs. Créez des scénarios avec différents contextes pour différents utilisateurs et exécutez-les sur votre serveur, le tout en un seul test.

Événements de confiance. Survolez des éléments, interagissez avec des contrôles dynamiques, produisez des événements fiables. Playwright utilise un véritable pipeline d'entrée de navigateur impossible à distinguer de l'utilisateur réel.

Testez les images, percez Shadow DOM. Les sélecteurs de dramaturge percent le Shadow DOM et permettent de saisir des images de manière transparente.

Isolement complet • Exécution rapide

Contextes du navigateur. Playwright crée un contexte de navigateur pour chaque test. Le contexte du navigateur est équivalent à un tout nouveau profil de navigateur. Cela offre une isolation complète des tests sans aucune surcharge. La création d'un nouveau contexte de navigateur ne prend que quelques millisecondes.

Connectez-vous une fois. Enregistrez l'état d'authentification du contexte et réutilisez-le dans tous les tests. Cela évite les opérations de connexion répétitives dans chaque test, tout en offrant une isolation complète des tests indépendants.

Outillage puissant

Codegen. Générez des tests en enregistrant vos actions. Enregistrez-les dans n'importe quelle langue.

Inspecteur dramaturge. Inspectez la page, générez des sélecteurs, parcourez l'exécution du test, consultez les points de clic, explorez les journaux d'exécution.

Visionneuse de traces. Capturez toutes les informations pour enquêter sur l’échec du test. Playwright Trace contient un screencast d'exécution de test, des instantanés DOM en direct, un explorateur d'actions, une source de test et bien d'autres.

Commençons à utiliser Playwright avec TypeScript/JavaScript

Installation de Playwright pour TypeScript/JavaScript
Pré-requis pour l'installation comme suit : Node.js 18

Windows 10, Windows Server 2016 ou sous-système Windows pour Linux (WSL).
macOS 13 Ventura ou macOS 14 Sonoma.
Debian 11, Debian 12, Ubuntu 20.04 ou Ubuntu 22.04, Ubuntu 24.04, sur architecture x86-64 et arm64.
Commencez par installer Playwright en utilisant npm, fil ou pnpm. Vous pouvez également commencer et exécuter vos tests à l'aide de l'extension VS Code.

Créez le dossier, par exemple TypeScriptWithPlaywright, créez également un dossier pour JavaScriptwithPlaywright, accédez au dossier et ouvrez l'invite de commande de Windows

Automation using Playwright and TypeScript and JavaScript

Installation du dramaturge
Cliquez sur Entrée et l'écran suivant apparaîtra et choisissez le langage de script, puis appuyez sur Entrée

Automation using Playwright and TypeScript and JavaScript

Sélectionnez le langage de script
Après avoir sélectionné le langage de script, puis appuyez sur Entrée, l'écran suivant apparaîtra et vous demandera où vous souhaitez placer vos tests de bout en bout. que ce soit comme ça.

Installation du dramaturge
Il demandera maintenant le workflow GitHub Actions. Si vous souhaitez configurer, appuyez sur Y ou bien N. Il vous demandera d'installer le navigateur, si vous souhaitez l'installer, sélectionnez Y, ce qui signifie vrai. L'écran suivant apparaîtra.

Automation using Playwright and TypeScript and JavaScript

Remarque : les navigateurs Playwright peuvent être installés manuellement via la commande ci-dessous

Automation using Playwright and TypeScript and JavaScript

installation du dramaturge npx

Installation du dramaturge
Appuyez maintenant sur Entrée et les écrans suivants apparaîtront.

Automation using Playwright and TypeScript and JavaScript

Installation du dramaturge
Installation du dramaturge

Installation du dramaturge

Installation du dramaturge terminée
Playwright exécute par défaut les scripts de test qui sont exécutés en mode sans tête et les commandes suivantes exploreront pour s'exécuter avec des navigateurs spécifiques et déboguer, générant des scripts de test à l'aide de codegen.

test de dramaturge npx
Exécute les tests de bout en bout.

test de dramaturge npx --ui
Démarre le mode interface utilisateur interactive.

test de dramaturge npx --project=chromium
Exécute les tests uniquement sur Desktop Chrome.

Exemple de test de dramaturge npx
Exécute les tests dans un fichier spécifique.

test de dramaturge npx --debug
Exécute les tests en mode débogage.

codegen du dramaturge npx
Générer automatiquement des tests avec Codegen.

Nous vous proposons de commencer par taper :

npx playwright test

Copier après la connexion

Exécutons maintenant les scripts de test en utilisant la commande suivante et pour afficher le rapport. Playwright exécutera les tests dans Chrome, Firefox et WebKit en parallèle.

test de dramaturge npx

émission-reportage du dramaturge npx

Le rapport Playwright par défaut ne prend en charge que TypeScript/JavaScript
Playwright configure par défaut vos scripts de test pour qu'ils s'exécutent dans les navigateurs suivants avec le mode sans tête. La configuration sera présentée dans le dossier nommé playwright.config.js

importer {defineConfig, devices} depuis '@playwright/test';

/**

Lire les variables d'environnement à partir du fichier.
https://github.com/motdotla/dotenv*/ // importe dotenv depuis 'dotenv' ; // importer le chemin depuis 'path' ; // dotenv.config({ chemin : path.resolve(__dirname, '.env') });

/**

Voir https://playwright.dev/docs/test-configuration.
/
exporter la définition par défaut ({
testDir : './tests',
/ Exécuter des tests dans des fichiers en parallèle /
entièrementParallèle : vrai,
/ Échec de la construction sur CI si vous avez accidentellement laissé test.only dans le code source. /
interditOnly : !!process.env.CI,
/ Réessayer sur CI uniquement /
nouvelles tentatives : process.env.CI ? 2 : 0,
/ Désactiver les tests parallèles sur CI. /
travailleurs : process.env.CI ? 1 : indéfini,
/ Reporter à utiliser. Voir https://playwright.dev/docs/test-reporters /
journaliste : 'html',
/ Paramètres partagés pour tous les projets ci-dessous. Voir https://playwright.dev/docs/api/class-testoptions. /
utiliser : {
/ URL de base à utiliser dans des actions comme wait page.goto('/'). */
// baseURL : 'http://127.0.0.1:3000',

/* Collectez la trace lorsque vous réessayez le test ayant échoué. Voir https://playwright.dev/docs/trace-viewer */
trace : 'à la première tentative',
},

/* Configurer les projets pour les principaux navigateurs */
projets : [
{
nom : 'chrome',
utilisez : { ...devices['Desktop Chrome'] },
},

npx playwright test

Copier après la connexion

/* Exécutez votre serveur de développement local avant de démarrer les tests */
// serveur web : {
// commande : 'npm run start',
//url : 'http://127.0.0.1:3000',
// réutilisationExistingServer : !process.env.CI,
// },
});
Modifions maintenant pour exécuter les scripts de test en mode non headleases (UI) et en ajoutant des navigateurs supplémentaires. Playwright fournit également des options pour enregistrer l'exécution du script de test et des options d'affichage de trace qui seront utiles pour le débogage. Si vous activez l'option de visualisation de trace, vous pourrez voir quel est l'état avant le test, quel est l'état pendant le test et quel serait l'état après le test. J'ai modifié le fichier de configuration du dramaturge et il est comme ci-dessous :

// @ts-check
const { définirConfig, appareils } = require('@playwright/test');

module.exports = définirConfig({
testDir : './tests',
entièrementParallèle : vrai,
interditOnly : !!process.env.CI,
nouvelles tentatives : process.env.CI ? 2 : 0,
travailleurs : process.env.CI ? 1 : indéfini,
journaliste : 'html',
utiliser : {
trace : 'on', // Activer le traçage
vidéo : 'on', // Enregistrer une vidéo pour chaque test
headless : false, // Exécuter les tests en mode dirigé
},
projets : [
{
nom : 'chrome',
utilisez : { ...devices['Desktop Chrome'] },
},
{
nom : 'firefox',
utilisez : { ...appareils['Desktop Firefox'] },
},
{
nom : 'webkit',
utilisez : { ...devices['Desktop Safari'] },
},
{
nom : 'Microsoft Edge',
utiliser : {
...appareils['Desktop Edge'],
chaîne : 'msedge'
},
},
{
nom : "Google Chrome",
utiliser : {
...appareils['Desktop Chrome'],
chaîne : 'chrome'
},
},
],
});
Désormais, les scripts de test peuvent exécuter les tests sur les navigateurs mentionnés dans le fichier de configuration en mode non headless avec enregistrement, option de visualisation de trace.