Playwright中locator() 方法快速定位网页元素[全面总结]

本文主要是介绍Playwright中locator() 方法快速定位网页元素[全面总结]，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Playwright 是一个用于浏览器自动化的库，它支持多种浏览器和多种语言。在 Playwright 中，`page.locator()` 方法用于创建一个元素定位器（Element Locator）。元素定位器是一个强大的工具，可以帮助你在页面上找到并操作元素。
------------
page.locator(selector)
page.locator(selector, **kwargs)

Playwright 的 `page.locator()` 方法的详细解释：

1. **基本用法**：`page.locator(selector)` 方法返回一个元素定位器（Element Locator），这个定位器可以用于执行在页面或框架上的操作。定位器会在执行操作之前立即解析到元素，因此，对同一个定位器的一系列操作实际上可能在不同的 DOM 元素上执行。如果这些操作之间的 DOM 结构发生了变化，就会出现这种情况。

2. **参数**：
- `selector`：用于解析 DOM 元素的选择器。
- `has`（可选）：缩小方法的结果范围，只包含匹配此相对定位器的元素。例如，具有 text=Playwright 的文章匹配 `<article><div>Playwright</div></article>`。内部定位器必须相对于外部定位器，并从外部定位器匹配开始查询，而不是从文档根开始。注意，外部和内部定位器必须属于同一框架。内部定位器不能包含 FrameLocators。
- `has_not`（可选，v1.33 新增）：匹配不包含匹配内部定位器的元素的元素。内部定位器针对外部定位器进行查询。例如，没有 div 的文章匹配 `<article><span>Playwright</span></article>`。注意，外部和内部定位器必须属于同一框架。内部定位器不能包含 FrameLocators。
- `has_not_text`（可选，v1.33 新增）：匹配不包含指定文本的元素，可能在子元素或后代元素中。当传递一个字符串时，匹配是大小写不敏感的，并搜索子字符串。
- `has_text`（可选）：匹配包含指定文本的元素，可能在子元素或后代元素中。当传递一个字符串时，匹配是大小写不敏感的，并搜索子字符串。例如，"Playwright" 匹配 `<article><div>Playwright</div></article>`。

3. **返回值**：`page.locator()` 方法返回一个 Locator 对象，可以用于执行各种操作，如点击、填充、检查、选择选项等。

详细解释疑问，这两个参数 `has` 和 `has_text` 的区别可能有些微妙。：
- `has`：这个参数接受一个定位器作为值，这个定位器用于在找到的元素内部进行查找。例如，`has='text=Playwright'` 表示找到的元素必须包含一个文本为 "Playwright" 的子元素。这个子元素可以是任何类型的元素，只要它的文本是 "Playwright" 就可以。例如，下面的 HTML 代码段就符合这个条件：
```html
<div class="my-class">
<span>Playwright</span>
</div>
```
- `has_text`：这个参数接受一个字符串或正则表达式作为值，这个值用于匹配找到的元素的文本或其子元素的文本。例如，`has_text='Playwright'` 表示找到的元素或其子元素的文本中必须包含 "Playwright"。这个文本可以在任何地方，只要在找到的元素或其子元素的文本中就可以。例如，下面的 HTML 代码段就符合这个条件：
```html
<div class="my-class">
This is a test of Playwright.
<span>More text here.</span>
</div>
```
在这个例子中，"Playwright" 是在 `div` 元素的文本中，而不是在一个特定的子元素的文本中。
总的来说，`has` 参数更关注于结构，它要求存在一个特定的子元素，而 `has_text` 参数更关注于文本，它要求找到的元素或其子元素的文本中包含特定的字符串或匹配特定的正则表达式。

-------------

以下是一些常用的page.locator()元素定位方法：

1. **CSS 选择器**: 你可以使用 CSS 选择器定位元素。例如，`page.locator('.my-class')` 会定位到页面上所有具有 "my-class" 类的元素。

2. **XPath**: 你也可以使用 XPath 表达式来定位元素。例如，`page.locator('//div[@id="my-id"]')` 会定位到页面上所有 id 为 "my-id" 的 div 元素。

3. **文本内容**: 你可以使用 `:text("my text")` 来定位包含特定文本的元素。例如，`page.locator(':text("Hello, World!")')` 会定位到页面上所有包含 "Hello, World!" 文本的元素。

4. **特性选择器**: 你可以使用 `[attr=value]` 来定位具有特定属性值的元素。例如，`page.locator('input[name="username"]')` 会定位到页面上所有 name 属性为 "username" 的 input 元素。

5. **ID 选择器**: 你可以使用 `#id` 来定位具有特定 id 的元素。例如，`page.locator('#my-id')` 会定位到页面上 id 为 "my-id" 的元素。

6. **类选择器**: 你可以使用 `.class` 来定位具有特定类的元素。例如，`page.locator('.my-class')` 会定位到页面上所有具有 "my-class" 类的元素。

