


Optimieren Sie Ihre ETests mit der Playwright- und Cucumber-Integration
Dec 30, 2024 am 09:37 AMEinführung
In diesem Beitrag erkläre ich Ihnen, warum Playwright und Cucumber außergewöhnliche Tools für End-to-End-Tests (E2E) sind. Anschließend befassen wir uns mit den Schritten zur Integration von Playwright für die nahtlose Nutzung in einer JavaScript-Frontend-Anwendung. Abschließend gebe ich Ihnen einige Profi-Tipps, um Ihre Effizienz mit Playwright zu maximieren.
Warum Dramatiker und Gurke?
Obwohl es zahlreiche leistungsfähige Tools zum Erstellen von E2E-Testsuiten gibt, erreicht keines die Synergie von Playwright und Cucumber.
Hier erfahren Sie, warum sich Playwright auf dem Markt durch das Schreiben von E2E-Tests auszeichnet, um nur einige zu nennen:
- 1. Jeder Browser, jede Plattform, eine API
- a. Browserübergreifend. Playwright unterstützt alle modernen Rendering-Engines, einschließlich Chromium, WebKit und Firefox.
- b. Plattformübergreifend. Testen Sie unter Windows, Linux und macOS, lokal oder auf CI, Headless oder Headed.
- c. Sprachübergreifend. Verwenden Sie die Playwright-API in TypeScript, JavaScript, Python, .NET und Java.
- 2. Belastbar, keine schuppigen Tests
- a. Automatisches Warten. Der Dramatiker wartet darauf, dass Elemente umsetzbar sind, bevor er Aktionen ausführt.
- b. Web-First-Behauptungen. Dramatiker-Behauptungen werden speziell für das dynamische Web erstellt.
- 3. Leistungsstarke Werkzeuge
- a. Codegen. Generieren Sie Tests, indem Sie Ihre Aktionen aufzeichnen. Speichern Sie sie in einer beliebigen Sprache.
- b. Dramatiker-Inspektor. Untersuchen Sie die Seite, generieren Sie Selektoren, durchlaufen Sie die Testausführung, sehen Sie sich Klickpunkte an und erkunden Sie Ausführungsprotokolle.
Ohne Cucumber kann die Verwaltung von Testcode jedoch zu einem Wartungsalbtraum werden. Cucumber erleichtert das Schreiben von Tests in einfacher, für Menschen lesbarer Sprache und macht sie auch für technisch nicht versierte Interessenten zugänglich. Als Eckpfeiler der verhaltensgesteuerten Entwicklung (BDD) fungiert Cucumber als technische Dokumentation und beschleunigt das Onboarding für neue Ingenieure.
Integration von Dramatiker und Gurke
Schritt 1: Abhängigkeiten installieren
Installieren Sie die erforderlichen Pakete mit npm oder Yarn.
npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently
Schritt 2: Projektstruktur einrichten
Organisieren Sie Ihr Projekt wie folgt:
cucumber.js cucumber.report.js /e2e /features example.feature /steps example.steps.js
Schritt 3: Gurke konfigurieren
Erstellen Sie eine Cucumber-Konfigurationsdatei (gurke.js) im Stammverzeichnis Ihres Projekts mit folgendem Inhalt:
// filepath: /cucumber.js module.exports = { default: { require: ["./steps/**/*.js"], format: ["pretty"], paths: ["./features/**/*.feature"], }, };
Schritt 4: Testbericht konfigurieren
Erstellen Siegurke.report.js – Eine Datei zum Konfigurieren des Testberichts. Konfigurationsmöglichkeiten finden Sie hier
// filepath: /cucumber.report.js import reporter from 'cucumber-html-reporter const options = { theme: 'bootstrap', output: report/report.html', jsonFile: 'report/report.json', brandTitle: 'E2E Test Report' };
Schritt 5: Schreiben Sie eine Feature-Datei
Erstellen Sie eine Feature-Datei im Features-Verzeichnis, z. B. example.feature:
npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently
Schritt 6: Schrittdefinitionen schreiben
Erstellen Sie eine Schrittdefinitionsdatei im Verzeichnis „steps“, z. B. example.steps.js:
cucumber.js cucumber.report.js /e2e /features example.feature /steps example.steps.js
Schritt 7: Fügen Sie ein NPM-Testskript hinzu
Fügen Sie ein Skript zu Ihrer package.json hinzu, um die Tests auszuführen:
// filepath: /cucumber.js module.exports = { default: { require: ["./steps/**/*.js"], format: ["pretty"], paths: ["./features/**/*.feature"], }, };
Das npm-Paket ist ein praktisches Tool, mit dem Sie zwei Prozesse gleichzeitig ausführen können. Um den E2E-Test auszuführen, müssen Sie auch die Anwendung ausführen, manchmal lokal und manchmal remote.
Schritt 8: Führen Sie Tests durch
Tests ausführen mit:
// filepath: /cucumber.report.js import reporter from 'cucumber-html-reporter const options = { theme: 'bootstrap', output: report/report.html', jsonFile: 'report/report.json', brandTitle: 'E2E Test Report' };
Profi-Tipps für Dramatiker
- 1. Fehlermeldungen – Lesen Sie sie sorgfältig durch – sie lokalisieren oft das Problem.
- 2. Iterative Entwicklung – Testen Sie kleine Codeabschnitte, um Probleme zu isolieren und zu lösen.
- 3. Playwright Inspector – Es kann helfen, Aktionen aufzuzeichnen und Testskripte automatisch zu generieren, sodass nur ein Stück Code geschrieben werden müsste. Sie können Playwright Inspector wie folgt starten
// filepath: /e2e/features/example.feature Feature: Example feature Scenario: Open a webpage Given I open the "https://example.com" page Then the title should be "Example.com"
- 4. Konsolenmeldungen protokollieren – Browser-Konsolenmeldung im Headless-Modus drucken, wie unten dargestellt
// filepath: /e2e/steps/example.steps.js import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber'; import { chromium, expect } from 'playwright'; setDefaultTimeout(30 * 1000); //milliseconds let browser, page, context; Before(async function(){ browser = await chromium.launch({headless: true}); context = await brwoser.newContext(); page = await content.newPage(); }); Given('I open the {string} page', async function (url) { await page.goto(url); }); Then('the title should be {string}', async function (title) { const pageTitle = await page.title(); expect(pageTitle).toHaveText(title); }); After(async function(){ await context.close(); await browser.close(); });
- 5. Behandeln Sie Lazy Loading – Verwenden Sie für Lazy Loading-Elemente die folgenden Funktionen
- a. waitForSelector oder waitFor
- b. waitForTimeout
- c. scrollIntoViewIfNeeded
- 6. DOM debuggen – Verwenden Sie document.querySelector oder einen anderen Abfrageselektor in der Browserkonsole, um die Elemente zu finden
- 7. Machen Sie einen Screenshot des Fehlers
Wenn Sie hier angekommen sind, habe ich mich zufriedenstellend bemüht, Sie weiterzulesen. Bitte hinterlassen Sie Kommentare oder teilen Sie Korrekturen mit.
Meine anderen Blogs:
- Webkomponente/MFE mit einfachem statischem HTML integrieren
- Super Software-Engineering-Interviews
- Meine Erfahrungen aus erster Hand mit Webkomponenten – Erkenntnisse und Einschränkungen
- Micro-Frontend Decision Framework
- Testen Sie den SOAP-Webdienst mit dem Postman Tool
Das obige ist der detaillierte Inhalt vonOptimieren Sie Ihre ETests mit der Playwright- und Cucumber-Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist

HTTP-Debugging mit Knoten und HTTP-Konsole

Benutzerdefinierte Google -Search -API -Setup -Tutorial

JQuery fügen Sie Scrollbar zu Div hinzu
