PlayWright ist ein Web-UI-Automatisierungstest-Framework, das von Microsoft entwickelt wurde. Es zielt darauf ab, ein plattformübergreifendes, sprachübergreifendes und browserübergreifendes Automatisierungstest-Framework bereitzustellen, das auch mobile Browser unterstützt.

Wie auf der offiziellen Homepage beschrieben:

• Automatisches Warten, intelligente Zusicherungen für Seitenelemente und Ausführungsverfolgung machen es sehr effektiv bei der Bewältigung der Instabilität von Webseiten.
• Es steuert Browser in einem anderen Prozess als dem, der den Test ausführt, wodurch die Einschränkungen von In-Process-Testläufern beseitigt und die Shadow-DOM-Penetration unterstützt wird.
• PlayWright erstellt für jeden Test einen Browser-Kontext. Ein Browser-Kontext entspricht einem brandneuen Browserprofil und ermöglicht eine vollständige Testisolation ohne Kosten. Das Erstellen eines neuen Browser-Kontexts dauert nur wenige Millisekunden.
• Bietet Funktionen wie Code-Generierung, Schritt-für-Schritt-Debugging und Trace Viewer.

---

PlayWright vs. Selenium vs. Cypress

Welche sind die besten Web-UI-Automatisierungstest-Frameworks, die heute verfügbar sind? Zu den herausragenden Optionen gehören das jahrzehntealte Selenium, das in letzter Zeit beliebte Cypress und das, das wir hier vorstellen – PlayWright. Wie unterscheiden sie sich? Nachfolgend finden Sie einen zusammenfassenden Vergleich als Referenz

Key Comparisons:

• Supported Languages: PlayWright und Selenium unterstützen Java, C# und Python, was sie bei Testingenieuren, die möglicherweise nicht mit JavaScript/TypeScript vertraut sind, beliebter macht.
• Technical Approach: Sowohl PlayWright als auch Selenium verwenden das Remote Debugging Protocol von Google, um Chromium-basierte Browser zu steuern. Für Browser wie Firefox, ohne solche Protokolle, verwenden sie JavaScript-Injection. Selenium kapselt dies in einem Treiber, während PlayWright es direkt aufruft. Cypress hingegen verwendet JavaScript, um Browser zu steuern.
• Browser Support: Selenium unterstützt Internet Explorer, was irrelevant ist, da IE ausläuft.
• Ease of Use: Alle drei Frameworks haben eine Lernkurve. PlayWright und Cypress sind jedoch für einfache Szenarien benutzerfreundlicher als Selenium.

---

Getting Started

Obwohl PlayWright mehrere Sprachen unterstützt, ist es stark von Node.js abhängig. Unabhängig davon, ob Sie die Python- oder Java-Version verwenden, benötigt PlayWright während der Initialisierung eine Node.js-Umgebung und lädt einen Node.js-Treiber herunter. Daher konzentrieren wir uns in diesem Handbuch auf JavaScript/TypeScript.

Installation and Demo

1. Ensure Node.js is installed.

2. Initialize a PlayWright project using npm or yarn:

   # Using npm
   npm init playwright@latest
   
   # Using yarn
   yarn create playwright

3. Follow the prompts:

   • Choose TypeScript or JavaScript (default: TypeScript).
   • Specify the test directory name.
   • Decide whether to install PlayWright-supported browsers (default: True).

   If you choose to download browsers, PlayWright will download Chromium, Firefox, and WebKit, which may take some time. This process occurs only during the first setup unless the PlayWright version is updated.

Project Structure

After initialization, you’ll get a project template:

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

Run the example test case:

npx playwright test

The tests execute silently (in headless mode), and results are displayed as:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

---

Example Source Code

Here’s the example.spec.ts test case:

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/);
});

• First Test: Verifies the page title contains "Playwright".
• Second Test: Clicks the "Get started" link and verifies the URL.

Each test method has:

• A test name (e.g., 'has title').
• A function to execute the test logic.

Key methods include:

• page.goto: Navigates to a URL.
• expect(page).toHaveTitle: Asserts the page title.
• page.getByRole: Locates an element by its role.
• await: Waits for asynchronous operations to complete.

---

Running Tests from the Command Line

Here are common commands:

