Playwright Datenextraktion und Validierung

Datenextraktion und -Validierung sind entscheidend für automatisiertes Testen, hauptsächlich einschließlichAbrufen von Seitendaten, Assertion-Validierung, Screenshots und Aufzeichnung, die nicht nur überprüfen, ob die Funktionalität korrekt ist, sondern auch beim Debugging und bei Regressionstests helfen.

Abrufen von Elementinformationen

Beim Testen müssen Sie häufig Seiteninformationen zur Validierung lesen. Playwright bietet einen umfangreichen Satz von APIs.

1. Textinhalt abrufen

Beispiel

// Text eines einzelnen Elements abrufen
const text = await page.textContent('#welcome');
console.log(text);

// Den Text mehrerer Elemente abrufen
const items = await page.$$eval('.list-item', els => els.map(e => e.textContent));
console.log(items);

2. Attributwerte abrufen

const value = await page.getAttribute('#username', 'placeholder');
console.log(value); // "请输入用户名"

3. Style-Informationen abrufen

// 获取元素的 style 属性
const color = await page.$eval('#btn', el => getComputedStyle(el).color);
console.log(color);

4. Elementzustand prüfen

await page.isVisible('#dialog');   // 是否可见
await page.isHidden('#loading');   // 是否隐藏
await page.isEnabled('#submit');   // 是否可用
await page.isDisabled('#submit');  // 是否禁用
await page.isChecked('#agree');    // 复选框是否选中

Assertions und Validierung

Playwright bieteteine integrierte Assertion-Bibliothek（@playwright/test), was das Schreiben von Testfällen erleichtert.

1. Integrierte Assertion-Methoden

In@playwright/testIn , verwenden Sieexpectfür Assertions.

Beispiel

import { test, expect } from '@playwright/test';

test('Validation Example', async ({ page }) => {
  await page.goto('https://example.com');

  // Text-Assertion
  await expect(page.locator('h1')).toHaveText('Example Domain');

  // Attribut-Assertion
  await expect(page.locator('a')).toHaveAttribute('href', 'https://www.iana.org/domains/example');

  // Sichtbarkeits-Assertion
  await expect(page.locator('h1')).toBeVisible();
});

2. Validierung des Textinhalts

await expect(page.locator('#message')).toHaveText('登录成功');
await expect(page.locator('#username')).toHaveValue('testuser');

3. Validierung des Elementzustands

await expect(page.locator('#submit')).toBeEnabled();
await expect(page.locator('#agree')).toBeChecked();
await expect(page.locator('#loading')).toBeHidden();

4. Validierung von Seitentitel und URL

await expect(page).toHaveTitle(/Playwright/);
await expect(page).toHaveURL('https://playwright.dev/');

Screenshots und Aufzeichnung

Screenshots und Aufzeichnungen sind sehr nützlich beim Debugging, bei der Fehlerfallanalyse und beim Regressionstest.

1. Seiten-Screenshot

await page.screenshot({ path: 'screenshot.png', fullPage: true });
  • path: Speicherpfad
  • fullPage: Ob die gesamte Seite erfasst werden soll

2. Element-Screenshot

const element = page.locator('#logo');
await element.screenshot({ path: 'logo.png' });

3. Videoaufzeichnung

Beim Erstellencontext, Aufzeichnung aktivieren:

const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});
const page = await context.newPage();
await page.goto('https://example.com');
await context.close(); // 关闭后保存视频

4. Screenshot-Vergleich (Snapshot-Testing)

Playwright unterstützt Snapshot-Vergleich, der häufig bei Regressionstests verwendet wird.

import { test, expect } from '@playwright/test';

test('页面快照测试', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});

Es vergleicht Screenshots mit Referenzbildernhomepage.pngum UI-Änderungen zu erkennen.

Okay ✅ Dann werde ichKapitel 6: Datenextraktion und Validierungeinenvollständigen praktischen Fallhinzufügen undeine API-Vergleichstabelle erstellen. Auf diese Weise haben Sie sowohl praktische Erfahrung als auch eine Schnellreferenztabelle.

Praktischer Fall — Login-Validierung und Screenshot-Snapshot

Dieser Fall behandelt:Informationsextraktion + Assertion-Validierung + Seiten-Screenshots。

Beispiel

// login-test.spec.js
import { test, expect } from '@playwright/test';

