Extraction et validation des données avec Playwright

L'extraction et la validation de données sont essentielles aux tests automatisés, comprenant principalementla récupération des données de page, la validation des assertions, les captures d'écran et l'enregistrement, qui permettent non seulement de vérifier si les fonctionnalités sont correctes, mais aussi de faciliter le débogage et les tests de régression.

Récupération des informations sur les éléments

Lors des tests, vous devez souvent lire les informations de la page pour validation. Playwright fournit un riche ensemble d'API.

1. Obtenir le contenu textuel

2. Obtenir les valeurs d'attributs

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

3. Obtenir les informations de style

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

4. Vérification de l'état des éléments

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

Assertions et validation

Playwright fournitune bibliothèque d'assertions intégrée（@playwright/test), ce qui facilite l'écriture de cas de test.

1. Méthodes d'assertion intégrées

Dans@playwright/testDans , utilisezexpectpour les assertions.

2. Validation du contenu textuel

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

3. Validation de l'état des éléments

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

4. Validation du titre de la page et de l'URL

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

Captures d'écran et enregistrement

Les captures d'écran et l'enregistrement sont très utiles pour le débogage, l'analyse des cas d'échec et les tests de régression.

1. Capture d'écran de la page

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

• path: Chemin d'enregistrement
• fullPage: Indique s'il faut capturer toute la page

2. Capture d'écran d'un élément

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

3. Enregistrement vidéo

Lors de la créationcontext, activez l'enregistrement :

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

4. Comparaison de captures d'écran (tests d'instantanés)

Playwright prend en charge la comparaison d'instantanés, couramment utilisée dans les tests de régression.

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

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

Il compare les captures d'écran avec les images de référencehomepage.pngpour détecter les changements d'interface.

D'accord ✅ Ensuite, je vaisChapitre 6 : Extraction et validation des donnéesajouter uncas pratique complet, et compilerun tableau comparatif d'API. Ainsi, vous aurez à la fois une expérience pratique et un tableau de référence rapide.

Cas pratique — Validation de connexion et capture d'écran instantanée

Ce cas couvre :Extraction d'informations + validation d'assertions + captures d'écran de page。

Ce test vérifiera :

• Si le titre de la page et le texte d'accueil sont corrects
• Si les éléments sont visibles / activés
• Si l'attribut d'informations utilisateur existe
• Comparaison de capture d'écran de page et d'instantané d'interface utilisateur

Tableau des API courantes

Ci-dessous se trouve le tableau récapitulatif des API liées àl'extraction et à la validation des données.

Assertions et validation (@playwright/test)

Captures d'écran et enregistrement