在UI测试中会遇到一种情况,在输入框输入内容,鼠标焦点离开输入框后,前端会对输入框内容进行判断是否合法,比如输入不正确格式的账号,会有相应的提示。该篇文章就讲一讲playwright关于元素焦点的控制:
Playwright提供了直接调用元素的 blur() 方法的方式,可以立即移除元素的焦点。相应的也有focus()方法来实现对元素聚焦。
举个例子,百度账号注册,输入不正确格式的手机号:
代码如下:
from playwright.sync_api import Page,expect
def test_blur(page: Page):
url='https://passport.baidu.com/v2/?reg&tt=1722938835917&overseas=&gid=1BC2DBF-8F2F-48D3-AD13-1F1042B0D7DF&tpl=pp&u=https%3A%2F%2Fpassport.baidu.com%2F'
page.goto(url=url, wait_until='networkidle')
page.get_by_placeholder("可用于登录和找回密码").fill("123456")
page.get_by_placeholder("可用于登录和找回密码").blur() #使鼠标从该元素上失焦
expect(page.get_by_text("手机号码格式不正确")).to_be_visible()
如果没有page.get_by_placeholder("可用于登录和找回密码").blur() 这一句,我们的断言会失败。blur()方法移除焦点后,界面才会显示手机号码格式不正确。
焦点还在输入框内:
移除了焦点后页面出现提示:
接下来我们让焦点重新聚焦到输入框内,加入以下代码:
page.get_by_placeholder("可用于登录和找回密码").focus() # 聚焦到输入框
expect(page.get_by_text("手机号码格式不正确")).to_be_hidden() # 聚焦到输入框后,断言提示信息隐藏
就可以实现重新聚焦到输入框,提示信息也会随着操作隐藏
综上focus()和blur()方法可以帮助我们在自动化测试或脚本中控制元素的焦点状态,方便更灵活的测试操作