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

---Properties---

  • `first`: 返回第一个匹配的元素。

  • `last`: 返回最后一个匹配的元素。

  • `page`: 返回关联的 `Page` 对象。

这些方法和属性使 `Locator` 对象能够执行各种操作,包括查找元素、与元素交互、获取元素的信息等。

相关推荐
前端啊龙几秒前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠5 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds25 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js