说明：playwright可以用于UI自动化测试，有方便的录制插件，录制出来的脚本准确度也比较高，也比较方便调试修改。下面以直接使用者的角度介绍下playwright如何快速上手使用

一、基于python环境安装playwright

说明：安装playwright插件，注意要先安装python环境

pip install playwright

二、下载浏览器内核驱动

说明：下载浏览器内核，录制程序使用

playwright install

三、启动录制

playwright codegen https://baidu.con

四、流程说明

说明：直接把录制生成的代码复制到python编辑器里面就能运行，下面我们说明下各代码含义

再调试下录制生成的代码，确保每个元素能正常获取到，特别是部分元素是通过id获取的，这种就需要手动修改脚本

1.生成浏览器驱动

browser = playwright.chromium.launch(headless=False)

说明：可支持的浏览器有'chromium', 'webkit' or 'firefox'，方法里面的参数支持设置是否是无头模式、窗口大小、是否代理等等

2.生成浏览器上下文（context）对象

context = browser.new_context(no_viewport=True)

说明：创建context对象，context之间是相互隔离的，可以理解为轻量级的浏览器实例.如需要不同用户登录同一个网页，不需要创建多个浏览器实例，只需要创建多个context即可。

3.生成浏览器页面page

page = context.new_page()

说明：page就相当于浏览器的选项卡，一般在浏览器context上创建，后续打开网页 、定位元素、页面操作都是基于page

4.打开一个指定url地址

page.goto("https://www.baidu.com")

五、相关操作方法说明

1.常用基本方法

查找元素

page.locator():元素定位器

page.get_by_text("文本内容"):查找文本匹配的元素

page.get_by_role("button"):get_by_role是一个查找页面元素的方法,代表要查找的元素的角色或类型

模拟点击相关

# 点击

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

# 双击

page.get_by_text("Item").dblclick()

# 右击

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

# Shift + 点击

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

# 鼠标悬停在元素上

page.get_by_text("Item").hover()

# 点击左上角

page.get_by_text("Item").click(position={ "x": 0, "y": 0})

模拟输入

fill():输入文字

type():一个字符一个字符地输入字段，就好像它是一个使用locator.type()的真实键盘的用户。

获取元素文本

inner_text():获取元素的文本内容

等待时间

page.wait_for_timeout(2000):强制等待2秒

检查元素是否找到

disable_button is not None   找到标识true，未找到为false

模拟键盘按钮

# 按Enter键

page.get_by_text("Submit").press("Enter")

# 在键盘上按$符号

page.get_by_role("textbox").press("$")

文件上传

page.set_input_files("input[type=file]", r'E:\基础内容\POC环境相关文档\合同文档合集\信托合同.pdf')

2.汇总

page.locator():playwright的核心功能之一，元素定位器

query_selector()：返回第一个匹配给定CSS选择器的元素。如果找不到匹配的元素，则返回None。

query_selector_all():用于在页面中查询匹配指定CSS选择器的所有元素，如果没有找到匹配的元素，则返回空列表。

page.get_by_text()通过文本内容定位。

page.get_by_label()通过关联标签的文本定位表单控件。

page.get_by_placeholder()按占位符定位。

page.get_by_title()通过标题属性定位元素。

page.get_by_role()通过显式和隐式可访问性属性进行定位。

page.get_by_alt_text()通过替代文本定位元素，通常是图像。

page.get_by_test_id()根据data-testid属性定位元素(可以配置其他属性)。

has_text()查找子代或后代所有包含对应文本的,相反的也有has_not_text()

inner_text():获取元素的文本内容

click():点击事件

fill("XXX"):写入内容

first.click():第一个元素

nth(1).click():下标为1的元素，从0开始

page.set_input_files("input[type=file]", r'E:\基础内容\POC环境相关文档\合同文档合集\信托合同.pdf'):文件上传

reload():用于重新加载当前页面。这个方法会发送一个浏览器级别的“页面刷新”请求，清除并重新加载整个页面的内容。

六、详细说明

1.launch

launch()方法是Playwright库中用于启动浏览器的函数。它接受一个可选参数，该参数可以是一个字典，用于配置浏览器的选项。

下面是一些常用的launch()方法的选项：

headless: 布尔值，默认为True。如果设置为False，则会在启动浏览器时显示浏览器窗口。

slow_mo: 浮点数，默认为0。如果设置为大于0的值，则会增加浏览器操作的延迟时间（单位为毫秒）。

ignore_https_errors: 布尔值，默认为False。如果设置为True，则在访问HTTPS网站时不会检查证书错误。

viewport: 字典，用于指定浏览器窗口的大小和位置。例如：{'width': 800, 'height': 600}。

args: 列表，用于传递给浏览器进程的命令行参数。例如：['--disable-gpu']。

2.new_context

new_context()方法是Playwright库中用于创建一个新的浏览器上下文的函数。它接受一个可选参数，该参数可以是一个字典，用于配置浏览器上下文的选项。下面是一些常用的new_context()方法的选项：

