当前位置：首页 > news >正文

UI自动化神器：Playwright元素定位方法！

news 2025/7/12 8:13:37

你是否曾在 UI 自动化中被“元素定位失败”困扰？或是因为页面结构频繁变动，测试脚本不断崩掉？在 Selenium 和 Cypress 的时代，这确实令人头疼。但 Playwright 却以其“智能等待”和“Locator API”带来颠覆性体验：自动等待、动态重试、更语义化——让定位在准确与稳定间找到平衡。

Web 应用的复杂性和用户期望不断攀升，单页应用（SPA）和跨浏览器兼容性让 UI 自动化测试变得至关重要。想象一下，您的电商平台上线后，用户因登录失败或搜索功能异常而流失，业务损失可能高达数千元！Playwright 作为一款强大的 UI 自动化测试工具，以其跨浏览器支持、自动等待机制和灵活的元素定位方法，成为开发者的“神器”。今天，我们为您献上一份 Playwright 元素定位方法与实战案例全面指南，从基础定位到复杂场景，带您从入门到精通！

Playwright 的定位方法为何备受推崇？通过本文，我们将深入解答这些问题，带您从理论到实践，全面掌握 Playwright 元素定位的精髓！

Playwright 是微软开发的 Web应用的自动化测试框架，它可以弥补传统UI自动化框架selenium很多的不足，在目前众多的UI自动化测试工具中脱颖而出。所以，本文章给大家介绍这个UI自动化神器的安装使用和元素定位方法，如果还没有用过的同学可以赶紧get起来哦~！

playwright介绍

Playwright 是由微软 2020年开发发布的一款新型自动化测试框架，可以 UI自动化测试和接口自动化测试移动端的web仿真应用。Playwright 是基于 Node.js 语言开发的，而且不需要再重新下载一个浏览器驱动，相当于已经写好了，仅仅需要安装这个库即可。

官方中文文档：https://playwright.net.cn/python/docs/intro

相比于selenium的优势：

不用自己安装浏览器，也不用安装驱动，不用考虑驱动和浏览器的兼容性，更稳定且兼容性更好
内部自带等待机制不用自己写太多的等待
自带很丰富的断言的方法
Playwright 通过使用浏览器的底层调试协议来进行操作，相比于 Selenium 和 pyppeteer，它具有更快的执行速度和更低的资源消耗
支持异步请求操作，可以跨多个窗口操作不相互影响能实现相互隔离，快速执行
支持屏幕录制功能：根据屏幕录制指定生成相关操作代码。
自带定位检测器：帮助我们做元素定位，也可以像selenium F12自己写元素定位，支持丰富的元素定位的方法

playwright的特色：

1）跨浏览器支持：包括 Chrome、Firefox 和 WebKit内核的浏览器。

2）跨平台：在 Windows、Linux 和 macOS 上进行本地或 CI 测试，无头或有头模式。

3）跨语言：在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API

4）测试移动端：适用于 Android 的 Google Chrome 和 Mobile Safari 的原生移动模拟。

安装环境：

1）安装playwright： pip install playwright
2）安装浏览器驱动：
- playwright install ：会安装 Chromium、Firefox 和 WebKit 的浏览器二进制文件
- 也可以通过提供参数来安装特定浏览器：playwright install webkit
- playwright install --help 可以查看支持哪些浏览器

3）安装pytest插件： Playwright 推荐使用官方的 Playwright Pytest 插件来编写端到端测试。
- pip install pytest-playwright

观点与案例结合

playwright的元素定位

playwright的元素定位方法有很多，官方文档：https://playwright.net.cn/python/docs/locators

第一类：get_by_xx定位

1、 get_by_role: 通过角色方式定位元素，适用按钮、复选框、弹框等；常用的参数有两个，第一个是角色名称 role，第二个是元素的文本 name 或者value的值

page.get_by_role("link", name="新闻").click() # 百度新闻链接
page.get_by_role("button",name="百度一下").click() #百度一下按钮

2、get_by_text: 通过元素的文本内容来查找元素，适用于链接文本、或者span标签中的文本等；包含两个参数，一个是 text标识定位的文本内容，第二个是 exact 表示是否精确匹配；

默认是模糊匹配的，要精准匹配就加上参数exact=True；
page.get_by_text("百度一下",exact=True).click()
page.get_by_text("新闻", exact=True).click() #会自动忽略文本开头和结尾的空白字符

3、get_by_placeholder: 通过元素的 placeholder 属性来查找元素，也就是我们输入框的提示信息。他的参数和 get_by_text相同

exact=True：表示是否精确匹配
page.get_by_placeholder("请输入邮箱/手机号/账号").fill("zhuque") #课堂派的用户名输入框

还有很多其他的定位，但是这种定位方法了解即可，我们只需要使用第二种定位器locator，因为可以实现一切元素定位。

第二类：locator定位器，重点掌握，后面只需要用这个

