YouTip

Data extraction and validation are key to automated testing, mainly including **getting page data, assertion validation, screenshots and recording**, which not only verify whether functions are correct, but also assist in debugging and regression testing.\\n\\n## Element Information Retrieval\\n\\nIn testing, it is often necessary to read page information for verification. Playwright provides rich APIs.\\n\\n### 1. Getting Text Content\\n\\n## Example\\n\\n// Get text of a single element\\n\\nconst text = await page.textContent('#welcome');\\n\\n console.log(text);\\n\\n// Get text of multiple elements\\n\\nconst items = await page.$$eval('.list-item', els => els.map(e => e.textContent));\\n\\n console.log(items);\\n\\n### 2. Getting Attribute Values\\n\\nconst value = await page.getAttribute('#username', 'placeholder'); console.log(value); // "Please enter username"\\n### 3. Getting Style Information\\n\\n// Get element's style attributeconst color = await page.$eval('#btn', el => getComputedStyle(el).color); console.log(color);\\n### 4. Element State Checking\\n\\nawait page.isVisible('#dialog'); // Whether visible await page.isHidden('#loading'); // Whether hidden await page.isEnabled('#submit'); // Whether enabled await page.isDisabled('#submit'); // Whether disabled await page.isChecked('#agree'); // Whether checkbox is checked\\n\\n* * *\\n\\n## Assertions and Validation\\n\\nPlaywright provides a **built-in assertion library** (`@playwright/test`) for writing test cases.\\n\\n### 1. Built-in Assertion Methods\\n\\nIn `@playwright/test`, use `expect` for assertions.\\n\\n## Example\\n\\nimport{ test, expect } from '@playwright/test';\\n\\ntest('Validation example', async ({ page })=>{\\n\\n await page.goto('https://example.com');\\n\\n// Text assertion\\n\\n await expect(page.locator('h1')).toHaveText('Example Domain');\\n\\n// Attribute assertion\\n\\n await expect(page.locator('a')).toHaveAttribute('href','https://www.iana.org/domains/example');\\n\\n// Visibility assertion\\n\\n await expect(page.locator('h1')).toBeVisible();\\n\\n});\\n\\n### 2. Text Content Validation\\n\\nawait expect(page.locator('#message')).toHaveText('Login Successful'); await expect(page.locator('#username')).toHaveValue('testuser');\\n### 3. Element State Validation\\n\\nawait expect(page.locator('#submit')).toBeEnabled(); await expect(page.locator('#agree')).toBeChecked(); await expect(page.locator('#loading')).toBeHidden();\\n### 4. Page Title and URL Validation\\n\\nawait expect(page).toHaveTitle(/Playwright/); await expect(page).toHaveURL('https://playwright.dev/');\\n\\n* * *\\n\\n## Screenshots and Recording\\n\\nScreenshots and recording are very useful for debugging, failed case analysis, and regression testing.\\n\\n### 1. Page Screenshot\\n\\nawait page.screenshot({ path: 'screenshot.png', fullPage: true });\\n* `path`: Save path\\n* `fullPage`: Whether to capture the entire page\\n\\n### 2. Element Screenshot\\n\\nconst element = page.locator('#logo'); await element.screenshot({ path: 'logo.png' });\\n### 3. Video Recording\\n\\nEnable recording when creating `context`:\\n\\nconst context = await browser.newContext({ recordVideo: { dir: 'videos/' }});const page = await context.newPage(); await page.goto('https://example.com'); await context.close(); // Video saved after closing\\n### 4. Screenshot Comparison (Snapshot Testing)\\n\\nPlaywright supports snapshot comparison, commonly used for regression testing.\\n\\nimport { test, expect } from '@playwright/test'; test('Page snapshot test', async ({ page }) => { await page.goto('https://playwright.dev'); expect(await page.screenshot()).toMatchSnapshot('homepage.png');});\\nCompares the screenshot with the baseline image `homepage.png` to detect UI changes.\\n\\nGood ✅ Now let me add a **complete practical case** for **Chapter 6: Data Extraction and Validation**, and organize an **API reference table**. This way you'll have both practical examples and quick reference.\\n\\n* * *\\n\\n## Practical Case — Login Validation and Screenshot Snapshot\\n\\nThis case covers: **information extraction + assertion validation + page screenshot**.\\n\\n## Example\\n\\n// login-test.spec.js\\n\\nimport{ test, expect } from '@playwright/test';\\n\\ntest('User login and result validation', async ({ page })=>{\\n\\n// 1. Open login page\\n\\n await page.goto('https://example.com/login');\\n\\n// 2. Enter username and password\\n\\n await page.fill('#username','testuser');\\n\\n await page.fill('#password','Password123');\\n\\n// 3. Click login\\n\\n await page.click('#submit');\\n\\n// 4. Wait for redirect and check title\\n\\n await expect(page).toHaveTitle(/Dashboard/);\\n\\n// 5. Verify welcome text\\n\\n await expect(page.locator('.welcome')).toHaveText('Welcome，testuser');\\n\\n// 6. Check button state\\n\\n await expect(page.locator('#logout')).toBeVisible();\\n\\n await expect(page.locator('#logout')).toBeEnabled();\\n\\n// 7. Get user ID attribute and validate\\n\\nconst userId = await page.getAttribute('#user-profile','data-id');\\n\\n console.log('User ID:', userId);\\n\\n expect(userId).not.toBeNull();\\n\\n// 8. Page screenshot\\n\\n await page.screenshot({ path:'login-success.png', fullPage:true});\\n\\n// 9. Snapshot comparison (UI regression test)\\n\\n expect(await page.screenshot()).toMatchSnapshot('dashboard.png');\\n\\n});\\n\\nThis test validates:\\n\\n* Whether page title and welcome text are correct\\n* Whether elements are visible / enabled\\n* Whether user info attribute exists\\n* Page screenshot and UI snapshot comparison\\n\\n* * *\\n\\n## Common API Table\\n\\nBelow is a reference table for **data extraction and validation** related APIs.\\n\\n| Method | Description | Example |\\n| --- | --- | --- |\\n| `page.textContent(selector)` | Get element text content | `await page.textContent('#msg')` |\\n| `page.innerText(selector)` | Get rendered plain text | `await page.innerText('#msg')` |\\n| `page.innerHTML(selector)` | Get element HTML | `await page.innerHTML('#content')` |\\n| `page.getAttribute(selector, name)` | Get attribute value | `await page.getAttribute('#btn', 'class')` |\\n| `page.$eval(selector, fn)` | Execute function on element | `await page.$eval('#logo', el => el.tagName)` |\\n| `page.$$eval(selector, fn)` | Batch execute function | `await page.$$eval('.item', els => els.length)` |\\n| `page.isVisible(selector)` | Whether visible | `await page.isVisible('#dialog')` |\\n| `page.isHidden(selector)` | Whether hidden | `await page.isHidden('#loading')` |\\n| `page.isEnabled(selector)` | Whether enabled | `await page.isEnabled('#submit')` |\\n| `page.isDisabled(selector)` | Whether disabled | `await page.isDisabled('#submit')` |\\n| `page.isChecked(selector)` | Whether checked | `await page.isChecked('#agree')` |\\n\\n### Assertions and Validation (@playwright/test)\\n\\n| Method | Description | Example |\\n| --- | --- | --- |\\n| `expect(locator).toHaveText(value)` | Validate text | `expect(page.locator('h1')).toHaveText('Welcome')` |\\n| `expect(locator).toHaveValue(value)` | Validate input value | `expect(page.locator('#user')).toHaveValue('test')` |\\n| `expect(locator).toHaveAttribute(name, value)` | Validate attribute | `expect(page.locator('#btn')).toHaveAttribute('type', 'submit')` |\\n| `expect(locator).toBeVisible()` | Element visible | `expect(page.locator('#msg')).toBeVisible()` |\\n| `expect(locator).toBeHidden()` | Element hidden | `expect(page.locator('#loading')).toBeHidden()` |\\n| `expect(locator).toBeEnabled()` | Element enabled | `expect(page.locator('#submit')).toBeEnabled()` |\\n| `expect(locator).toBeDisabled()` | Element disabled | `expect(page.locator('#submit')).toBeDisabled()` |\\n| `expect(locator).toBeChecked()` | Element checked | `expect(page.locator('#agree')).toBeChecked()` |\\n| `expect(page).toHaveTitle(title)` | Page title validation | `expect(page).toHaveTitle(/Dashboard/)` |\\n| `expect(page).toHaveURL(url)` | Page URL validation | `expect(page).toHaveURL('https://example.com/dashboard')` |\\n\\n### Screenshots and Recording\\n\\n| Method | Description | Example |\\n| --- | --- | --- |\\n| `page.screenshot(options)` | Page screenshot | `await page.screenshot({ path: 'page.png' })` |\\n| `locator.screenshot(options)` | Element screenshot | `await page.locator('#logo').screenshot({ path: 'logo.png' })` |\\n| `context = browser.newContext({ recordVideo })` | Enable video recording | `recordVideo: { dir: 'videos/' }` |\\n| `expect(await page.screenshot()).toMatchSnapshot(name)` | Screenshot comparison (snapshot test) | `expect(await page.screenshot()).toMatchSnapshot('home.png')` |