• Run all tests:

  npx playwright test

• Run a specific test file:

  npx playwright test landing-page.spec.ts

• Debug a test case:

  npx playwright test --debug

---

Code Recording

Use the codegen feature to record interactions:

npx playwright codegen https://leapcell.io/

Recorded code can be copied into your files. Note: The recorder might not handle complex actions like hovering.

---

In-Depth Playwright Guide

Actions and Behaviors

This section introduces some typical Playwright actions for interacting with page elements. Note that the locator object introduced earlier does not actually locate the element on the page during its creation. Even if the element doesn't exist on the page, using the element locator methods to get a locator object won't throw any exceptions. The actual element lookup happens only during the interaction. This differs from Selenium's findElement method, which directly searches for the element on the page and throws an exception if the element isn't found.

Text Input

Use the fill method for text input, mainly targeting <input>, <textarea>, or elements with the [contenteditable] attribute:

// Text input
await page.getByRole('textbox').fill('Peter');

Checkbox and Radio

Use locator.setChecked() or locator.check() to interact with input[type=checkbox], input[type=radio], or elements with the [role=checkbox] attribute:

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

Select Control

Use locator.selectOption() to interact with <select> elements:

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Mouse Clicks

Basic operations:

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

For elements covered by others, use force click:

await page.getByRole('button').click({ force: true });

Or trigger the click event programmatically:

await page.getByRole('button').dispatchEvent('click');

Typing Characters

The locator.type() method simulates typing character-by-character, triggering keydown, keyup, and keypress events:

await page.locator('#area').type('Hello World!');

Special Keys

Use locator.press() for special keys:

// Enter key
await page.getByText('Submit').press('Enter');

// Ctrl+Right Arrow
await page.getByRole('textbox').press('Control+ArrowRight');

// Dollar key
await page.getByRole('textbox').press('$');

Supported keys include Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9, and KeyA-KeyZ.

File Upload

Use locator.setInputFiles() to specify files for upload. Multiple files are supported:

// Upload a file
await page.getByLabel('Upload file').setInputFiles('myfile.pdf');

// Upload multiple files
await page.getByLabel('Upload files').setInputFiles(['file1.txt', 'file2.txt']);

// Remove files
await page.getByLabel('Upload file').setInputFiles([]);

// Upload from buffer
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

Focus Element

Use locator.focus() to focus on an element:

await page.getByLabel('Password').focus();

Drag and Drop

The drag-and-drop process involves four steps:

1. Hover the mouse over the draggable element.
2. Press the left mouse button.
3. Move the mouse to the target position.
4. Release the left mouse button.

You can use the locator.dragTo() method:

await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));

Alternatively, manually implement the process:

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

Dialog Handling

By default, Playwright automatically cancels dialogs like alert, confirm, and prompt. You can pre-register a dialog handler to accept dialogs:

page.on('dialog', dialog => dialog.accept());
await page.getByRole('button').click();

Handling New Pages

When a new page pops up, you can use the popup event to handle it:

const newPagePromise = page.waitForEvent('popup');
await page.getByText('Click me').click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

---

The Best Platform for Playwright: Leapcell

Leapcell is a modern cloud computing platform designed for distributed applications. It adopts a pay-as-you-go model with no idle costs, ensuring you only pay for the resources you use.

Unique Benefits of Leapcell for Playwright Applications

1. Cost Efficiency

   • Pay-as-you-go: Avoid resource waste during low traffic and scale up automatically during peak times.
   • Real-world example: For example, on getdeploying.com’s calculations, renting a 1 vCPU and 2 GB RAM virtual machine in traditional cloud services costs around $25 per month. On Leapcell, $25 can support a service handling 6.94 million requests with an average response time of 60 ms, giving you better value for money.

2. Developer Experience

   • Ease of use: Intuitive interface with minimal setup requirements.
   • Automation: Simplifies development, testing, and deployment.
   • Seamless integration: Supports Go, Python, Node.js, Rust, and more.

3. Scalability and Performance

   • Auto-scaling: Dynamically adjusts resources to maintain optimal performance.
   • Asynchronous optimization: Handles high-concurrency tasks with ease.
   • Global reach: Low-latency access supported by distributed data centers.

For more deployment examples, refer to the documentation.