user_agent: 字符串，默认为当前浏览器的用户代理字符串。如果设置为其他值，则会使用指定的用户代理字符串。

viewport: 字典，用于指定浏览器窗口的大小和位置。例如：{'width': 800, 'height': 600}。

accept_downloads: 布尔值，默认为False。如果设置为True，则会在下载文件时自动接受下载对话框。

record_har: 字典，用于录制HTTP请求和响应数据。例如：{'path': '/tmp/har.har'}。

3.new_page

new_page()方法是Playwright库中用于创建新的浏览器页面的函数。下面是一些常用的new_page()方法的用法：

browser.new_page()创建一个新的浏览器页面

page.goto('https://www.baidu.com')打开一个网页

page.url获取当前页面的URL

page.evaluate('() => document.title')在页面上执行JavaScript代码

page.screenshot(path='screenshot.png')截取页面的屏幕截图

4.locator

locator()方法可以根据元素的CSS选择器来查找。您可以使用各种CSS选择器，包括但不限于：

标签名：例如 page.locator('button')

类名：例如 page.locator('.my-class')

ID：例如 page.locator('#my-id')

属性：例如 page.locator('[data-testid="my-test-id"]')

文本内容：例如 page.locator(':text("My Text")')

locator()方法支持所有的CSS选择器，包括：

基本选择器：例如div, span, .my-class, #my-id等。

属性选择器：例如[href], [class="my-class"], [data-my-attr="value"]等。

伪类选择器：例如:hover, :focus, :first-child, :last-of-type等。

结合选择器：例如div.my-class, div, span, div > p, div + p等。

文本选择器

page.click('text=登录'):没有加引号(单引号或者双引号)，模糊匹配，对大小写不敏感

page.click('text="登录"'):有引号，精确匹配，对大小写敏感

比如：<article><div >Playwright</div></article>

page.locator(':has_text("Playwright")').click()

# 也可以这样写，指定标签

page.locator('article:has_text("Playwright")').click()

# 也可以这样

page.locator(":text('Playwright')").click()

# 还可以这样

page.locator('article:has'text=Playwright').click()

css选择器

page.locator('button').click() # 根据标签

page.locator('#nav-bar .contact-us-item').click() # 通过id +class

page.locator('[data-test=login-button]').click() # 属性定位

page.locator("[aria-label='Sign in']").click()

#css定位前面可以加个css=，但是不加也可以程序也会自动匹配

Xpath 定位

page.locator("xpath=//button").click()

组合定位：text、css、xpath三者可以两组合定位

page.locator("article:has-text('Playwright')").click()

page.locator("#nav-bar :text('Contact us')").click()

css+css组合定位

page.locator(".item-description:has(.item-promo-banner)").click()

Xpath + css 组合定位

page.fill('//div[@class="SignFlow-account"] >>css=[name="username"]',"0863")

xpath+xpath组合定位

page.fill('//div[@class="SignFlowInput"] >> //input[@name="password"]',"ma160065")

5. get_by

get_by_id: 通过元素的 id 属性来查找元素，例如：page.get_by_id("my-id")

get_by_name: 通过元素的 name 属性来查找元素，例如：page.get_by_name("my-name")

get_by_text: 通过元素的文本内容来查找元素，例如：page.get_by_text("Submit")

get_by_title: 通过元素的 title 属性来查找元素，例如：page.get_by_title("my-title")

get_by_placeholder: 通过元素的 placeholder 属性来查找元素，例如：page.get_by_placeholder("my-placeholder")

get_by_selector: 通过 CSS 选择器来查找元素，例如：page.get_by_selector("#submit-button")

get_by_xpath: 通过 XPath 表达式来查找元素，例如：page.get_by_xpath("//div[@class='my-class']")

get_by_label: 根据label属性值查找元素，类似于HTML中的label标签和对应的for属性。

get_by_role: 通过角色方式定位元素，例如：page.get_by_role("button", name="Submit")

6.get_by_role

元素：<li class="el-menu-item" role="menuitem" tabindex="-1">队列管理</li>

page.get_by_role("menuitem", name="队列管理").click()

元素：<button class="el-button el-button--primary el-button--default mr-24px mb-12px" aria-disabled="false" type="button"><span>新增队列</span></button>

page.get_by_role("button", name="新增队列").click()

7.set_input_files

# 上传文件

# 选择单个文件

page.set_input_files("input[type=file]", r'E:\基础内容\POC环境相关文档\合同文档合集\信托合同.pdf')

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

# 选择多个文件

page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# 删除所有选中文件

page.get_by_label("Upload file").set_input_files([])

# 从内存中上传缓冲区

page.get_by_label("Upload file").set_input_files(

    files=[

        {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}

    ],

)

# 处理动态页面上的焦点事件

page.get_by_label('password').focus()

# 拖拽元素

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