Playwright系列(12):调试选择器

简介: Playwright系列(12):调试选择器

大家好,我是阿萨。写脚本的同学都知道我们调试脚本最难的就是调试选择器了。今天学习如何调试选择器。Playwright会抛出一个超时异常,比如locator.click。当一个元素在页面上不存在时,超过30000ms的超时。有多种调试选择器的方法。

  • Playwright检查器(Playwright Inspector)可以在每一个Playwright的API调用中检查页面。
  • 浏览器DevTools用DevTools元素面板来检查选择器。
  • 追踪器可以查看测试运行期间的页面情况。
  • 详尽的API日志显示定位元素时的可操作性检查。


使用 Playwright  定位器


打开Playwright定位器,单击 "探索 "按钮,将鼠标悬停在屏幕中的元素上,并单击它们以自动生成这些元素的选择器。要验证选择器的指向,可以把它粘贴到检查器的输入栏中。


使用DevTools


你也可以在任何浏览器的开发者工具控制台内使用以下API。当以PWDEBUG=console的调试模式运行时,在开发者工具控制台中可以使用一个playwright对象。

  • 用PWDEBUG=console运行
  • 设置一个断点来暂停执行
  • 在浏览器开发工具中打开控制台面板


playwright.$(selector)

查询 Playwright 选择器,使用实际Playwright 查询引擎。

playwright.$('.auth-form >> text=Log in');<button>Log in</button>


playwright.$$(selector)

和 playwright.$, 但是返回所有匹配的文本。

> playwright.$$('li >> text=John')> [<li>, <li>, <li>, <li>]


playwright.inspect(selector)

在元素面板中揭示元素(如果相应浏览器的DevTools支持)。


> playwright.inspect('text=Log in')


playwright.locator(selector)

查询 Playwright 元素


> playwright.locator('.auth-form', { hasText: 'Log in' });
> Locator ()> - element: button> - elements: [button]


playwright.highlight(selector)

高亮第一个选择的元素。


> playwright.highlight('.auth-form');

playwright.clear()


> playwright.clear()

清除现有的高亮。


playwright.selector(element)

为给定的元素生成选择器。


> playwright.selector($0)


"div[id="glow-ingress-block"] >> text=/.*Hello.*/"


冗长的API日志

Playwright支持使用DEBUG环境变量进行粗略的日志记录。


DEBUG=pw:api pytest -s


相关文章
|
9月前
|
前端开发 测试技术
使用 Playwright 进行元素定位
本文介绍了Playwright在自动化测试和网页爬取中如何定位页面元素。通过CSS选择器、XPath和文本内容等方式,Playwright的`locator`对象允许灵活定位。示例代码展示了使用`query_selector()`、XPath表达式以及`with_text()`方法找到元素并获取其文本。此外,文章还提到了其他内置定位方法,如根据角色、标签文本、占位符等属性进行定位,并提供了相关使用示例。总之,Playwright提供了丰富的元素定位方法,便于高效地进行网页操作。
|
9月前
|
测试技术 API Python
深入探索:使用 Playwright 处理下拉框的完整指南
本文介绍了如何使用Python和Playwright处理Web应用中的下拉框。Playwright提供了一个简单的`select_option()`方法来选择单选或多选选项,例如:`page.get_by_label(&#39;Choose a color&#39;).select_option(&#39;blue&#39;)`。此外,还展示了如何处理动态加载的下拉框,通过`wait_for_selector()`确保选项加载完成后再进行选择。使用Playwright能有效简化自动化测试中的下拉框交互。
|
9月前
|
前端开发 JavaScript 开发者
playwright中定位元素的方法
playwright中定位元素的方法
324 1
|
9月前
|
测试技术 Shell 开发工具
Playwright 系列(13):如何调试测试用例
Playwright 系列(13):如何调试测试用例
448 0
Playwright 系列(13):如何调试测试用例
|
9月前
|
前端开发 测试技术 开发者
精通Playwright的元素定位和CSS技巧
精通Playwright的元素定位和CSS技巧
548 0
|
前端开发 小程序 开发者
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
【小程序自动化Minium】三、元素定位- WXSS 选择器的使用
|
Web App开发 JavaScript 前端开发
chrome调试12-调试javascript的流程
chrome调试12-调试javascript的流程
274 0
chrome调试12-调试javascript的流程
|
JavaScript
chrome3-使用element调试dom 查看和调试dom节点
chrome3-使用element调试dom 查看和调试dom节点
124 0
chrome3-使用element调试dom 查看和调试dom节点
|
前端开发 JavaScript 测试技术
Cypress系列(15)- Cypress 元素定位选择器
Cypress系列(15)- Cypress 元素定位选择器
654 0
Cypress系列(15)- Cypress 元素定位选择器
|
Web App开发 JavaScript
chrome调试,打完断点后关于JS的几个控制介绍
打完断点之后,关于JS的几个控制介绍。   快捷键:F8 “逐过程执行”,继续执行代码,直到遇到下一个断点。   详细解释: 暂停和开始。当设置了断点之后,js的执行就暂停了,如果我们想要跳过当前的断点继续执行js,就可以点击这个按钮,点击之后js的执行会继续,如果在接下来的执行过程中再次遇到断点,那么就会在那个断点处暂停。
1172 0