Optimieren Sie Ihre ETests mit der Playwright- und Cucumber-Integration

Einfü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!