7. **标签名选择器**: 你可以使用 `tagname` 来定位特定类型的元素。例如，`page.locator('div')` 会定位到页面上所有的 div 元素。

这些都是 Playwright 中 `page.locator()` 方法的常用定位方式。你可以根据你的需要选择合适的方法来定位元素。
----------

在 Playwright 中，`page.locator()` 方法返回一个元素定位器（Element Locator），这个定位器可以用于定位和操作页面上的元素。以下是一些更深入的介绍：

1. **链式定位**：`page.locator()` 的返回值本身也有 `locator()` 方法，这意味着你可以链式地定位元素。例如，`page.locator('.my-class').locator('.my-subclass')` 会定位到所有具有 "my-class" 类的元素中，再次具有 "my-subclass" 类的元素。

2. **操作元素**：定位器提供了一系列方法用于操作元素，例如 `click()`、`fill()`、`check()`、`uncheck()`、`selectOption()` 等。这些方法可以直接在定位器上调用，例如 `page.locator('#my-id').click()` 会点击 id 为 "my-id" 的元素。

3. **获取元素属性和状态**：定位器还提供了一些方法用于获取元素的属性和状态，例如 `getAttribute()`、`innerText()`、`isVisible()`、`isChecked()` 等。例如，`page.locator('#my-id').getAttribute('value')` 会返回 id 为 "my-id" 的元素的 value 属性值。

4. **等待元素**：定位器提供了 `waitFor()` 方法用于等待元素出现。例如，`page.locator('#my-id').waitFor()` 会等待直到 id 为 "my-id" 的元素出现。

5. **处理多个元素**：如果定位器定位到多个元素，你可以使用 `nth()` 方法来选择其中的一个。例如，`page.locator('.my-class').nth(1)` 会选择第二个具有 "my-class" 类的元素（索引从 0 开始）。

6. **元素计数**：你可以使用 `count()` 方法来获取定位器定位到的元素数量。例如，`page.locator('.my-class').count()` 会返回页面上具有 "my-class" 类的元素的数量。

这些都是 Playwright 中 `page.locator()` 方法的高级用法。你可以根据你的需要使用这些方法来定位和操作元素。
--------

更多高级用法和技巧：

1. **元素的文本内容**：`textContent()` 方法可以用于获取元素的文本内容。例如，`page.locator('#my-id').textContent()` 会返回 id 为 "my-id" 的元素的文本内容。

2. **元素的 HTML**：`innerHTML()` 方法可以用于获取元素的内部 HTML。例如，`page.locator('#my-id').innerHTML()` 会返回 id 为 "my-id" 的元素的内部 HTML。

3. **元素的外部 HTML**：`outerHTML()` 方法可以用于获取元素的外部 HTML。例如，`page.locator('#my-id').outerHTML()` 会返回 id 为 "my-id" 的元素的外部 HTML。

4. **等待元素消失**：`waitFor({ state: 'detached' })` 方法可以用于等待元素消失。例如，`page.locator('#my-id').waitFor({ state: 'detached' })` 会等待直到 id 为 "my-id" 的元素消失。

5. **等待元素隐藏**：`waitFor({ state: 'hidden' })` 方法可以用于等待元素隐藏。例如，`page.locator('#my-id').waitFor({ state: 'hidden' })` 会等待直到 id 为 "my-id" 的元素隐藏。

6. **等待元素显示**：`waitFor({ state: 'visible' })` 方法可以用于等待元素显示。例如，`page.locator('#my-id').waitFor({ state: 'visible' })` 会等待直到 id 为 "my-id" 的元素显示。

7. **等待元素可编辑**：`waitFor({ state: 'editable' })` 方法可以用于等待元素可编辑。例如，`page.locator('#my-id').waitFor({ state: 'editable' })` 会等待直到 id 为 "my-id" 的元素可编辑。

8. **等待元素被选中**：`waitFor({ state: 'checked' })` 方法可以用于等待元素被选中。例如，`page.locator('#my-id').waitFor({ state: 'checked' })` 会等待直到 id 为 "my-id" 的元素被选中。

这些都是 Playwright 中 `page.locator()` 方法的一些更高级的用法和技巧。通过熟练掌握这些方法，你可以更有效地定位和操作网页上的元素。
----------------------------------------------------------------------------------------

在 Playwright 中，Locator 是自动等待和重试机制的核心部分。简单来说，Locator 提供了在任何时刻在页面上找到元素的方法。可以使用 page.locator() 方法创建一个 Locator。

Locator 对象的主要优点是它们可以自动等待元素出现在页面上。例如，如果你创建了一个 Locator，然后立即尝试点击它，但是这个元素还没有出现在页面上，Playwright 会自动等待这个元素出现，然后再执行点击操作。

此外，Locator 对象还可以重试操作。例如，如果你尝试点击一个 Locator，但是这个元素在被点击的瞬间消失了，Playwright 会自动重试点击操作，直到操作成功或超时。
以下是一些使用 Locator 对象方法的示例：

