软件测试|web自动化测试神器playwright教程（四）

前言

上一篇文章我们介绍了playwright的定位方法，在实际操作中，我们找到元素之后，就要对元素进行操作，达到与页面进行交互的目的，我们主要的操作包括鼠标单击，输入文本，复选框操作，单选按钮，选择选项，上传文件等。本篇文章我们就来介绍playwright如何实现这些操作。

fill() 输入文本

使用 locator.fill() 是填写表单字段的最简单方法。它聚焦元素并input使用输入的文本触发事件。它适用于<input>,<textarea>和[contenteditable]元素。例如我们在百度的搜索框中输入我们想要搜索的内容，代码如下：

from playwright.sync_api import sync_playwright


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    page = browser.new_page()
    page.goto("https://www.baidu.com")
    print(page.title())
    page.fill('#kw', "theshy")
    page.wait_for_timeout(5000)
    browser.close()

我们也可以模拟注册操作，部分网站注册时需要提供用户名，邮箱，生日并输入密码等信息，我们也可以使用playwright来模拟这部分操作，代码如下:

# Text 文本框输入
page.get_by_role("textbox").fill("theshy")

# 根据label 定位 Date 日期输入
page.get_by_label("Birth date").fill("1999-12-31")

# 邮箱输入
page.get_by_label("mail").fill("123456789@qq.com")

# 密码输入
page.get_by_label("password").fill("play123456789")

# 确认密码
page.get_by_label("confirm_password").fill("play123456789")

当输入框有label标签时，我们可以直接根据label标签定位，非常便捷，示例代码如下：

# 直接根据label定位
    page.get_by_label("用 户 名:").fill("theshy")
    page.get_by_label("密     码:").fill("play123456789")

type() 输入文本

与fill()不同，type()输入文本是以一个字符一个字符输入的，模拟我们在键盘上键入的每一个字符，示例如下：

page.locator('#area').type('Hello World!')

注：type() 方法将发出所有必要的键盘事件，所有keydown, keyup,keypress事件就位，甚至可以指定delay按键之间的可选操作来模拟真实的用户行为。大多数时候，page.fill()会正常工作。如果页面上有特殊的键盘处理，您只需要键入字符。

click() 鼠标点击

我们在网页上进行操作的时候，免不了要执行点击操作，click()方法就能帮助我们实现简单的点击操作。使用方法如下：

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

# Double click
page.get_by_text("Item").dblclick()

# Right click
page.get_by_text("Item").click(button="right")

# Shift + click
page.get_by_text("Item").click(modifiers=["Shift"])

# Hover over element
page.get_by_text("Item").hover()

# Click the top left corner
page.get_by_text("Item").click(position={ "x": 0, "y": 0})

使用示例，当我们输入了用户名密码之后，通常情况下，我们点击登录按钮即可完成登录操作。

    page.get_by_label("用 户 名:").fill("theshy")
    page.get_by_label("密     码:").fill("play123456789")
    page.locator("text=登录").click()
    # page.click("text=登录")

文件上传

一般情况下，可以使用locator.set_input_files()方法选择要上传的输入文件。它期望第一个参数指向类型为 的输入元素"file"。数组中可以传递多个文件。如果某些文件路径是相对的，则它们将相对于当前工作目录进行解析。空数组清除所选文件。

# Select one file
page.get_by_label("Upload file").set_input_files('myfile.pdf')

# Select multiple files
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"}
    ],
)

如果当前没有输入元素（它是动态创建的），可以通过处理page.on(“filechooser”)事件或在您的操作中使用相应的等待方法：

with page.expect_file_chooser() as fc_info:
    page.get_by_label("Upload file").click()
file_chooser = fc_info.value
file_chooser.set_files("myfile.pdf")

select 下拉框

<select>使用locator.select_option()选择元素中的一个或多个选项。可以指定选项value，或label选择。可以选择多个选项。

# Single selection matching the value
page.get_by_label('Choose a color').select_option('red')

# Single selection matching the label
page.get_by_label('Choose a color').select_option(label='Green')

# Multiple selected items
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])

复选框和单选

使用locator.set_checked()是选中和取消选中复选框或单选按钮的最简单方法。input[type=checkbox]此方法可与,input[type=radio]和元素一起使用[role=checkbox]。

# Check the checkbox
page.get_by_label('I agree to the terms above').check()

# Assert the checked state
assert page.get_by_label('Subscribe to newsletter').is_checked() is True

# Select the radio button
page.get_by_label('XL').check()

drag_to 拖动

这个操作和selenium的拖拽非常像，实现的功能也是一样的，这个方法将：

• 将鼠标悬停在要拖动的元素上
• 按鼠标左键
• 将鼠标移动到将接收放置的元素
• 松开鼠标左键

page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

如果页面依赖于dragover正在调度的事件，则您至少需要移动两次鼠标才能在所有浏览器中触发它。要可靠地发出第二次鼠标移动，请重复mouse.move()或locator.hover()两次。操作顺序是：悬停拖动元素，鼠标向下，悬停放置元素，第二次悬停放置元素，鼠标向上。代码如下：

page.locator("#item-to-be-dragged").hover()
page.mouse.down()
page.locator("#item-to-drop-at").hover()
page.mouse.up()

总结

本文主要介绍了playwright对于元素的操作，包括输入内容，鼠标点击，上传文件，拖拽元素等操作，相对于selenium来说，playwright在很多方面更加简单快捷，相对于selenium，有明显的优势。