Playwright教程基础篇 | 元素定位策略大全

摘要：// 通过ARIA角色定位await page.getByRole('button', { name: '提交' }).click;// 组合状态定位await page.getByRole('checkbox', { checked: true }).cli

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

// 通过ARIA角色定位await page.getByRole('button', { name: '提交' }).click;// 组合状态定位await page.getByRole('checkbox', { checked: true }).click;# 精确文本匹配page.get_by_text("立即购买").click# 正则表达式模糊匹配page.get_by_text(re.compile(r"订单\d+")).hover// 通过Label文本定位输入框await page.getByLabel('用户名').fill('testuser');// 占位符定位await page.getByPlaceholder('请输入手机号').type('13800138000');// Alt文本定位图片await page.getByAltText('公司Logo').click;// 基础CSS选择器await page.locator('#login-btn').click;// 伪类活用（匹配可见元素）await page.locator('button:visible').count;// 深度组合（父元素>子元素）await page.locator('.cart-list > .item:has(.price)').first.click;# 文本包含定位page.locator("xpath=//button[contains(text,'保存')]").click# 兄弟节点定位page.locator("//label[text='性别']/following-sibling::input[1]").check// 从父元素定位子元素const productCard = page.locator('.product-card').filter({ hasText: 'iPhone 15' });await productCard.getByRole('button', { name: '加入购物车' }).click;// 反向定位（子元素找父元素）const parentForm = page.locator('form:has(input[name="email"])');// 列表第N个元素await page.locator('.list-item').nth(3).click;// 最后一项操作await page.locator('ul>li').last.hover;# 部分属性匹配page.locator('[id^="dynamic_"]').click# 正则表达式匹配page.locator('id=/' + re.escape('prefix_') + r'\d+/').fill('text')策略类型执行速度稳定性可读性推荐指数Role定位⚡⚡⚡⚡⭐⭐⭐⭐⭐⭐⭐⭐★★★★★Text定位⚡⚡⚡⭐⭐⭐⭐⭐⭐⭐★★★★☆Label/Placeholder⚡⚡⚡⚡⭐⭐⭐⭐⭐⭐⭐★★★★☆CSS选择器⚡⚡⚡⚡⭐⭐⭐⭐★★★☆☆XPath⚡⚡⭐⭐★★☆☆☆// Playwright自动等待元素可操作await page.getByText('加载完成').click; // 内置30秒等待# 显式等待元素出现page.wait_for_selector('.toast-success', state='visible')# 等待元素消失page.wait_for_selector('#loading-spinner', state='hidden')// 创建自适应定位器const dynamicLocator = page.locator('button').filter({ has: page.locator('text=动态按钮')});// 使用时会重新查询await dynamicLocator.click;async function retryClick(locator, attempts = 3) {for (let i = 0; i // 在测试文件中使用test('定位验证', async ({ page }) => {await page.pause; // 启动交互式调试});// 在浏览器控制台验证>> playwright.$('text=立即购买')▶// locators.tsexport const LoginPageLocators = {usernameInput: => page.getByLabel('用户名'),passwordInput: => page.getByPlaceholder('密码'),submitButton: => page.getByRole('button', { name: '登录' })}// 注册自定义定位器import { test as base } from'@playwright/test';exportconst test = base.extend({getProductCard: async ({ page }, use) => {const getCard = (name) =>page.locator('.product').filter({ hasText: name });await use(getCard);}});// 使用test('购买商品', async ({ getProductCard }) => {const card = getProductCard('iPhone 15');await card.click;});# 运行定位器稳定性检测npx playwright test --grep "@sanity" --repeat-each 10问题场景现象解决方案动态ID每次刷新ID变化使用部分属性匹配 [id^="btn"]同类型元素过多定位到错误元素层级限定 .panel > buttoniframe嵌套定位不到内部元素frame.locator 上下文切换不可见元素元素存在但不可操作添加 state: 'visible' 条件多窗口/标签页操作上下文错误page.context 精准切换

升级你的定位思维：
从 “如何找到元素”转变为“如何描述用户可见的交互目标”;
掌握语义化定位，提升脚本健壮性