playwright基本使用

一、官方文档

1. 官方文档： https://playwright.dev/python/docs/intro
2. 官方方法文档： https://playwright.dev/python/docs/api/class-playwright

二、安装

pip install playwright

Install the Pytest plugin:    pip install pytest-playwright
Install the required browsers:     playwright install

清华大学 ：https://pypi.tuna.tsinghua.edu.cn/simple/
阿里云：http://mirrors.aliyun.com/pypi/simple/
中国科学技术大学 ：http://pypi.mirrors.ustc.edu.cn/simple/
华中科技大学：http://pypi.hustunique.com/
豆瓣源：http://pypi.douban.com/simple/
腾讯源：http://mirrors.cloud.tencent.com/pypi/simple
华为镜像源：https://repo.huaweicloud.com/repository/pypi/simple/

三、测试安装成功

import re  
from playwright.sync_api import sync_playwright,Page, expect  
  
  
def test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page():  
    br = sync_playwright().start()  
    page = br.chromium.launch(headless=False).new_page()  
  
    page.goto("https://playwright.dev/")  
  
    # Expect a title "to contain" a substring.  
    expect(page).to_have_title(re.compile("Playwright"))  
  
    # create a locator  
    get_started = page.get_by_role("link", name="Get started")  
  
    # Expect an attribute "to be strictly equal" to the value.  
    expect(get_started).to_have_attribute("href", "/docs/intro")  
  
    # Click the get started link.  
    get_started.click()  
  
    # Expects the URL to contain intro.  
    expect(page).to_have_url(re.compile(".*intro"))

四、脚本录制

1. playwright codegen -o filepath www.baidu.com   #打开被测网站，将脚本保存到指定位置

#常用参数
1. --save-storage=auth.json ：录制结束时将cookies and localStorage 进行保存在auth.json文件中
2. --load-storage=auth.json ：加载已保存的登录认证信息
3. -o test.py：将录制的文件保存在test.py中
4. -b ff：打开firefox浏览器进行录制，默认是chrome,更多参数有： cr, chromium, ff, firefox, wk, webkit
5. --device="iPhone 11" ：模拟移动设备iPhone11，注意：device的值必须用双引号，并且区分大小写
6. --viewport-size=800,600 ：设置窗口大小
7. --help ：查看帮助信息

五、trace

录制 trace.zip 文件

browser = chromium.launch()
context = browser.new_context()

# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")

查看 trace.zip 文件

playwright show-trace trace.zip

playwright 默认启动的浏览器窗口大小是 1280x720，我们可以通过设置 no_viewport 参数来禁用固定的窗口大小

六、窗口最大化

6.1 设置 args 参数 --start-maximized 并且设置 no_viewport=True

from playwright.sync_api import sync_playwright  
  
with sync_playwright() as p:  
    browser = p.chromium.launch(  
        headless=False,#关闭无头模式  
        args=['--start-maximized']  #设置谷歌浏览器参数  
    )  
    context = browser.new_context(no_viewport=True)  #设置no_viewport参数  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  
    page.pause()

6.2 viewport 指定窗口大小

已知问题：浏览器不会贴合到屏幕左侧

1. viewport 可以在 new_context 或者 new_page 方法中设置，都可生效

from playwright.sync_api import sync_playwright  
  
with sync_playwright() as p :  
    browser  = p.chromium.launch(  
        headless=False,  
    )  
    context = browser.new_context(  
        viewport={'width': 1920, 'height': 1080},  
    )  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  
    page.pause()

七、指定浏览器

7.1 安装浏览器

目前支持的浏览器：chromium, chrome, chrome-beta, msedge, msedge-beta, msedge-dev, firefox, webkit
不会与系统中的现有的浏览器进行隔离

playwright install --help  #查看帮助

playwright install --force  chrome  #强制安装谷歌浏览器

7.2 启动谷歌浏览器

