一、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()元素定位方法:
-
**CSS 选择器**: 可以使用 CSS 选择器定位元素。例如,`page.locator('.my-class')` 会定位到页面上所有具有 "my-class" 类的元素。
-
**XPath**: 使用 XPath 表达式来定位元素。例如,`page.locator('//div[@id="my-id"]')` 会定位到页面上所有 id 为 "my-id" 的 div 元素。
-
**文本内容**: 使用 `:text("my text")` 来定位包含特定文本的元素。例如,`page.locator(':text("Hello, World!")')` 会定位到页面上所有包含 "Hello, World!" 文本的元素。
-
**特性选择器**: 使用 `[attr=value]` 来定位具有特定属性值的元素。例如,`page.locator('input[name="username"]')` 会定位到页面上所有 name 属性为 "username" 的 input 元素。
-
**ID 选择器**: 使用 `#id` 来定位具有特定 id 的元素。例如,`page.locator('#my-id')` 会定位到页面上 id 为 "my-id" 的元素。
-
**类选择器**: 使用 `.class` 来定位具有特定类的元素。例如,`page.locator('.my-class')` 会定位到页面上所有具有 "my-class" 类的元素。
-
**标签名选择器**: 使用 `tagname` 来定位特定类型的元素。例如,`page.locator('div')` 会定位到页面上所有的 div 元素。
这些都是 Playwright 中 `page.locator()` 方法的常用定位方式。根据需要选择合适的方法来定位元素。
在 Playwright 中,`page.locator()` 方法返回一个元素定位器(Element Locator),这个定位器可以用于定位和操作页面上的元素。以下是一些更深入的介绍:
-
**链式定位**:`page.locator()` 的返回值本身也有 `locator()` 方法,这意味着可以链式地定位元素。例如,`page.locator('.my-class').locator('.my-subclass')` 会定位到所有具有 "my-class" 类的元素中,再次具有 "my-subclass" 类的元素。
-
**操作元素**:定位器提供了一系列方法用于操作元素,例如 `click()`、`fill()`、`check()`、`uncheck()`、`selectOption()` 等。这些方法可以直接在定位器上调用,例如 `page.locator('#my-id').click()` 会点击 id 为 "my-id" 的元素。
-
**获取元素属性和状态**:定位器还提供了一些方法用于获取元素的属性和状态,例如 `getAttribute()`、`innerText()`、`isVisible()`、`isChecked()` 等。例如,`page.locator('#my-id').getAttribute('value')` 会返回 id 为 "my-id" 的元素的 value 属性值。
-
**等待元素**:定位器提供了 `waitFor()` 方法用于等待元素出现。例如,`page.locator('#my-id').waitFor()` 会等待直到 id 为 "my-id" 的元素出现。
-
**处理多个元素**:如果定位器定位到多个元素,你可以使用 `nth()` 方法来选择其中的一个。例如,`page.locator('.my-class').nth(1)` 会选择第二个具有 "my-class" 类的元素(索引从 0 开始)。
-
**元素计数**:你可以使用 `count()` 方法来获取定位器定位到的元素数量。例如,`page.locator('.my-class').count()` 会返回页面上具有 "my-class" 类的元素的数量。
这些都是 Playwright 中 `page.locator()` 方法的高级用法。你可以根据你的需要使用这些方法来定位和操作元素。
更多高级用法和技巧:
-
**元素的文本内容**:`textContent()` 方法可以用于获取元素的文本内容。例如,`page.locator('#my-id').textContent()` 会返回 id 为 "my-id" 的元素的文本内容。
-
**元素的 HTML**:`innerHTML()` 方法可以用于获取元素的内部 HTML。例如,`page.locator('#my-id').innerHTML()` 会返回 id 为 "my-id" 的元素的内部 HTML。
-
**元素的外部 HTML**:`outerHTML()` 方法可以用于获取元素的外部 HTML。例如,`page.locator('#my-id').outerHTML()` 会返回 id 为 "my-id" 的元素的外部 HTML。
-
**等待元素消失**:`waitFor({ state: 'detached' })` 方法可以用于等待元素消失。例如,`page.locator('#my-id').waitFor({ state: 'detached' })` 会等待直到 id 为 "my-id" 的元素消失。
-
**等待元素隐藏**:`waitFor({ state: 'hidden' })` 方法可以用于等待元素隐藏。例如,`page.locator('#my-id').waitFor({ state: 'hidden' })` 会等待直到 id 为 "my-id" 的元素隐藏。
-
**等待元素显示**:`waitFor({ state: 'visible' })` 方法可以用于等待元素显示。例如,`page.locator('#my-id').waitFor({ state: 'visible' })` 会等待直到 id 为 "my-id" 的元素显示。
-
**等待元素可编辑**:`waitFor({ state: 'editable' })` 方法可以用于等待元素可编辑。例如,`page.locator('#my-id').waitFor({ state: 'editable' })` 会等待直到 id 为 "my-id" 的元素可编辑。
-
**等待元素被选中**:`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`: 等待匹配的元素满足一个条件。
---Properties---
-
`first`: 返回第一个匹配的元素。
-
`last`: 返回最后一个匹配的元素。
-
`page`: 返回关联的 `Page` 对象。
这些方法和属性使 `Locator` 对象能够执行各种操作,包括查找元素、与元素交互、获取元素的信息等。