提升自动化测试效率：探索Playwright界面操作的无限潜力

Playwright 之界面操作

通用操作

文本

可见文本：

• 单个Locator对象使用 inner_text()

• 多个Locator对象： all_inner_texts

不可见文本：

<p id="source">
  <span id='text'>看一下<br>这个内容<br>如何变化</span>
  <span style="display:none">隐藏内容</span>
</p>

• 单个对象：text_content()

• 多个对象： all_text_contents()

lc = page.locator("#source")
print('innerText:',   lc.inner_text())
print('--------------')
print('textContent:', lc.text_content()) # 可以展示隐藏内容

看一下
这个内容
如何变化
--------------------------------------------
看一下这个内容如何变化
隐藏内容

获取标签属性

获取元素的属性值，使用 Locator对象的 get_attribute ()

locator.get_attribute(name)
locator.get_attribute(name, **kwargs)

获取元素内部html：

locator.inner_html()
locator.inner_html(**kwargs)locator.inner_html()
locator.inner_html(**kwargs)

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

innerhtml：

 <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>

动作：

单击：

page.get_by_role("button").click()

双击：

locator.dblclick()

悬停：

page.get_by_role("link").hover()

等待元素可见

​ Playwright通过Locator对元素进行操作时，如果元素当前还没有出现，缺省就会等待30秒。但是有的时候等待这个元素出现后，进行某些操作。例如验证码等等动态展示的。

page.locator("#source").wait_for()

order_sent = page.locator("#order-sent")
order_sent.wait_for()

Arguments 参数

state “attached”|“detached”|“visible”|“hidden”

• 默认为 'visible' 。可以是：
• 'attached' - 等待元素出现在 DOM 中。
• 'detached' - 等待 DOM 中不存在元素。
• 'visible' - 等待元素具有非空边界框且没有 visibility:hidden .请注意，没有任何内容或有 display:none 内容的元素具有空边界框，并且不被视为可见。
• 'hidden' - 等待元素从 DOM 中分离出来，或者有一个空的边界框或 visibility:hidden .这与 'visible' 选项相反。

timeout float

​ 最长时间（以毫秒为单位）。默认值为 30000 （30 秒）。通过 0 以禁用超时。可以使用 browser_context.set_default_timeout（） 或 page.set_default_timeout（） 方法更改默认值。

判断是否存在

​ 在自动化操作时，如果有的时候出现，有的时候不出现，我们可以设置一些操作：

page.locator("#source").is_visible()
visible = page.get_by_role("button").is_visible()

返回 True 或 False ，不会等待元素，立刻判断。

输入框

文本框输入：

page.get_by_role("textbox").fill("example value")

文本框清空：

page.get_by_role("textbox").clear()

获取输入框内容：

对于输入框 <input> ， <textarea> 对应的用户输入文本内容，不能用 inner_text() 方法来获取内容。

value = page.get_by_role("textbox").input_value()

文件上传框：

<input type="file" multiple="multiple">

# 定位文件框 上传文件
page.get_by_label("Upload file").set_input_files('myfile.pdf')

# 选择多个
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# Remove all the selected files
page.get_by_label("Upload file").set_input_files([])

# Upload buffer from memory
page.get_by_label("Upload file").set_input_files(
    files=[
        {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}
    ],
)

# 先定位
lc = page.locator('input[type=file]')

# 单选一个文件
lc.set_input_files('d:/1.png')

# 或者 多选 文件
lc.set_input_files(['d:/1.png', 'd:/2.jpg'])

单选框多选框：

单选框radio：

page.get_by_role("checkbox").check() # 确保选中

不要使用click()，因为有的会导致，再点一下就取消了。

取消选中：

page.get_by_role("checkbox").uncheck()

判断是否选中：

checked = page.get_by_role("checkbox").is_checked()

案例：

# 获取当前选中的元素
lcs = page.locator('#s_radio input[name="teacher"]:checked').all()
teachers = [lc.get_attribute('value')  for lc in lcs ] # 列表生成式
print('当前选中的是:', ' '.join(teachers))

# 确保点选 小雷老师
page.locator("#s_radio input[value='小雷老师']").check()

下拉框：

page.locator('#ss_single').select_option('小江老师')

select_option 参数是 选项 option 元素 的 value 或者 选项文本 ， 要完全匹配。

当然也可以使用关键字参数 index , value , label 指定分别根据 索引，value属性， 选项文本 进行匹配。

# 根据 索引 选择， 从0 开始， 但是为0的时候，好像有bug
page.locator('#ss_single').select_option(index=1)

# 根据 value属性 选择
page.locator('#ss_single').select_option(value='小江老师')

# 根据 选项文本 选择
page.locator('#ss_single').select_option(label='小江老师')

# 清空所有选择
page.locator('#ss_single').select_option([])

下拉多选框：

# 根据 value属性 或者 选项文本 多选
page.locator('#ss_multi').select_option(['小江老师', '小雷老师'])

# 根据 value属性 多选
page.locator('#ss_multi').select_option(value=['小江老师', '小雷老师'])

# 根据 选项文本 多选
page.locator('#ss_multi').select_option(label=['小江老师', '小雷老师'])

# 清空所有选择
page.locator('#ss_multi').select_option([])

网页操作：

官方文档：Navigations | Playwright Python

打开网页：

# Navigate the page
page.goto("https://example.com")

刷新：

page.reload()
page.reload(**kwargs)

前进：

page.go_forward()
page.go_forward(**kwargs)

后退：

page.go_back()
page.go_back(**kwargs)

获取页面源码数据和标题：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    print("获取标题",page.title())
    print("页面源码数据--------------")
    with open(r'baidu.html','w+',encoding='utf-8') as fp:
        fp.write(page.content())
    browser.close()

就一个字，快！

设置页面大小高度：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.baidu.com/")
    page.set_viewport_size({"width": 640, "height": 480})
    page.screenshot(path="baidu.png")
    # browser.close()

总结：

通过本文的介绍，我们对Playwright的界面操作有了更深入的了解。从通用操作、网页操作到输入框操作，我们探索了各种关键操作和技巧。同时，我们还学习了如何使用等待元素和判断元素等功能来优化测试和自动化任务。

​ Playwright作为一款强大的自动化测试工具，提供了丰富的API和跨浏览器支持，使得我们能够轻松地模拟用户在浏览器中的操作。通过掌握这些操作技巧，我们能够更高效地编写和执行测试脚本，提高测试覆盖率和质量。

​ 在未来的软件开发和测试中，Playwright将继续发挥重要作用。它的灵活性和可扩展性使得我们能够应对不断变化的需求和新兴的技术。因此，深入了解并熟练运用Playwright的界面操作将成为我们的竞争优势。

​ 无论是开发人员、测试人员还是自动化爱好者，学习和掌握Playwright的界面操作都是一项值得投入时间和精力的技能。它不仅能提高我们的工作效率，还能帮助我们构建更可靠和稳定的软件。让我们抓住这个机会，深入探索Playwright的界面操作，并将其应用于我们的项目中。

温馨提示：

​ 本文整理源：快速上手 | 白月黑羽 (byhy.net)，仅仅用于学习，如有侵权，请联系删除！