1. 默认情况下，chromium.launch() 不带 channel 参数打开的是 chromium 浏览器
2. Google Chrome 和 Microsoft Edge 浏览器都是用的 chromium 内核，
   1. channel="chrome" 即可打开谷歌浏览器
   2. 添加 channel="msedge" 即可打开 Microsoft Edge 浏览器

from playwright.sync_api import sync_playwright  
  
with sync_playwright() as p:  
    browser = p.chromium.launch(  
        headless=False,#关闭无头模式  
        channel="msedge",  #启动edge浏览器  
        # channel="chrome", #启动谷歌浏览器  
        args=['--start-maximized'],  #设置谷歌浏览器参数  
    )  
    context = browser.new_context(no_viewport=True)  #设置no_viewport参数  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  
    page.pause()

八、刷新、前进、后退

1. page.reload()
2. page.go_back()
3. page.go_forward()

with sync_playwright() as p:  
    browser = p.chromium.launch(  
        headless=False,  
        slow_mo=1000,   /每执行 1 步，停顿 1s
    )  
    context = browser.new_context(  
        viewport={'width': 1920, 'height': 1080},  
    )  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  
    page.reload()   #刷新
    page.locator('#kw').fill("测试")  
    page.locator('#su').click()  
    page.go_back()  #后退
    page.go_forward()   #前进
    page.pause()

九、元素定位

9.1 css 选择器

css 选择器 是一种语法，需要学习
1. ID选择器: #username  【# 表示ID】
2. class选择器：.form-control.btn-primary 【. 号表示class】
3. 直接下级：html>body>div>div
4. 间接下级：form[class="form-inline"] input 【空格就是间接下级】
5. 任意层级标签名： input 【任意层级的input标签名】
6. 通过属性辅助定位：input[id="username"] 【 [ ] 表示属性】  
	input[id="username"] 【属性等于】  
	input[id*="erna"] 【属性包含】  
	input[id^="use"] 【属性开头】  
	input[id$="me"] 【属性结尾】

9.2 xpath 选择器

xpath 是一种语法，需要学习

1. 绝对路径：/html/body/div[4]/div/form/div[2]/input   【[数字] ： 选择第几个】
2. 相对路径： //form/div[2]/input 【//表示任意路径】
3. 任何标签名： //form/div[2]/* 【* 表示任意标签】
4. 通过标签名属性协助定位： //input[@id="username"] 【 @id 表示属性】
	1. //input[@id] 【input标签 有id属性】
	2. //input[@id="username" and @type="text"] 【and 表示并且】
	3. //input[@id="username" or @type="text"] 【or 表示或则】
5. 根据文本定位
	1. //a[text()="销售出库"] 【等于文本】
	2. //a[contains(text(),"售出")] 【包含】
	3. //a[starts-with(text(),"销售出")] 【以什么文本开头】
6. 属性包含
	1. //input[contains(@id,"name")] 【contains 包含】
	2. //input[starts-with(@id,"user")] 【starts-with 开头】
7. 先定位到一个元素，再找上级 或 下级 【可以向上也可以向下】
	1. //input[@id="username"]/.. 【/.. 表示上级】
	2. //input[@id="username"]/../../../form 【/ 表示下级 】

9.3 playwright 自带选择器

page.get_by_role()：通过显式和隐式可访问性属性定位。
page.get_by_text()：按文本内容定位。
page.get_by_label()：通过关联标签的文本查找表单控件。
page.get_by_placeholder()：按占位符查找输入。
page.get_by_alt_text()：通过其文本替代品定位元素，通常是图像。
page.get_by_title()：通过标题属性定位元素。
page.get_by_test_id()：根据其data-testid属性定位元素（可以配置其他属性）。

9.4 元素定位示例

page.locator("xpath=//h2")
page.locator("text=文本输入") 
page.locator("#s-usersetting-top")
page.locator("input[name=\"wd\"]").click()
page.get_by_role("button", name="百度一下").click()
page2.get_by_placeholder("条码").click()
page2.get_by_text("豆瓣：").click()