test('Benutzeranmeldung und Überprüfung der Ergebnisse', async ({ page }) => {
  // 1. Login-Seite öffnen
  await page.goto('https://example.com/login');

  // 2. Benutzername und Passwort eingeben
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'Password123');

  // 3. Auf Anmelden klicken
  await page.click('#submit');

  // 4. Auf Weiterleitung warten und Titel prüfen
  await expect(page).toHaveTitle(/Dashboard/);

  // 5. Willkommenstext überprüfen
  await expect(page.locator('.welcome')).toHaveText('Welcome, testuser');

  // 6. Button-Status prüfen
  await expect(page.locator('#logout')).toBeVisible();
  await expect(page.locator('#logout')).toBeEnabled();

  // 7. Benutzer-ID-Attribut abrufen und überprüfen
  const userId = await page.getAttribute('#user-profile', 'data-id');
  console.log('User ID:', userId);
  expect(userId).not.toBeNull();

  // 8. Seiten-Screenshot
  await page.screenshot({ path: 'login-success.png', fullPage: wahr });

  // 9. Snapshot-Vergleich (UI-Regressionstests)
  expect(await page.screenshot()).toMatchSnapshot('dashboard.png');
});

Dieser Test überprüft:

  • Ob der Seitentitel und der Begrüßungstext korrekt sind
  • Ob Elemente sichtbar / aktiviert sind
  • Ob das Benutzerinfo-Attribut existiert
  • Vergleich von Seiten-Screenshot und UI-Snapshot

Gängige API-Tabelle

Nachfolgend istDatenextraktion und -validierungzugehörige API-Übersichtstabelle.

Methode Beschreibung Beispiel
page.textContent(selector) Element-Textinhalt abrufen await page.textContent('#msg')
page.innerText(selector) Gerenderten reinen Text abrufen await page.innerText('#msg')
page.innerHTML(selector) Element-HTML abrufen await page.innerHTML('#content')
page.getAttribute(selector, name) Attributwert abrufen await page.getAttribute('#btn', 'class')
page.$eval(selector, fn) Eine Funktion auf dem Element ausführen await page.$eval('#logo', el => el.tagName)
page.$$eval(selector, fn) Funktionen im Batch ausführen await page.$$eval('.item', els => els.length)
page.isVisible(selector) Ist sichtbar await page.isVisible('#dialog')
page.isHidden(selector) Ist ausgeblendet await page.isHidden('#loading')
page.isEnabled(selector) Ist aktiviert await page.isEnabled('#submit')
page.isDisabled(selector) Ist deaktiviert await page.isDisabled('#submit')
page.isChecked(selector) Ist markiert await page.isChecked('#agree')

Assertions und Validierung (@playwright/test)

Methode Beschreibung Beispiel
expect(locator).toHaveText(value) Text überprüfen expect(page.locator('h1')).toHaveText('欢迎')
expect(locator).toHaveValue(value) Eingabewert überprüfen expect(page.locator('#user')).toHaveValue('test')
expect(locator).toHaveAttribute(name, value) Attribut überprüfen expect(page.locator('#btn')).toHaveAttribute('type', 'submit')
expect(locator).toBeVisible() Element ist sichtbar expect(page.locator('#msg')).toBeVisible()
expect(locator).toBeHidden() Element ist ausgeblendet expect(page.locator('#loading')).toBeHidden()
expect(locator).toBeEnabled() Element ist aktiviert expect(page.locator('#submit')).toBeEnabled()
expect(locator).toBeDisabled() Element ist deaktiviert expect(page.locator('#submit')).toBeDisabled()
expect(locator).toBeChecked() Element ist markiert expect(page.locator('#agree')).toBeChecked()
expect(page).toHaveTitle(title) Überprüfung des Seitentitels expect(page).toHaveTitle(/Dashboard/)
expect(page).toHaveURL(url) Überprüfung der Seiten-URL expect(page).toHaveURL('https://example.com/dashboard')

Screenshots und Aufzeichnung

Methode Beschreibung Beispiel
page.screenshot(options) Seiten-Screenshot await page.screenshot({ path: 'page.png' })
locator.screenshot(options) Element-Screenshot await page.locator('#logo').screenshot({ path: 'logo.png' })
context = browser.newContext({ recordVideo }) Videoaufzeichnung aktivieren recordVideo: { dir: 'videos/' }
expect(await page.screenshot()).toMatchSnapshot(name) Screenshot-Vergleich (Snapshot-Testing) expect(await page.screenshot()).toMatchSnapshot('home.png')
Andere Erweiterungen