Automatisierung mit Playwright und TypeScript und JavaScript

Dramatiker mit TypeScript | JavaScript-Installation

Playwright ist das moderne webbasierte und API-Automatisierungstool von Microsoft, das in Zusammenarbeit mit dem Puppeteer-Team entwickelt wurde. Puppeteer ist eine JavaScript-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Firefox über das DevTools-Protokoll oder WebDriver BiDi bereitstellt. Puppeteer läuft standardmäßig im Headless-Modus (keine sichtbare Benutzeroberfläche).

Playwright unterstützt die modernen webbasierten Browser für die Automatisierung von Webanwendungen über eine einzige API und unterstützt auch die Automatisierung für API.

Architektur des Dramatikers

Playwright arbeitet mit dem Web-Socket-Protokoll, sobald die Verbindung hergestellt ist, löst es die Tests aus und sendet die Anfrage im JSON-Format an den Server, der das Web-Socket-Protokoll verwendet. Das heißt, sobald die Verbindung von Playwright hergestellt wurde, muss die Verbindung nicht erneut hergestellt werden, um die Anfragen an ihn zu senden Server bis zur vollständigen Testausführung. Playwright muss die Verbindung mit der Methode playwright.quit() trennen.

Lassen Sie uns den Unterschied zwischen HTTP-Protokollverbindung und Web-Socket-Protokollverbindung verstehen

Unterschied zwischen WebSocket und HTTP-Protokoll
Merkmale des Dramatikers:
Jeder Browser • Jede Plattform • Eine API
Browserübergreifend. Playwright unterstützt alle modernen Rendering-Engines, einschließlich Chromium, WebKit und Firefox.

Plattformübergreifend. Testen Sie unter Windows, Linux und macOS, lokal oder auf CI, Headless oder Headed.

Sprachübergreifend. Verwenden Sie die Playwright-API in TypeScript, JavaScript, Python, .NET, Java.

Testen Sie das mobile Web. Native mobile Emulation von Google Chrome für Android und Mobile Safari. Die gleiche Rendering-Engine funktioniert auf Ihrem Desktop und in der Cloud.

1. Belastbar • Keine schuppigen Tests

Automatisches Warten. Der Dramatiker wartet darauf, dass Elemente umsetzbar sind, bevor er Aktionen ausführt. Es gibt auch eine reichhaltige Auswahl an Selbstbeobachtungsveranstaltungen. Die Kombination aus beidem macht künstliche Zeitüberschreitungen überflüssig – die Hauptursache für unzuverlässige Tests.

Web-First-Behauptungen. Dramatiker-Behauptungen werden speziell für das dynamische Web erstellt. Die Überprüfungen werden automatisch wiederholt, bis die erforderlichen Bedingungen erfüllt sind.

Nachverfolgung. Konfigurieren Sie die Testwiederholungsstrategie, erfassen Sie Ausführungsverfolgungen, Videos und Screenshots, um Flakes zu vermeiden.

1. Keine Kompromisse • ​​Keine Grenzen

Browser führen Webinhalte unterschiedlicher Herkunft in unterschiedlichen Prozessen aus. Playwright ist auf die Architektur moderner Browser abgestimmt und führt Tests außerhalb des Prozesses durch. Dadurch ist Playwright frei von den typischen In-Process-Testrunner-Einschränkungen.

Alles multiplizieren. Testszenarien, die mehrere Registerkarten, mehrere Ursprünge und mehrere Benutzer umfassen. Erstellen Sie Szenarien mit unterschiedlichen Kontexten für verschiedene Benutzer und führen Sie sie auf Ihrem Server aus, alles in einem Test.

Vertrauenswürdige Ereignisse. Bewegen Sie den Mauszeiger über Elemente, interagieren Sie mit dynamischen Steuerelementen und erzeugen Sie vertrauenswürdige Ereignisse. Playwright verwendet eine echte Browser-Eingabepipeline, die nicht vom echten Benutzer zu unterscheiden ist.

Frames testen, Shadow DOM durchdringen. Dramatiker-Selektoren durchdringen das Schatten-DOM und ermöglichen die nahtlose Eingabe von Frames.

1. Vollständige Isolation • Schnelle Ausführung

Browserkontexte. Playwright erstellt für jeden Test einen Browserkontext. Der Browserkontext entspricht einem brandneuen Browserprofil. Dies ermöglicht eine vollständige Testisolation ohne Overhead. Das Erstellen eines neuen Browserkontexts dauert nur wenige Millisekunden.

