18新一代自动化测试神器playwright+python系列课程_playwritht元素相关操作_等待元素到某种状态

元素相关操作_等待元素到某种状态

对于自动化测试来说，本质上就是定位元素、操作元素。网页上的元素有不同状态，有些元素本来不在网页的DOM中，经过某一步操作后才出现。有些元素是本来就已经在DOM中但是是隐藏的状态，经过某一步操作后才变成显示状态。如果在元素的没有达到想要的状态就执行脚本操作元素，往往会导致脚本执行失败，为了提示自动化测试的稳定性，我们往往需要在元素达到某个指定的状态再执行相应的脚本，这样自动化测试脚本的稳定性就会得到提升。
如果我们想让元素到达指定的状态再下一步操作，有两种方式：

一种是使用page.wait_for_selector() 方法。

还有一种是先定位元素，再使用wait_for() 方法也可以等待元素到达指定的状态

page.wait_for_selector() 方法

wait_for_selector() 方法部分源码

def wait_for_selector(

self,

selector: str,

*,

timeout: typing.Optional[float] = None,

state: typing.Optional[

Literal["attached", "detached", "hidden", "visible"]

] = None,

strict: typing.Optional[bool] = None

) -> typing.Optional["ElementHandle"]:

state 参数可以设置等待状态，用四个状态："attached", "detached", "hidden", "visible"。

1.等待元素出现在DOM中

page.wait_for_selector("定位方法", state='attached')

2.等待从DOM中移除

page.wait_for_selector("定位方法", state='detached')

3.等待元素可见

page.wait_for_selector("定位方法", state="visible")

4.等待元素不可见

page.wait_for_selector("定位方法", state='hidden')

如果没有传 state 参数，默认情况下是等待元素可见 visible

page.wait_for_selector("定位方法")

wait_for_selector()方法

我们以下图中的提示窗口中的确定按钮为例。整个提示窗口默认时不在DOM中的,在点击登录按钮登录失败后系统才会弹出这个提示窗口，这个窗口中的元素才会显示在DOM中。我们就以提示窗口中的确定按钮为例看一下wait_for_selector()的使用。

项目实践代码

'''

author: 测试-老姜   交流微信/QQ：349940839

欢迎添加微信或QQ，加入学习群共同学习交流。

QQ交流群号：877498247

'''

from playwright.sync_api import Playwright, sync_playwright, expect

playwright = sync_playwright().start()

browser = playwright.chromium.launch(headless=False, args=['--start-maximized']) #默认无头模式,设置浏览器最大化

context = browser.new_context(no_viewport=True) # 创建上下文，相当浏览器于实例化，即打开浏览器

page = context.new_page() # 打开一个新标签页

page.goto("http://127.0.0.1:8080/oa/") # 打开网址

page.wait_for_timeout(2000)

page.locator("input[name=\"loginId\"]").fill("sup")

page.get_by_role("button", name="登录").click() #点击登录后会弹出提示信息框

ele = page.wait_for_selector('[value="确定"]', state="attached") # 等待确定按钮出现

page.wait_for_timeout(2000)

ele.click() # 点击确定后，确定按钮会消失

page.wait_for_selector('[value="确定"]', state="detached") # 等待确定按钮消失

context.close()

browser.close()

如果等不到对应的元素状态，默认30秒会报超时异常。也可以自己设置timeout时间

如下设置，判断元素5秒内从DOM中移除

page.wait_for_selector('[value="确定"]', state="attached",timeout=5000)

wait_for() 方法

另外一个先定位元素，再使用wait_for() 方法也可以等待元素到达指定的状态。

将上面的代码稍作修改就可以了

'''

author: 测试-老姜   交流微信/QQ：349940839

欢迎添加微信或QQ，加入学习群共同学习交流。

QQ交流群号：877498247

'''

from playwright.sync_api import Playwright, sync_playwright, expect

playwright = sync_playwright().start()

browser = playwright.chromium.launch(headless=False, args=['--start-maximized']) #默认无头模式,设置浏览器最大化

context = browser.new_context(no_viewport=True) # 创建上下文，相当浏览器于实例化，即打开浏览器

page = context.new_page() # 打开一个新标签页

page.goto("http://127.0.0.1:8080/oa/") # 打开网址

page.wait_for_timeout(2000)

page.locator("input[name=\"loginId\"]").fill("sup")

page.get_by_role("button", name="登录").click() #点击登录后会弹出提示信息框

page.locator('[value="确定"]').wait_for(state='attached')# 等待确定按钮出现

page.wait_for_timeout(2000)

page.locator('[value="确定"]').click() # 点击确定后，确定按钮会消失

ele = page.locator('[value="确定"]').wait_for(state="detached") # 等待确定按钮消失

context.close()

browser.close()

wait_for() 方法 和 wait_for_selector()使用区别：

• page.locator('定位元素').wait_for() 返回的是None，后面不能继续操作元素
• page.wait_for_selector("定位方法") 返回的是locator 对象，后面可以继续操作元素