Playwright初学指南 (2)：全面解析元素定位策略

一、元素定位为何如此关键？

在Web自动化测试中，75%的脚本失败源于元素定位失效。Playwright提供革命性的定位体系，相比传统工具有三大优势：

1. 智能等待机制 - 自动处理动态加载元素

2. 语义化定位器 - 告别脆弱的XPath/CSS选择器

3. 多维度匹配 - 文本/角色/位置等多属性组合定位

二、八大核心定位策略详解

策略1：语义化角色定位（推荐首选）

// 通过ARIA角色定位
await page.getByRole('button', { name: '提交' }).click();

// 组合状态定位
await page.getByRole('checkbox', { checked: true }).click();

适用场景：表单控件、交互元素
优势：最接近用户操作视角，抵抗UI样式变更

策略2：文本内容定位

# 精确文本匹配
page.get_by_text("立即购买").click()

# 正则表达式模糊匹配
page.get_by_text(re.compile(r"订单\d+")).hover()

适用场景：按钮/链接/提示文本
避坑指南：避免在多语言网站硬编码文本

策略3：标签属性定位

// 通过Label文本定位输入框
await page.getByLabel('用户名').fill('testuser');

// 占位符定位
await page.getByPlaceholder('请输入手机号').type('13800138000');

// Alt文本定位图片
await page.getByAltText('公司Logo').click();

策略4：CSS选择器进阶

// 基础CSS选择器
await page.locator('#login-btn').click();

// 伪类活用（匹配可见元素）
await page.locator('button:visible').count();

// 深度组合（父元素>子元素）
await page.locator('.cart-list > .item:has(.price)').first().click();

策略5：XPath高阶技巧

# 文本包含定位
page.locator("xpath=//button[contains(text(),'保存')]").click()

# 兄弟节点定位
page.locator("//label[text()='性别']/following-sibling::input[1]").check()

策略6：元素层级链式定位

// 从父元素定位子