Einmal anmelden. Speichern Sie den Authentifizierungsstatus des Kontexts und verwenden Sie ihn in allen Tests wieder. Dadurch werden sich wiederholende Anmeldevorgänge in jedem Test umgangen und dennoch eine vollständige Isolierung unabhängiger Tests ermöglicht.

1. Leistungsstarke Werkzeuge

Codegen. Generieren Sie Tests, indem Sie Ihre Aktionen aufzeichnen. Speichern Sie sie in einer beliebigen Sprache.

Dramatiker-Inspektor. Überprüfen Sie die Seite, generieren Sie Selektoren, durchlaufen Sie die Testausführung, sehen Sie sich Klickpunkte an, erkunden Sie Ausführungsprotokolle.

Trace Viewer. Erfassen Sie alle Informationen, um den Testfehler zu untersuchen. Playwright Trace enthält Testausführungs-Screencast, Live-DOM-Snapshots, Action Explorer, Testquelle und vieles mehr.

Lassen Sie uns beginnen, Playwright mit TypeScript/JavaScript zu verwenden

Installation von Playwright für TypeScript/JavaScript
Voraussetzungen für die Installation wie folgt: Node.js 18

Windows 10, Windows Server 2016 oder Windows Subsystem für Linux (WSL).
macOS 13 Ventura oder macOS 14 Sonoma.
Debian 11, Debian 12, Ubuntu 20.04 oder Ubuntu 22.04, Ubuntu 24.04, auf x86–64- und arm64-Architektur.
Beginnen Sie mit der Installation von Playwright mit npm, Yarn oder Pnpm. Alternativ können Sie auch mit der VS Code Extension beginnen und Ihre Tests ausführen.

Erstellen Sie den Ordner, zum Beispiel TypeScriptWithPlaywright. Erstellen Sie ebenfalls einen Ordner für JavaScriptwithPlaywright, navigieren Sie zum Ordner und öffnen Sie die Eingabeaufforderung des Fensters

Dramatiker-Installation
Klicken Sie auf die Eingabetaste und der folgende Bildschirm wird angezeigt. Wählen Sie die Skriptsprache aus und drücken Sie dann die Eingabetaste

Wählen Sie die Skriptsprache aus
Nachdem Sie die Skriptsprache ausgewählt und dann die Eingabetaste gedrückt haben, wird der folgende Bildschirm angezeigt und Sie werden gefragt, wo Sie Ihre End-to-End-Tests platzieren möchten. Lass es so sein.

Dramatiker-Installation
Jetzt wird nach dem GitHub Actions-Workflow gefragt. Wenn Sie konfigurieren möchten, drücken Sie Y oder N. Sie werden aufgefordert, den Browser zu installieren. Wenn Sie installieren möchten, wählen Sie Y, was „true“ bedeutet. Der folgende Bildschirm wird angezeigt.

Hinweis: Playwright-Browser können manuell über den folgenden Befehl installiert werden

Npx-Playwright-Installation

Dramatiker-Installation
Drücken Sie nun die Eingabetaste und die folgenden Bildschirme werden angezeigt.

Dramatiker-Installation
Dramatiker-Installation

Dramatiker-Installation

Playwright-Installation abgeschlossen
Playwright führt standardmäßig die Testskripte aus, die im Headless-Modus ausgeführt werden, und die folgenden Befehle prüfen die Ausführung mit bestimmten Browsern und debuggen und generieren Testskripte mithilfe von Codegen.

npx-Dramatikertest
Führt die End-to-End-Tests aus.

npx-Playwright-Test --ui
Startet den interaktiven UI-Modus.

npx-Dramatikertest --project=chromium
Führt die Tests nur auf Desktop Chrome aus.

npx-Playwright-Testbeispiel
Führt die Tests in einer bestimmten Datei aus.

npx playwright test --debug
Führt die Tests im Debug-Modus aus.

npx dramawright codegen
Generieren Sie Tests automatisch mit Codegen.

Wir empfehlen Ihnen, zunächst Folgendes einzugeben:

npx playwright test

Jetzt können wir die Testskripte mit dem folgenden Befehl ausführen und den Bericht anzeigen. Playwright führt die Tests in Chromium, Firefox und WebKit parallel aus.

npx-Dramatikertest

Npx-Dramatiker-Show-Bericht

