Playwright 数据提取和验证
Playwright 数据提取和验证（2025 年最新版）
数据提取（Extraction）和验证（Assertion）是 Playwright 在自动化测试和爬虫场景中最核心的部分。Playwright 提供了强大且可靠的 Locator API和Web-First 断言，能自动等待元素就绪，确保测试稳定。下面以Node.js/TypeScript（Playwright Test）为主，附 Python 示例。
1.数据提取（常见方式）
| 提取目标 | 代码示例（推荐 Locator） | 说明 |
|---|---|---|
| 单个元素文本 | const text = await page.getByRole('heading', { name: '欢迎' }).textContent(); | 返回字符串（null 如果不存在） |
| 输入框值 | const value = await page.getByLabel('用户名').inputValue(); | 适用于 input/textarea |
| 属性值 | const href = await page.getByRole('link', { name: '详情' }).getAttribute('href'); | 获取 href、src、data-* 等 |
| 多个元素文本 | const items = await page.getByRole('listitem').allTextContents(); | 返回 string[] 数组 |
| 多个元素内文本 | const texts = await page.getByTestId('price').allInnerTexts(); | innerText（不含子元素隐藏文本） |
| 元素计数 | const count = await page.getByRole('article').count(); | 返回元素数量 |
| 表格数据提取 | ```const | |
| JSON/API 数据 | const response = await page.waitForResponse('**/api/users');const json = await response.json(); | 拦截网络响应提取数据 |
2.验证（断言）——Playwright 最强大特性
Playwright 的expect是Web-First 断言：会自动重试直到超时（默认 30s），极大减少 flaky 测试。
import{test,expect}from'@playwright/test';// 页面标题awaitexpect(page).toHaveTitle('Playwright - 首页');awaitexpect(page).toHaveTitle(/Playwright/);// 正则匹配// URLawaitexpect(page).toHaveURL('https://playwright.dev/');awaitexpect(page).toHaveURL(/docs/);// 元素可见/隐藏awaitexpect(page.getByText('加载成功')).toBeVisible();awaitexpect(page.getByText('加载中')).toBeHidden();// 元素文本awaitexpect(page.getByRole('heading')).toHaveText('欢迎使用');awaitexpect(page.getByTestId('status')).toContainText('成功');// 包含// 元素属性awaitexpect(page.getByRole('link')).toHaveAttribute('href','/docs');awaitexpect(page.getByRole('img')).toHaveAttribute('src',/logo/);// 输入框值awaitexpect(page.getByLabel('搜索')).toHaveValue('Playwright');// 元素数量awaitexpect(page.getByRole('listitem')).toHaveCount(5);// Checkbox/Radio 状态awaitexpect(page.getByRole('checkbox')).toBeChecked();awaitexpect(page.getByRole('radio',{name:'男'})).toBeChecked();// 元素启用/禁用awaitexpect(page.getByRole('button')).toBeEnabled();awaitexpect(page.getByRole('button')).toBeDisabled();3.高级验证技巧
// 软断言（不立即失败，继续执行）expect.soft(page.getByText('错误提示')).toBeHidden();// 自定义超时awaitexpect(page.getByText('加载完成'),{timeout:10000}).toBeVisible();// 轮询断言（复杂条件）awaitexpect(async()=>{constcount=awaitpage.getByRole('listitem').count();expect(count).toBeGreaterThan(0);}).toPass({timeout:15000});// 截图断言（视觉回归）awaitexpect(page).toHaveScreenshot('homepage.png',{maxDiffPixels:100});// 全页面截图比较（像素级）awaitexpect(page).toHaveScreenshot({fullPage:true});4.实战示例：提取并验证搜索结果
test('百度搜索 Playwright 并验证结果',async({page})=>{awaitpage.goto('https://www.baidu.com');awaitpage.getByLabel('搜索输入框').fill('Playwright');awaitpage.getByRole('button',{name:'百度一下'}).click();// 等待结果加载awaitpage.waitForLoadState('networkidle');// 提取第一个结果标题constfirstTitle=awaitpage.getByRole('heading').first().textContent();console.log('第一个结果标题：',firstTitle);// 验证结果包含关键词awaitexpect(page.getByRole('heading').first()).toContainText('Playwright');awaitexpect(page.getByRole('heading')).toHaveCount(10);// 通常一页 10 条// 提取所有结果链接constlinks=awaitpage.getByRole('link',{name:/Playwright/}).all();console.log(`找到${links.length}个相关链接`);});5.Python 版提取与验证示例
fromplaywright.sync_apiimportsync_playwright,expectwithsync_playwright()asp:browser=p.chromium.launch(headless=False)page=browser.new_page()page.goto("https://playwright.dev")# 提取title=page.title()heading=page.get_by_role("heading",name="Fast and reliable").text_content()print(f"标题:{title}, 副标题:{heading}")# 验证expect(page).to_have_title("Playwright")expect(page.get_by_role("link",name="Get started")).to_be_visible()expect(page.get_by_text("Playwright is a")).to_contain_text("reliable")browser.close()最佳实践总结
- 提取：优先用
getByRole+textContent()/inputValue()。 - 验证：全部使用
expect()，让 Playwright 自动重试。 - 测试专用属性：在被测应用中添加
data-testid="xxx"，最稳定。 - 调试：失败时自动生成 trace（截图 + 视频 + 网络日志），用
npx playwright show-trace查看。
掌握这些，你就能轻松实现可靠的 E2E 测试和数据爬取！下一步建议：写一个完整的登录 + 列表页数据提取 + 验证的测试用例。
需要具体场景（如表格提取、分页加载、API 数据验证）的完整代码，随时告诉我！