这个locator方法返回的是一个locator定位器对象【不是selenium的element对象】：这个locator对象支持各种操作方法，通过locator定位器来找元素 :

1）id属性定位： page.locator("id=kw").fill("韩梅梅")
2）元素指定属性定位：page.locator("[attribute=value]")
3）CSS selector定位
4）Xpath定位

对css和xpath后面可以自动识别xpath和css selector的表达式；我们先来学习一下css和xpath定位方法：

xpath定位(相对) ：万能，推荐使用，重点学习。
css selector：有弊端，不能支持文本定位，但是xpath可以。而且只支持web页面，app不支持。所以，不如xpath用的多。

1）css选择器元素定位 --了解

1、根据ID定位：两种写法都可以

page.locator("#kw").fill("朱雀")

2、根据className定位：可以支持多个样式一起写

page.locator(".s_ipt").fill("python")  # 百度搜索框page.locator(".s-top-right-text.c-font-normal.c-color-t.s-top-right-new").click()  # 百度设置按钮

3、单属性选择定位：需要其他的属性一起定位，可以用标签[属性名=“属性值”]

page.locator("input[name='wd']").fill("python")   # 百度搜索框

4、多属性选择定位：如果一个属性不能唯一定位，用个属性组合

page.locator("input[name='wd'][id='kw']").fill("python")

2）xpath元素定位：支持web页面+App页+小程序，高级强大，重点学习。属性 +文本+组合方式灵活。

xpath其实就是一个path（路径），一个描述页面元素位置信息的路径，相当于元素的坐标
xpath基于XML文档树状结构，是XML路径语言，用来查询xml文档中的节点
既可以用于XML，也可以用于HTML（因为XML与HTML结构类似，所以xpath都可以解析）

绝对路径：从根节点开始，一层一层写出来，直到要找到元素。父/子路径和位置都涵盖了，所以特别不稳定。

从根节点（/）开始，一层一层写出来，直到要找到元素。父/子【路径和位置依赖】
copy xpath ：/html/body/div[2]/div[2]/div/div[1]/div[2]/ul/li[1]/a[2] -- 9代单传的路径。

相对路径：以//开头，相对于某个节点的路径来找通过条件在html里面找。

在页面当中查看xpath表达式，可以匹配多少元素：F12 -- ctrl + F

1、第一种写法：

//元素标签名称[@属性=值] # 属性值是不变的。 == 区分一下css选择器，不管是什么属性都是@
//元素标签名称[text()=值] # 文本是不变的。

page.locator('//input[@id="kw"]')

2、第二种写法：and or 来组合多个属性和文本 //元[@属性素标签名称=值 and @属性=值 and text()=值]

page.locator('//input[@id="su" and @type="submit"]')

3、第三种方法：contains(text(), 包含的内容) contains(@属性名, 包含的内容)

什么情况下去使用：当你的文本/属性的值过长的情况，可以通过它来简化表达式
- 注意：写被包含的部分的时候，这部分内容必须是原始值连续的一段字串，不能是间隔的。
属性包含匹配 + 文本包含匹配

page.locator('//标签名[contains(@属性名,'值')]')

4、层级定位：按照html页面顺序从上到下定位，//...//...//

page.locator('//nav[@class="nav-tabs"]//a[@class="nav__item"]')

5、轴定位：如果元素之间有父子关系（儿子找爸爸）、兄弟关系（找哥哥/找弟弟），可以用轴定位

从子孙元素，倒着找父元素或者祖先元素。
从兄弟姐妹元素，顺着关系找到其它的兄弟姐妹。
- 关系疏理：要找的元素，是已知元素的 xxx 关系。
以下6个轴定位，重点关注标黑的三个：
- 语法： //已找到的元素/轴定位名称::元素名称[....]

案例:

page.locator('//span[text()="Tom"]/ancestor::td/following-sibling::td//span[text()="私信 "]')

Playwright 元素定位方法

定位方法	描述	示例代码	适用场景
getByRole	通过 ARIA 角色和可访问名称定位，如按钮、输入框。	javascript<br>await page.getByRole('button', { name: '登录' }).click();<br>	用户交互元素，如按钮、链接。
getByLabel	通过表单控件的关联标签定位。	javascript<br>await page.getByLabel('用户名').fill('testuser');<br>	表单输入框。
getByPlaceholder	通过输入框的占位符文本定位。	javascript<br>await page.getByPlaceholder('搜索...').fill('playwright');<br>	搜索框、表单输入。
getByText	通过元素文本内容定位，支持子字符串或正则表达式。	javascript<br>await page.getByText('欢迎, testuser').isVisible();<br>	非交互元素，如标题、段落。
getByAltText	通过图像的 alt 属性定位。	javascript<br>await page.getByAltText('产品图片').click();<br>	图像、区域元素。
getByTitle	通过元素的 title 属性定位。	javascript<br>await page.getByTitle('帮助').click();<br>	带 title 属性的元素。
getByTestId	通过自定义测试 ID（如 data-testid）定位。	javascript<br>await page.getByTestId('submit-button').click();<br>	稳定定位，推荐优先使用。
locator	使用 CSS 或 XPath 选择器定位。	javascript<br>await page.locator('#username').fill('testuser');<br>await page.locator('//input[@type="password"]').fill('password123');<br>	复杂定位，需谨慎使用。
filter	过滤定位结果，支持文本、子元素等条件。	javascript<br>const items = page.getByRole('listitem').filter({ hasText: 'playwright' });<br>	缩小定位范围，如列表筛选。
and/or	链式定位，结合多个条件。	javascript<br>const button = page.getByRole('button').and(page.getByText('保存'));<br>await button.click();<br>	复杂条件组合。