# 创建一个 Locator
locator = page.locator('#my-id')# 点击 Locator
locator.click()# 填充 Locator
locator.fill('Hello, world!')# 获取 Locator 的文本
text = locator.text_content()# 获取 Locator 的 HTML
html = locator.inner_html()# 等待 Locator 出现在页面上
locator.wait_for()# 等待 Locator 从页面上消失
locator.wait_for('hidden')

以下是 `Locator` 对象的方法和属性的简单解释：

---Methods---

- `all`: 返回所有匹配的元素。
- `all_inner_texts`: 返回所有匹配元素的内部文本。
- `all_text_contents`: 返回所有匹配元素的文本内容。
- `and_`: 创建一个新的 `Locator`，它匹配同时满足当前 `Locator` 和另一个条件的元素。
- `blur`: 让匹配的元素失去焦点。
- `bounding_box`: 返回匹配元素的边界框。
- `check`: 勾选匹配的元素（如果它是一个复选框或单选框）。
- `clear`: 清除匹配元素的输入值（如果它是一个输入元素）。
- `click`: 点击匹配的元素。
- `count`: 返回匹配元素的数量。
- `dblclick`: 双击匹配的元素。
- `dispatch_event`: 在匹配的元素上分发一个事件。
- `drag_to`: 将匹配的元素拖动到另一个位置。
- `evaluate`: 在匹配的元素上执行一个 JavaScript 函数。
- `evaluate_all`: 在所有匹配的元素上执行一个 JavaScript 函数。
- `evaluate_handle`: 获取一个可以在匹配的元素上执行 JavaScript 的句柄。
- `fill`: 填充匹配元素的输入值（如果它是一个输入元素）。
- `filter`: 创建一个新的 `Locator`，它匹配满足一个函数的元素。
- `focus`: 让匹配的元素获取焦点。
- `frame_locator`: 返回匹配元素的 `FrameLocator`（如果它是一个 `iframe` 元素）。
- `get_attribute`: 获取匹配元素的属性值。
- `get_by_alt_text`: 创建一个新的 `Locator`，它匹配 `alt` 属性包含指定文本的元素。
- `get_by_label`: 创建一个新的 `Locator`，它匹配 `label` 属性包含指定文本的元素。
- `get_by_placeholder`: 创建一个新的 `Locator`，它匹配 `placeholder` 属性包含指定文本的元素。
- `get_by_role`: 创建一个新的 `Locator`，它匹配 `role` 属性包含指定文本的元素。
- `get_by_test_id`: 创建一个新的 `Locator`，它匹配 `data-testid` 属性包含指定文本的元素。
- `get_by_text`: 创建一个新的 `Locator`，它匹配文本包含指定文本的元素。
- `get_by_title`: 创建一个新的 `Locator`，它匹配 `title` 属性包含指定文本的元素。
- `highlight`: 高亮匹配的元素。
- `hover`: 将鼠标悬停在匹配的元素上。
- `inner_html`: 获取匹配元素的内部 HTML。
- `inner_text`: 获取匹配元素的内部文本。
- `input_value`: 获取匹配元素的输入值（如果它是一个输入元素）。
- `is_checked`: 检查匹配的元素是否被勾选（如果它是一个复选框或单选框）。
- `is_disabled`: 检查匹配的元素是否被禁用。
- `is_editable`: 检查匹配的元素是否可编辑。
- `is_enabled`: 检查匹配的元素是否启用。
- `is_hidden`: 检查匹配的元素是否隐藏。
- `is_visible`: 检查匹配的元素是否可见。
- `locator`: 创建一个新的 `Locator`，它匹配满足一个定位器的元素。
- `nth`: 创建一个新的 `Locator`，它匹配第 n 个元素。
- `or_`: 创建一个新的 `Locator`，它匹配满足当前 `Locator` 或另一个条件的元素。
- `press`: 在匹配的元素上按下一个键（如果它是一个输入元素）。
- `press_sequentially`: 在匹配的元素上按下一系列的键（如果它是一个输入元素）。
- `screenshot`: 对匹配的元素进行截图。
- `scroll_into_view_if_needed`: 如果需要，将匹配的元素滚动到视图中。
- `select_option`: 选择匹配的元素的一个选项（如果它是一个 `select` 元素）。
- `select_text`: 选择匹配的元素的文本（如果它是一个输入元素或 `textarea` 元素）。
- `set_checked`: 设置匹配的元素的勾选状态（如果它是一个复选框或单选框）。
- `set_input_files`: 设置匹配的元素的输入文件（如果它是一个文件输入元素）。
- `tap`: 在匹配的元素上进行触摸操作。
- `text_content`: 获取匹配元素的文本内容。
- `uncheck`: 取消勾选匹配的元素（如果它是一个复选框或单选框）。
- `wait_for`: 等待匹配的元素满足一个条件。