【playwright篇】page.wait_for_selector()/page.locator() 区别

page.wait_for_selector()

page.wait_for_selector() 方法主要用于等待页面上的某个元素变得可用或可见。它会阻塞脚本执行，直到满足指定条件为止。

方法签名

page.wait_for_selector(selector, state=None, timeout=None)

参数说明

• selector: CSS 选择器字符串，用于匹配页面上的元素。
• state (可选): 指定元素的状态。可以是 'attached', 'detached', 'visible', 'hidden'。默认为 'visible'。

  'attached': 等待元素被附加到文档树中。

  'detached': 等待元素从文档树中被移除。

  'visible': 等待元素变得可见。

  'hidden': 等待元素变得不可见。

• timeout (可选): 设置等待的最大时间（以毫秒为单位）。如果超时仍未达到指定状态，则会抛出一个超时异常。默认值为 30000 毫秒（30 秒）。

示例

# 等待元素变得可见
page.wait_for_selector('#myElement', state='visible')

# 等待元素被附加到 DOM
page.wait_for_selector('#myElement', state='attached')

# 设置超时时间为 5 秒
page.wait_for_selector('#myElement', timeout=5000)

返回值

page.wait_for_selector()方法成功执行并且找到匹配的元素时，它返回一个 Locator 对象。Locator 对象允许你对页面上的元素执行各种操作，如点击、填写表单等。

匹配多个元素场景

page.wait_for_selector() 如果匹配多个元素时

注意事项

• 匹配多个元素：即使选择器匹配了多个元素，page.wait_for_selector() 也只会返回第一个匹配的元素。
• 需要所有元素：如果你需要对所有匹配的元素进行操作，可以使用 page.locator() 方法并调用 all() 方法来获取所有匹配的元素列表。

• # 创建定位器对象，并获取所有匹配的元素
  elements = page.locator('.myElement').all()

• 定位特定元素：需要使用page.locator ()处理
• 参照page.locator()方法

page.locator()

page.locator() 方法在 Playwright 中用于创建一个定位器对象，该对象可以用来执行各种操作，如点击、填写表单等。它不会阻塞脚本执行。

当你使用 page.locator() 方法时，即使选择器匹配了多个元素，它也会返回一个定位器对象，你可以通过这个对象来对所有匹配的元素执行操作。

方法签名

page.locator(selector)

参数说明

• selector: CSS 选择器字符串，用于匹配页面上的元素。

返回值

• 类型：page.locator() 返回一个 Locator 对象。
• 含义：Locator 对象代表页面上匹配给定选择器的所有元素。

示例: locator对象操作

# 创建一个定位器对象
element = page.locator('#myElement')

# 对元素执行操作
element.click()
element.fill('text')
element.is_visible()

示例: locator对象对应多个元素 

# 创建定位器对象
elements_locator = page.locator('.myElement')
        
# 获取所有匹配的元素
elements = elements_locator.all()
        
# 遍历所有元素
for element in elements:
    # 对每个元素执行操作
    element.click()

​

示例：多个元素(定位特定的一个元素)

想定位特定的一个元素（例如第二个或第三个）

 使用更精确的选择器，示例如下："data-index"关键字表示指定索引位置

# 定位特定的元素
specific_element = page.locator('.myElement[data-index="2"]')

使用索引，示例如下

# 创建定位器对象
elements_locator = page.locator('.myElement')
        
# 选择第二个元素（索引为 1）
second_element = elements_locator.nth(1)

总结

1. 阻塞与否:

   • page.wait_for_selector() 在等待元素变为可见或满足其他条件时会阻塞脚本执行，直到条件满足。
   • page.locator() 创建定位器对象，但不会阻塞脚本执行。

2. 用途:

   • page.wait_for_selector() 主要用于等待元素变得可用或可见，通常用于确保页面元素加载完成。
   • page.locator() 用于创建定位器对象，以便后续对元素执行操作。

3. 操作执行:

   • page.wait_for_selector() 可以直接用来等待元素状态变化，但不能直接对元素执行操作。
   • page.locator() 创建的对象可以用来执行各种操作，如点击、填写表单等。