Playwright unterstützt standardmäßig nur TypeScript/JavaScript
Playwright konfiguriert Ihre Testskripte standardmäßig so, dass sie in den folgenden Browsern im Headless-Modus ausgeführt werden. Die Konfiguration wird im Ordner mit dem Namen playwright.config.js

angezeigt

import { defineConfig, devices } from '@playwright/test';

/**

• Umgebungsvariablen aus Datei lesen.
• https://github.com/motdotla/dotenv*/ // dotenv aus 'dotenv' importieren; // Pfad aus 'Pfad' importieren; // dotenv.config({ path: path.resolve(__dirname, '.env') });

/**

• Siehe https://playwright.dev/docs/test-configuration.
  /
  Standard exportieren defineConfig({
  testDir: './tests',
  / Tests in Dateien parallel ausführen /
  FullyParallel: wahr,
  / Der Build auf CI schlägt fehl, wenn Sie test.only versehentlich im Quellcode belassen haben. /
  verbietenNur: !!process.env.CI,
  /Nur ​​CI erneut versuchen /
  Wiederholungsversuche: process.env.CI ? 2 : 0,
  / Deaktivieren Sie parallele Tests zu CI. /
  Arbeiter: process.env.CI ? 1: undefiniert,
  / Reporter zur Verwendung. Siehe https://playwright.dev/docs/test-reporters /
  Reporter: 'html',
  /Gemeinsame Einstellungen für alle unten aufgeführten Projekte. Siehe https://playwright.dev/docs/api/class-testoptions. /
  verwenden: {
  / Basis-URL zur Verwendung in Aktionen wie „await page.goto('/'“). */
  // baseURL: 'http://127.0.0.1:3000',

  /* Trace sammeln, wenn der fehlgeschlagene Test wiederholt wird. Siehe https://playwright.dev/docs/trace-viewer */
  Trace: 'on-first-retry',
  },

/* Projekte für die wichtigsten Browser konfigurieren */
Projekte: [
{
Name: 'Chrom',
use: { ...devices['Desktop Chrome'] },
},

npx playwright test

],

/* Führen Sie Ihren lokalen Entwicklungsserver aus, bevor Sie mit den Tests beginnen */
// webServer: {
// Befehl: 'npm run start',
// URL: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
Lassen Sie uns nun Änderungen vornehmen, um die Testskripte im Nicht-Headleases-Modus (Benutzeroberfläche) auszuführen und zusätzliche Browser hinzuzufügen. Playwright bietet außerdem Optionen zum Aufzeichnen der Testskriptausführung und Optionen zur Ablaufverfolgungsansicht, die beim Debuggen hilfreich sind. Wenn Sie die Trace-Viewer-Option aktivieren, können Sie den Status vor dem Test, den Status während des Tests und den Status nach dem Test sehen. Ich habe die Playwright-Konfigurationsdatei geändert und sie sieht wie folgt aus:

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
testDir: './tests',
FullyParallel: wahr,
verbietenNur: !!process.env.CI,
Wiederholungsversuche: process.env.CI ? 2 : 0,
Arbeiter: process.env.CI ? 1: undefiniert,
Reporter: 'html',
verwenden: {
Trace: 'on', // Tracing aktivieren
video: 'on', // Video für jeden Test aufzeichnen
headless: false, // Tests im Headed-Modus ausführen
},
Projekte: [
{
Name: 'Chrom',
use: { ...devices['Desktop Chrome'] },
},
{
Name: 'Firefox',
use: { ...devices['Desktop Firefox'] },
},
{
Name: 'Webkit',
use: { ...devices['Desktop Safari'] },
},
{
Name: 'Microsoft Edge',
verwenden: {
...Geräte['Desktop Edge'],
Kanal: 'msedge'
},
},
{
Name: 'Google Chrome',
verwenden: {
...Geräte['Desktop Chrome'],
Kanal: 'Chrome'
},
},
],
});
Jetzt können Testskripte die Tests auf den in der Konfigurationsdatei genannten Browsern im Non-Headless-Modus mit Aufzeichnung und Trace-Viewer-Option ausführen.

Viel Spaß beim Lernen!! Viel Spaß bei der Automatisierung!! Viel Spaß beim Testen

Sie können mir gerne alle Informationen/Fragen über santoshvqa@gmail.com und das LinkedIn-Profil zukommen lassen

https://www.linkedin.com/in/santosh-kulkarni-ab571639/

Das obige ist der detaillierte Inhalt vonAutomatisierung mit Playwright und TypeScript und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!