Playwright快速入门

一:什么是Playwright？

Playwright是由微软基于node.js开发的开源自动化框架，适合用于web网页，移动端网页，具有执行速度快，编写简单的特性；与selenium不同的是，playwright不需要去下载指定的浏览器驱动，支持chorme，firefox，webkit内核的浏览器，与selenium不同的是它并不支持ie古老的浏览器；

在响应速度方面，playwright执行相同的步骤，selenium需要8s而playwright只需要3s；

二：支持的语言？

playwright支持的语言有python，java,js/ts，c#,go

三：如何安装？

在python中使用pip安装

pip install playwright

安装驱动

playwright install

安装完成后就可以正式进入使用

四：如何使用

1.打开浏览器

playwright支持同步和异步的使用，这里用同步的编写

from playwright.sync_api import sync_playwright
with sync_playwright as p:
    wd=p.chromium.lauch(headless=False)#打开浏览器，使用ui画面执行

2.打开网址

```python
page=p.new_page()#创建页面对象
page.goto('www.google.com')#跳转到指定的页面
```

3.定位元素

```python
#css选择器
page.locator('#name')#通过id定位，使用#
page.locator('.name')#通过class定位，使用.
page.locator('.name>li')#通过父级元素定位li子元素，li与上级是上下级关系
page.locator('.name , .phone')#定位多个元素，用逗号分割
page.locator('span:nth-child(2)')#定位标签下的第几个标签，从0开始计算
page.locator('span:nth-last(2)')#定位标签下倒数的第几个标签，从0开始计算
page.lcoator('span:nth-child(event)')#定位标签的偶数次数的标签
page.lcoator('span:nth-child(odd)')#选择奇数位置的元素
page.lcoator('[herf:"www.baidu.com"]')#选择标签属性包含了本链接的元素
#语义化定位
page.getByRole('button',{name:'提交'})#通过角色+可访问名称定位
page.getByLabel('用户名')#通过表单控件的label文本定位
page.getByPlaceholder('请输入账号')#通过输入框的提示词定位
page.getByText('登录')#根据标签文本内容定位
page.getAltText('test')#根据标签alt定位
page.getBytitle('标题')#根据标题内容定位
page.getByTestID('test')#根据data-testid属性定位
#xpath定位
page.loactor('//input[@id="kw"]')#f放入xpath表达式就可以
```

拥有role的标签

HTML 标签（写法）	默认/隐式 role	能否用 getByRole
<a href>	link
<area href>	link
<button>	button
<input type="button">	button
<input type="submit">	button
<input type="reset">	button
<input type="checkbox">	checkbox
<input type="radio">	radio
<input type="range">	slider
<input type="search">	searchbox
<input type="text">	textbox
<input type="password">	textbox
<input type="email">	textbox
<input type="tel">	textbox
<input type="url">	textbox
<input type="number">	spinbutton
<textarea>	textbox
<select>	combobox
<select multiple>	listbox
<option>	option
<img alt="…">	img
<table>	table
<thead>	rowgroup
<tbody>	rowgroup
<tfoot>	rowgroup
<tr>	row
<th scope="col">	columnheader
<th scope="row">	rowheader
<td>	cell
<ul>	list
<ol>	list
<li>	listitem
<dl>	term / definition
<dt>	term
<dd>	definition
<nav>	navigation
<main>	main
<aside>	complementary
<header>	banner
<footer>	contentinfo
<section aria-label="xxx">	region
<article>	article
<dialog>（open 时）	dialog
<details>	group
<summary>	button
<h1>–<h6>	heading + 级别
<form>	form
<fieldset>	group
<legend>	无 role，但提供 <fieldset> 的 name
<label>	无 role
<div>	无 role（除非显式写 role="xxx"）
<span>	无 role
<p>	无 role
<i> / <b> / <em> / <strong>	无 role

4.缺省等待

在playwright中，各个操作动作都默认包含了一个等待时间，一个步骤的默认等待时间为30s,单条测试的默认最大超时时间也为30s，如果需要修改元素的等待时间也可以手动修改等待时间；

当元素查询超过了等待时间就会抛出超时错误

page.locator('.login').click({timeout:10000})#修改等待时间为100S
page.setDefaultTimeout(2000)#修改所有locator动作的等待时间

5.界面操作

```python
page.locator('.test').inner_text()#获取的单个文本内容，不适用于多个元素的文本
page.locator('.test').all_inner_text()#获取所有文本的内容，返回一个列表，单个元素也可以返回
page.locator('.test').get_attribute('href')#获取元素的属性，方法内填入需要的属性名
page.locator('.test').get_inner_html#
page.locator('.test').click()#操作元素点击
page.locator('.test').dbclick()#操作元素双击
page.locator('.test').fill()#操作输入框写入文本
page.locator('.test').type("hi", delay=100)#逐个字符敲击键盘
page.locator('.test').hover()#操作鼠标悬浮
page.locator('.test').drag_to()#操作拖动元素道另一个元素的位置
```

page.locator('.test').check()/uncheck()#勾选或者取消勾选
page.locator('.test').select_option()#下拉选择框选择
page.locator('.test').set_input_files()#上传文件，方法内传入文件
page.locator('.test').clear()#清空输入框
page.locator('.test').dialog()#监听弹窗

6.网页Page对象操作

```python
#导航
page.goto('www.baiud.com')#操作打开网页
page.reload()#操作刷新网页
page.go_back()#返回上一步
page.forward()#前进一步，如果前一步的话
page.wait_for_load_state('networkkidle')#等待网络空闲
page.wait_for_url()#等待url匹配

获取内容

page.content()#获取整页的html

page.title()#获取网页标题

page.innert_text()#获取可视文本

page.input_value()#获取表单值

注入脚本/样式

page.add_script_tag(content='windows.foo=1')

鼠标键盘

page.mouse.move(100,200)#移动鼠标道制定的位置

page.keyboard.press('enter')#键盘按下回车键

事件监听

page.on('dialog',lambda d:d.accept())#弹窗点击确定

截图/pdf

page.screenshot(path='full.png',full+page=True)#截取整个屏幕

page.locator('#box').screenshot(path='test.png')#截取制定区域的截图

page.pdf(path='page.pdf'，format='A4')

设备模拟

page.set_viewport_size({'windows':1280,'height':720})#模拟窗口大小

page.set_suer_agent(''MyBOT/1.0)#模拟用户设备

cookie&本地存储

page.context.add_cookies(["name":"token","value":""123123])#注入cookie

page.contenxt.clear_cookies()#清除浏览器cookies

page.evaluate("localStorage.setItem('theme','dark')")#

iframe=page.frame_locator('#myframe')#切换到frame

iframe.locator('.test').click()#后续操作与普通无异，如果需要继续操作原页面，离开frm作用于就行

窗口切换

with page.expect_event("popup") as popup_info:#检测到页面跳转就把对象存在popup_info中

page.get_by_text('登录').click()#页面跳转

login_page=popup_info.value#获取到新的页面

login_page=wait_for_load_state()#等待新页面网络加载完成

login_page.locator('.test').click()#操作新页面的元素

login_page.close()#关闭新的页面标签

page.bring_to_fromt()#返回原页面