Playwright 元素定位

一、get_by_XXXXX

1. get_by_role：根据元素角色进行定位, 常用的参数有两个，第一个是角色名称 role，第二个是元素的文本 name。其他参数的解释大家可以参考源码注释。

# 获取页面名称为确定的按钮
page.get_bt_role('button', name='确定')

playwright 有大量的角色可以供我们选择，下面是源码内的可定位的角色名称：

    def get_by_role(self, role,name) -> Locator:''':param role: Literal["alert", "alertdialog", "banner","button", "caption", "cell", "checkbox","combobox", "dialog", "directory","document", "form",  "group", "heading", "img",  "link", "list", "listbox","menu", "menubar", "menuitem", progressbar", "radio", "radiogroup", "region", "row",  "scrollbar","search", "searchbox", "separator", "slider", "tab", "table",  "textbox", "time", "timer", "toolbar"]:param name::return:'''return self.page.get_by_role(role,name = name)

2. get_by_text：根据界面文本信息进行定位。包含两个参数，一个是 text标识定位的文本内容，第二个是 exact 表示是否精确匹配。

# 定位文字信息为返回首页的元素
page.get_by_text('返回首页', exact=True)

3. get_by_placeholder：根据placeholder进行定位，也就是我们输入框的提示信息。他的参数和 get_by_text相同。

# 定位提示信息为 请输入名称 的输入框
page.get_by_placeholder('请输入名称', exact=True).click

4. get_by_title：同上
5. get_by_lable：同上
6. get_by_alt_test: 同上
这一部分建议直接查看源码，源码每个方法的使用写的挺清楚的。

二、locator

1. 根据元素 id 进行定位

# 定位id=user的元素
page.locator('#user')

2. 根据元素 css 进行定位

# 定位css为 homepage的元素
page.locator('.homepage')

3. 根据元素 xpath 进行定位

# 定位相对位置为/html/body/div[1]/div[3] 的元素
page.locator('/html/body/div[1]/div[3]')

以上是基础版的元素定位方式，当遇到页面样式比较复杂的页面时，会需要一些其他的定位方式

在 playwright中是支持多层筛选的，我们可以根据一个元素的信息来定位其子元素的信息。

三、nth()

根据元素索引来选择元素，当符合定位信息的元素有多个时，我们通常要挑选出我们需要的元素，可以使用 nth()来进行挑选我们需要的是哪一个元素。索引是从 0 开始的

# 定位文本信息为 班级 的第三个元素
page.get_by_text('班级'， exact=True).nth(2)

四、first 和 last

根据名称我们就可以知道，这是定位的第一个和最后一个元素，这两个是作为类属性使用的，使用时不需要加（）

# 定位第一个名称为启动的按钮
page.get_by_role('button', name='启动').first

五、filter()

是用来做筛选的。它的作用主要是在元素定位后，进行二次筛选。有利于在复杂的页面当中，过滤出需要的元素。主要用到的参数有两个，has_text: 包含的文本信息 has_not_text: 不包含的文本信息。

# 在 div 中定位文本信息为班级的元素
page.locator('div').filter(has_text='班级')

通常还会进一步进行筛选

# 在 div 中定位文本信息为班级的字段，并定位到其提示信息为请输入的输入框
page.locator('div').filter(has_text='班级').get_by_placeholder('请输入')

六、链式选择器

链式选择器中的两个符号，常用的是 >>

1. >: 定位子元素，定位和父级元素相邻的元素，只能定位“亲儿子”

2. >>: 定位后代元素，定位父级元素下的所有元素，只要位于父元素下，都可以定位

链式选择器用来根据多个 css 样式定位元素。当元素没有 id 并且 css 样式又繁多的时候，可以通过使用链式选择器，来根据多个 css 样式进行元素定位。

# 定位 van-popover__wrapper 样式下样式为 MPMicon 的元素
page.locator('.van-popover__wrapper >> .MPMicon')

七、正则表达式

在根据文本信息进行元素定位时，有文本的部分内容会发生变化的情况，可以通过正则表达式，来根据某些固定的内容，进行元素定位。首先需要先了解一下正则表达式的知识

# 定位名称由1-9数字开头和“ 个 进行中” 文字结尾的按钮
page.get_by_role("button", name=re.compile(r"[1-9]\d* 个 进行中$"))

以下是一些常用的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`: 等待匹配的元素满足一个条件。