大家好，我是阿萨。写脚本的同学都知道我们调试脚本最难的就是调试选择器了。今天学习如何调试选择器。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
