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

对于自动化测试来说，本质上就是定位元素、操作元素。网页上的元素有不同状态，有些元素本来不在网页的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 对象，后面可以继续操作元素