Playwright Data Extraction and Validation

Data extraction and validation are key to automated testing, mainly includingretrieving page data, assertion validation, screenshots, and recording, which not only verify whether functionality is correct, but also assist with debugging and regression testing.

Element Information Retrieval

In testing, you often need to read page information for validation. Playwright provides a rich set of APIs.

1. Get Text Content

2. Get Attribute Values

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

3. Get Style Information

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

4. Element State Checking

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

Assertions and Validation

Playwright providesa built-in assertion library（@playwright/test), making it easy to write test cases.

1. Built-in Assertion Methods

In@playwright/testIn , useexpectfor assertions.

2. Text Content Validation

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

3. Element State Validation

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

4. Page Title and URL Validation

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

Screenshots and Recording

Screenshots and recording are very useful in debugging, failure case analysis, and regression testing.

1. Page Screenshot

await page.screenshot({ path: 'screenshot.png', fullPage: true });

• path: Save path
• fullPage: Whether to capture the entire page

2. Element Screenshot

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

3. Video Recording

When creatingcontext, enable recording:

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

4. Screenshot Comparison (Snapshot Testing)

Playwright supports snapshot comparison, commonly used in regression testing.

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

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

It compares screenshots with baseline imageshomepage.pngto detect UI changes.

Okay ✅ Then I willChapter 6: Data Extraction and Validationadd acomplete practical case, and compilean API comparison table. This way you will have both practical experience and a quick reference table.

Practical Case — Login Validation and Screenshot Snapshot

This case covers:Information extraction + assertion validation + page screenshots。

This test will verify:

• Whether the page title and welcome text are correct
• Whether elements are visible / enabled
• Whether the user info attribute exists
• Page screenshot and UI snapshot comparison

Common API Table

Below isdata extraction and validationrelated API overview table.

Assertions and Validation (@playwright/test)

Screenshots and Recording