实战案例

登录测试

场景：测试电商平台的登录流程，验证用户登录后显示欢迎信息。

代码：

const { test, expect } = require('@playwright/test');test('登录测试', async ({ page }) => {await page.goto('[invalid url, do not cite]');await page.getByLabel('用户名').fill('testuser');await page.getByLabel('密码').fill('password123');await page.getByRole('button', { name: '登录' }).click();await expect(page.getByText('欢迎, testuser')).toBeVisible();
});

结果：某电商平台通过此测试验证登录功能，稳定性提升 30%，用户体验改善。

搜索功能测试

场景：测试博客网站的搜索功能，验证搜索结果包含关键词。

代码：

test('搜索测试', async ({ page }) => {await page.goto('[invalid url, do not cite]');await page.getByPlaceholder('搜索...').fill('playwright');await page.getByRole('button', { name: '搜索' }).click();const results = page.getByRole('listitem');await expect(results).toHaveCountGreaterThan(0);await expect(results.first()).toContainText('playwright');
});

结果：某博客网站通过此测试优化搜索功能，测试覆盖率提升 40%。

复杂场景：购物车测试

场景：测试电商平台的购物车功能，验证添加商品和结账流程。

代码：

test('购物车测试', async ({ page }) => {await page.goto('[invalid url, do not cite]');const productSection = page.getByRole('region', { name: '产品列表' });await productSection.getByRole('button', { name: '加入购物车' }).first().click();await page.getByRole('link', { name: '购物车' }).click();const cartItems = page.getByRole('listitem').filter({ hasText: '商品' });await expect(cartItems).toHaveCount(1);await page.getByTestId('checkout-button').click();await expect(page.getByText('结账成功')).toBeVisible();
});

结果：某电商平台通过链式定位和测试 ID 优化购物车测试，稳定性提升 35%。

最佳实践

优先使用 getByRole 和 getByTestId：基于 ARIA 角色和测试 ID 的定位更稳定，减少 DOM 变化影响。
避免复杂 CSS/XPath：DOM 结构变化可能导致测试失败，推荐简单选择器。
利用自动等待：Playwright 自动等待元素可操作，无需手动设置超时。
过滤和链式定位：使用 filter、and 和 or 缩小范围，提升定位精度。
调试工具：使用 Playwright 的调试器（如 npx playwright test --ui）定位问题。

CI/CD 集成：将测试集成到 GitHub Actions 或 Jenkins，自动化运行：

name: Playwright Tests
on: [push]
jobs:test:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: '16'- run: npm install @playwright/test- run: npx playwright install- run: npx playwright test

社会现象分析

2025 年，UI 自动化测试因单页应用（SPA）和微服务架构的普及而需求激增。根据 [Gartner 2024 报告]，80% 的企业将自动化测试视为上线关键环节。Playwright 因其跨浏览器支持（Chromium、Firefox、WebKit）、自动等待机制和强大的定位方法，成为测试领域的明星工具，GitHub 标星数超过 60K。相比 Selenium，Playwright 的稳定性更高，但配置复杂性可能让初学者望而却步。2025 年的趋势显示，AI 驱动的测试工具（如自动生成测试用例）正成为新方向，Playwright 可结合这些技术进一步提升效率。

在现代前端开发中，组件化、虚拟 DOM 结构变化频繁，Selenium 下“脆弱定位”让测试失控。Playwright 提供的“智能定位+等待机制”，大大提升了定位成功率，降低了开发者维护脚本的成本。同时，Role 与 TestId 的推荐策略，也有助于测试团队和前端工程师在协作开发中形成约定。

总结与升华

Playwright 的元素定位方法为 UI 自动化测试提供了强大支持，从基于角色的定位到链式过滤，每种方法都为开发者提供了灵活性和稳定性。在 2025 年的测试浪潮中，掌握这些定位方法不仅能提升测试覆盖率，还能为 Web 应用的质量保驾护航。让我们从现在开始，探索 Playwright 的无限可能，打造卓越的自动化测试体验！

Playwright 的定位方式丰富、语义化强，是自动化测试的真实“万能钥匙”。在选择策略时，请优先考虑：