playwright+python 等待元素至指定状态

当进行UI自动化测试时，保证测试的稳定性至关重要。其中一个关键方面是正确地定位和操作网页中的元素。在网页中，元素可能处于不同的状态，有些可能在页面加载完成之前不在DOM中，需要某些操作后才会出现，而其他元素可能一直存在于DOM中，但最初处于隐藏状态，需要通过操作才能使其可见。

如果在执行脚本时没有考虑到元素的状态，很可能导致脚本执行失败。为了保证自动化测试的稳定性，我们需要确保在执行操作之前，所需的元素已经达到了指定状态。

下面我将介绍三种常用的元素等待方式：wait_for(), wait_for_selector(), 和 wait_for_element_state()，以及三者之间的优劣势。

wait_for()

wait_for() 是先定位元素，再等待元素满足指定状态。

如果元素已满足条件，则立即返回。否则，它会等待直到超时时间到达为止。
该方法接受两个关键字参数：
timeout：指定最大等待时间（以毫秒为单位）。默认为 30000（30秒），但可以更改。
state：指定要等待的状态。默认为 ‘visible’。可以是 ‘attached’、‘detached’、‘hidden’ 或 ‘visible’ 中的一个。

下面是一个示例代码：

# 等待元素出现在DOM中
page.locator(selector).wait_for(state="attached")
# 等待从DOM中移除
page.locator(selector).wait_for(state="detached")
# 等待元素隐藏
page.locator(selector).wait_for(state="hidden")
# 等待元素可见
page.locator(selector).wait_for(state="visible")

wait_for_selector()

wait_for_selector(),等待元素满足指定状态。这个方法的参数和用法与 wait_for() 类似，但是针对选择器而不是定位器。如果没有传 state 参数，默认情况下是"visible"（等待元素可见）。
当选择器指定的元素满足 state 选项时，返回。如果等待的是 hidden 或 detached，则返回 null。
如果在调用该方法时，选择器已经满足条件，则立即返回。
如果选择器在 timeout 毫秒内不满足条件，则函数会抛出异常。

下面是一个示例代码：

# 等待元素出现在DOM中
page.wait_for_selector(selector, state="attached")
# 等待从DOM中移除
page.wait_for_selector(selector, state="detached")
# 等待元素隐藏
page.wait_for_selector(selector, state="hidden")
# 等待元素可见
page.wait_for_selector(selector, state="visible")

wait_for_element_state( )

wait_for_element_state()与wait_for_selector() 连用，先使用 wait_for_selector() 来定位元素，然后再使用 wait_for_element_state() 来等待该元素达到特定的状态。

下面是一个示例代码：

# 等待元素不可用
page.wait_for_selector(selector).wait_for_element_state(state="disabled")
# 等待元素隐藏
page.wait_for_selector(selector).wait_for_element_state(state="hidden")
# 等待元素可用
page.wait_for_selector(selector).wait_for_element_state(state="enabled")
# 等待元素可编辑
page.wait_for_selector(selector).wait_for_element_state(state="editable")
# 等待元素稳定（已经加载完全且不再有任何动态变化）
page.wait_for_selector(selector).wait_for_element_state(state="stable")

总结：
wait_for() 方法：
使用方式：
通过 page.locator(‘定位元素’).wait_for() 调用。
返回值：
返回的是 None。
使用限制：
由于返回值是 None，所以后续不能继续对元素进行操作。

wait_for_selector() 方法：
使用方式：
通过 page.wait_for_selector(“定位方法”) 调用。
返回值：
返回的是 Locator 对象，可以继续对元素进行操作。
使用优势：
由于返回的是 Locator 对象，因此可以在等待期间对元素进行其他操作，如获取元素属性、执行点击等操作。

wait_for_selector().wait_for_element_state() 方法：
使用方式：
首先通过 page.wait_for_selector(selector) 来等待选择器所定位的元素。
然后在返回的元素上调用 wait_for_element_state() 方法。
返回值：
返回的是 None，表示等待完成。如果在等待期间元素达到了指定状态，则不会返回任何其他对象。
使用优势：
通过组合使用这两个方法，可以确保在对元素进行操作之前，元素已经完全加载且处于期望的状态。