Извлечение данных и валидация в Playwright

Извлечение и проверка данных — ключевые для автоматизированного тестирования, в основном включаютполучение данных страницы, проверку утверждений, скриншоты и запись; они не только проверяют, корректна ли функциональность, но и помогают при отладке и регрессионном тестировании.

Получение информации об элементах

При тестировании часто нужно считывать информацию со страницы для проверки. Playwright предоставляет богатый набор API.

1. Получение текстового содержимого

2. Получить значения атрибутов

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

3. Получить информацию о стилях

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

4. Проверка состояния элемента

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

Утверждения и валидация

Playwright предоставляетвстроенную библиотеку утверждений（@playwright/test), что упрощает написание тестовых сценариев.

1. Встроенные методы утверждений

В@playwright/testВ , используйтеexpectдля проверок.

2. Проверка текстового содержимого

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

3. Проверка состояния элемента

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

4. Проверка заголовка и URL страницы

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

Скриншоты и запись

Скриншоты и запись очень полезны при отладке, анализе случаев сбоя и регрессионном тестировании.

1. Скриншот страницы

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

• path: Путь сохранения
• fullPage: Захватывать ли всю страницу

2. Скриншот элемента

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

3. Запись видео

При созданииcontext, включите запись:

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

4. Сравнение скриншотов (тестирование снимков)

Playwright поддерживает сравнение снимков, обычно используется при регрессионном тестировании.

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

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

Он сравнивает скриншоты с эталонными изображениямиhomepage.pngчтобы обнаруживать изменения интерфейса.

Хорошо ✅ Тогда яГлава 6: Извлечение данных и валидациядобавлюполный практический пример, и составлютаблицу сравнения API. Таким образом, у вас будет и практический опыт, и краткая справочная таблица.

Практический пример — проверка входа и снимок экрана

Этот пример охватывает:Извлечение информации + проверка утверждений + скриншоты страниц。

Этот тест проверит:

• Правильность заголовка страницы и приветственного текста
• Видимость / доступность элементов
• Наличие атрибута информации о пользователе
• Сравнение скриншота страницы и снимка UI

Таблица общих API

Ниже представленасводная таблица API, связанного с извлечением и проверкой данных.

Утверждения и валидация (@playwright/test)

Скриншоты и запись