Python-playwright:一款强大的UI自动化工具、新兴爬虫利器
作者:mmseoamin日期:2023-12-11

点击名片关注 阿尘blog,一起学习,一起成长

本文主要分享由微软开发的实现Web UI自动化测试工具Playwright库,相比于之前学习过selenium库,playwright对于编写自动化代码绝对是更轻松了,因为它支持脚本录制,如果只求简单点可以不用写一行代码就能够实现自动化,而且playwright有许多强大的api,很多功能比起selenium都轻松简单,好了话不多说,开启正文~

playwright简介和初步使用

1.1 playwright简介

playwright优点(这里就直接摘抄一下官网的哈,不是重点)

任意浏览器 • 全平台 • 同一套 API

跨浏览器。 Playwright 支持所有现代渲染引擎,包括:Chromium、WebKit 和 Firefox。

跨平台。 适用于 Windows、Linux、macOS、本地运行、 CI、headless 和 headed。

跨语言。 在 TypeScript, JavaScript, Python, .NET, Java 中使用 Playwright API

测试移动端 Web 。 对 Android 和 Mobile Safari 的 Google Chrome 原生移动端模拟。与你的移动端和云端应用采用相同的渲染引擎。

强适应性 • 测试不再容易失效

自动等待(auto-waits)。 Playwright 能够自动等待元素达到可操作的状态,外加一系列丰富的内置事件。不用再人工定义超时(timeouts) —— 这是测试容易失效的主要原因。

Web 优先的断言。 Playwright 断言专门为动态加载的 web 应用设计。能够在满足需要的条件前自动重试。

可追踪。 通过配置重试策略,采用捕捉执行轨迹、视频、截图来解决测试容易失效的问题。

不用再权衡取舍 • 不再有限制

浏览器在不同进程中运行属于不同来源的 Web 内容。Playwright 与现代浏览器架构保持一致,并在进程外运行测试。这使 Playwright 摆脱了典型的进程内测试运行程序限制。

一切并行。 跨越多个 tabs, 多个 origins 和多个 users 的测试场景。在一个测试中能够为不同的用户创建具有不同上下文的场景,并能在你的服务器上运行。

可信事件。 元素悬停(hover)、动态控件的交互、生产可信事件。Playwright 使用与真实用户一致的输入方式(pipeline)。

测试 frames,穿透 Shadow DOM。 Playwright 的选择器能够穿透 shadowDOM 和允许无缝输入 frame。

完全隔离 • 快速执行

浏览器上下文。 Playwright 为每个测试创建一个浏览器上下文。浏览器上下文相当于一个全新的浏览器配置文件。这提供了零开销的完整测试隔离。创建一个新的浏览器上下文只需要几毫秒。

一次登录。 保存上下文的身份验证状态并在所有测试中重用它。这绕过了每个测试中的重复登录操作,但提供了独立测试的完全隔离。

强大的工具

Codegen 。 通过记录您的操作来生成测试。将它们保存为各种语言。

Playwright inspector 。 检查页面,生成选择器,逐步执行测试,查看点击点,浏览执行日志。

Trace Viewer 。 捕获所有的信息来调查失败了的测试,Playwright 追踪包含测试运行截屏视频、实时 DOM 快照、动作浏览器、测试源等信息。

1.2 playwright安装与使用

playwright的安装(python3.7+)

pip install playwright

Playwright 安装驱动,相比起selenium就简单多了

python -m playwright install

Playwright 录制脚本

python -m playwright codegen

通过--help 查看可以用哪些参数

python -m playwright codegen --help
Usage: playwright codegen [options] [url]
open page and generate code for user actions
Options:
  -o, --output              saves the generated script to a file
  --target                   language to generate, one of javascript, playwright-test, python, python-async,
                                       python-pytest, csharp, csharp-mstest, csharp-nunit, java (default: "python")
  --save-trace               record a trace for the session and save it to a file
  --test-id-attribute   use the specified attribute to generate data test ID selectors
  -b, --browser           browser to use, one of cr, chromium, ff, firefox, wk, webkit (default:
                                       "chromium")
  --block-service-workers              block service workers
  --channel                   Chromium distribution channel, "chrome", "chrome-beta", "msedge-dev", etc
  --color-scheme               emulate preferred color scheme, "light" or "dark"
  --device                 emulate device, for example  "iPhone 11"
  --geolocation           specify geolocation coordinates, for example "37.819722,-122.478611"
  --ignore-https-errors                ignore https errors
  --load-storage             load context storage state from the file, previously saved with --save-storage
  --lang                     specify language / locale, for example "en-GB"
  --proxy-server                specify proxy server, for example "http://myproxy:3128" or
                                       "socks5://myproxy:8080"
  --proxy-bypass               comma-separated domains to bypass proxy, for example
                                       ".com,chromium.org,.domain.com"
  --save-har                 save HAR file with all network activity at the end
  --save-har-glob        filter entries in the HAR by matching url against this glob pattern
  --save-storage             save context storage state at the end, for later use with --load-storage
  --timezone 

有很多,这里只挑几个简单的常用的来说

-o:指定脚本录制输出位置;

--target:指定脚本语言,告诉他用什么语言写,后面一大堆,还有个python-pytest!,默认用python

-b:指定浏览器驱动,默认用的谷歌

那我们来小试牛刀:

python -m playwright codegen -o "D:\PythonProject\playwright_project\playwright_code.py"

运行之后我们用它自动打开的谷歌浏览器,打开百度,输入漂亮小姐姐并查找,结束录制,看看录制脚本

from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.locator("#kw").click()
    page.locator("#kw").fill("漂亮小姐姐")
    page.get_by_role("button", name="百度一下").click()
    # ---------------------
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

查看是否成功运行

Python-playwright:一款强大的UI自动化工具、新兴爬虫利器,ff286d4b4d0cb2c20aa9335d9d1fc9da.png,第1张

OK,完全可以,但是我们对它的脚本,有哪些功能怎么使用还完全不了解,下面来系统学习一下

1.3 playwright的脚本编写

playwright代码的编写,有两种模式:同步模式和异步模式

同步模式就如同selenium,上面录制脚本的示例就采用的同步模式,同步模式的语法如下

# 同步模式
# 导入Playwright类和sync_palywright 同步类
from playwright.sync_api import Playwright,sync_playwright
def main(playwright):
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    print(page.title())
    context.close()
    browser.close()
with sync_playwright() as p:
    main(p)

同步模式主要用的sync_playwright的api

异步模式语法:

# 异步模式
import asyncio
from playwright.async_api import Playwright,async_playwright
async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        context = await browser.new_context()
        page = await context.new_page()
        await page.goto("https://www.baidu.com/")
        print(await page.title())
        await context.close()
        await browser.close()
asyncio.run(main())

它俩很相似,异步模式主要用了async_playwright的api,主要采用async/await 关键字

接下来详细解释下里面的方法、类:

1、Playwright类

主要用于定义设备的信息,为page服务或者context服务

2、生成浏览器驱动:

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

可支持的浏览器有'chromium', 'webkit' or 'firefox'

launch函数的使用

def launch(
    self,
    *,
    executable_path: typing.Optional[typing.Union[str, pathlib.Path]] = None,
    # 传入一个浏览器可执行的文件必须绑定支持的浏览器
    channel: typing.Optional[str] = None,
    #传入浏览器的版本,有"chrome", "chrome-beta", "chrome-dev", "chrome-canary",
    # "msedge", "msedge-beta", "msedge-dev", "msedge-canary",msedge是Microsoft edge,还有其他版本可以查看官网
    args: typing.Optional[typing.List[str]] = None,
    #传递给浏览器的其他参数,以列表形式传入
    ignore_default_args: typing.Optional[
        typing.Union[bool, typing.List[str]]
    ] = None,
    # 如果为'true',Playwright不会传递自己的配置参数,而只使用来自'args'的配置参数。如果数组是
    # 给定,然后过滤掉给定的默认参数。危险选项;小心使用。默认为“False”。
    handle_sigint: typing.Optional[bool] = None,
    # 通过Ctrl+c关闭浏览器的进程,默认开启
    handle_sigterm: typing.Optional[bool] = None,
    # 收到SIGTERM信号正常关闭浏览器进程,默认开启
    handle_sighup: typing.Optional[bool] = None,
    # 收到SIGHUP信号终止浏览器进程,默认开启
    timeout: typing.Optional[float] = None,
    # 等待浏览器实例启动的最长时间(以毫秒为单位)。默认为“30000”(30秒)。传递“0”以禁用超时。
    env: typing.Optional[typing.Dict[str, typing.Union[str, float, bool]]] = None,
    # 指定浏览器可见的环境变量。默认为process. env
    headless: typing.Optional[bool] = None,
    # 是否在没有窗口下运行浏览器,默认开启,开启后你就看不到程序打开浏览器,一般传入False
    devtools: typing.Optional[bool] = None,
    # **仅Chromium**是否为每个选项卡自动打开开发人员工具面板。如果此选项为“真”,则“无头”选项将设置为“false”。
    proxy: typing.Optional[ProxySettings] = None,
    # 网络代理设置
    downloads_path: typing.Optional[typing.Union[str, pathlib.Path]] = None,
    # 如果指定,接受的下载将下载到此目录中。否则,将创建临时目录并当浏览器关闭时被删除。在任何一种情况下,下载都会在它们所在的浏览器上下文关闭时被删除。
    slow_mo: typing.Optional[float] = None,
    # 将Playwright操作减慢指定的毫秒数。这个很有用,以便您可以看到正在发生的事情。
    traces_dir: typing.Optional[typing.Union[str, pathlib.Path]] = None,
    # 如果指定,跟踪将保存到此目录中。
    chromium_sandbox: typing.Optional[bool] = None,
    # 启用Chromium沙盒。默认为False
    firefox_user_prefs: typing.Optional[
        typing.Dict[str, typing.Union[str, float, bool]]
    ] = None
    # 一些火狐偏好设置
) -> "Browser":


3、生成浏览器上下文(context)对象

浏览器上下文对象是浏览器实例中一个独立隐身会话,资源、cookie缓存这些不与其他上下文共享,对于自动化多用户、多场景测试非常有意义,相当于打开两个浏览器,两个进程,可以每个测试用例单独开一个上下文,需要注意的是,浏览器上下文最好显式的关闭,也就是

context.close()

上下文的方法,这里就简单说一下两个参数,其余不详细说了,如果有需要可以查看api

viewport : Union[{width: int, height: int}, None]
#   为每个页面设置一致的视口。默认为1280x720视口
screen : Union[{width: int, height: int}, None]
#   通过“window.screen”模拟网页内可用的一致窗口屏幕大小 ,只能在viewport设置之后使用

context常用操作

context.pages :获取context所有page对象

context.new_page():生成一个新的page对象

context.close():关闭context

context.add_cookies():将cookie添加到此浏览器上下文中。此上下文中的所有页面都将安装这些cookie。

  只能传入列表

  List[{name: str, value: str, url: Union[str, None], domain: Union[str, None], path: Union[str, None], expires: Union[float, None]

context.clear_cookies():清除context的cookie

context.grant_permissions():授予浏览器上下文的指定权限,具体见api

context.clear_permissions():清除授权

4、生成浏览器页面page

page = context.new_page()

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

首先来了解一下page的常用参数

async def new_page(
    self,
    viewport: ViewportSize = None,#为每个页面设置一致的视口。默认为1280x720视口
    screen: ViewportSize = None, # 通过“window.screen”模拟网页内可用的一致窗口屏幕大小 ,只能在viewport设置之后使用  
    noViewport: bool = None,# 不强制固定视口,允许在标题模式下调整窗口大小
    ignoreHTTPSErrors: bool = None,
    javaScriptEnabled: bool = None,
    bypassCSP: bool = None,
    userAgent: str = None, # 设置代理用于上下文
    locale: str = None, #指定用户区域,设置将影响Accept-Language'请求标头值以及数字和日期格式规则
    timezoneId: str = None,
    geolocation: Geolocation = None,
    permissions: List[str] = None,
    extraHTTPHeaders: Dict[str, str] = None,
    offline: bool = None,
    httpCredentials: HttpCredentials = None,
    deviceScaleFactor: float = None,
    isMobile: bool = None, #设备相关,不用管
    hasTouch: bool = None,
    colorScheme: ColorScheme = None, #Union["dark", "light", "no-preference", "null", None]
    #设置颜色主题
    forcedColors: ForcedColors = None, #Union["active", "none", "null", None]
    
    reducedMotion: ReducedMotion = None,
    acceptDownloads: bool = None,
    defaultBrowserType: str = None,
    proxy: ProxySettings = None,
    recordHarPath: Union[Path, str] = None,
    recordHarOmitContent: bool = None,
    recordVideoDir: Union[Path, str] = None,
    recordVideoSize: ViewportSize = None,
    storageState: Union[StorageState, str, Path] = None,
    baseURL: str = None,
    strictSelectors: bool = None,
    serviceWorkers: ServiceWorkersPolicy = None,
    recordHarUrlFilter: Union[Pattern[str], str] = None,
    recordHarMode: HarMode = None,
    recordHarContent: HarContentPolicy = None,
) -> Page:

page常用操作

page.goto(url,timeout,waitUntil,referer):打开一个新的网页

url传入一个字符串,导航到该地址

timeout 最大等待时间,传入毫秒,默认30s,为0则禁用,不等待

waitUntil:定义触发事件,当定义事件触发将被认为操作成功

  可选["commit", "domcontentloaded", "load", "networkidle", None]

  domcontentloaded:出现【文件加载中】就被认为操作成功

  load:出现【加载】事件就被认为操作成功

  networkidle:当发生【没有网络(网络空闲)】被认为操作成功,超过500ms没有网络就触发了【不建议使用】

  commit:当网络响应被接受,文件开始加载,就认为操作成功了

  referer:可以传入str或者none,引用头部,如果设置就有限用这个作为header

  page.locator():playwright的核心功能之一,元素定位器,常用的元素定位方法在后面单独拎出来讲

    元素定位的常用操作

    page.locator().click():点击元素

     page.locator().dblclick():双击元素,double click

     page.locator().fill():输入str

    click和fill操作只可以直接在页面操作

    比如

page.fill('css=[name="username"]',"017575863")
 page.fill('css=[name="password"]',"06523244")

    page.locator().count():返回匹配元素的个数

    page.locator().clear():清空input的内容

    page.locator().drag_to():把一个元素拖到另一个元素位置然后释放

    page.locator().frame_locator():使用iframe时,您可以创建一个帧定位器,该定位器将进入iframe并允许选择iframe中元素。

    示例:

locator = page.frame_locator(\"#my-iframe\").get_by_text(\"Submit\")
await locator.click()
locator = page.frame_locator(\"#my-iframe\").get_by_text(\"Submit\")
locator.click()

    page.locator().all_text_contents():返回对应元素所有文本内容,基于代码不会格式化,返回的是列表

    page.locator().all_inner_texts():返回对应元素所有文本内容,基于页面,格式化,返回列表

    page.locator().get_attribute():返回匹配元素的属性值

    page.locator().wait_for():等待元素加载,没必要,playwright会自动等待直到触发load事件。

    page.locator().filter():此方法根据选项缩小现有定位器,例如按文本过滤。它可以多次过滤。

    示例:

await row_locator.filter(has_text=\"text in column 1\").filter(
    has=page.get_by_role(\"button\", name=\"column 2 button\")
).screenshot()

page.frame():返回指定的frame,必须传入name 或者urlpage.frame_locator():定位一个frame,并可以切换进去定位元素

locator = page.frame_locator(\"#my-iframe\").get_by_text(\"Submit\")
await locator.click()

page.content():返回页面内容

page.set_default_navigation_timeout():设置超时默认时间

page.keyboard.press():键盘操作(直接在page页面),可以输入的键有以下

F1 - F12, Digit0- Digit9, KeyA- KeyZ, Backquote, Minus, Equal, Backslash, Backspace, Tab,Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp,etc.

page.screenshot():截屏

page.press(selector,key):找到元素,然后调用键盘的按下、放开某个键的操作

page.keyboard.press(\"Shift+O\")
page.press(\"body\", \"Shift+O\")

page.close():关闭页面

page.wait_for_load_state(state):当达到所需的加载状态时返回。state有["domcontentloaded", "load", "networkidle"]

当页面达到所需的加载状态时,默认为“加载”。调用此方法时导航必须是已经发送请求了。如果当前文档已经达到所需状态,则立即解析。

page.route():网络劫持,路由提供了修改页面发出的网络请求的能力。一个强大api

page = await browser.new_page()
await page.route(re.compile(r\"(\.png$)|(\.jpg$)\"), lambda route: route.abort())
await page.goto(\"https://example.com\")
await browser.close()

劫持响应结果

我们要让百度详情结果为我们的定义的页面:custom_response.html




    
    hack test


    

hack test

from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.route('**/*',lambda route: route.fulfill(path='./custom_response.html')) page.goto("https://www.baidu.com") browser.close()

page.expect_download():下载文件

示例

# 开始下载
with page.expect_download() as download_info:
    # 点击下载的按钮
    page.locator("button#delayed-download").click()
download = download_info.value
# 等待下载
print(download.path())
# 保存文件
download.save_as("/path/to/save/download/at.txt")

5、定位方法

playwright定位主要通过slector选择器定位支持文本定位、css定位、xpath定位、组合定位

文本选择器

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

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

text()查找第一个文本等于...的元素

比如:Playwright.

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三者可以两组合定位

css+text组合定位

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[@] >>css=[name="username"]',"0863")
xpath+xpath组合定位
page.fill('//div[@] >> //input[@name="password"]',"ma160065")

playwright推荐的内置定位

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属性定位元素(可以配置其他属性)。

6、事件监听

Page 对象提供了一个 on 方法,它可以用来监听页面中发生的各个事件,比如 close、console、load、request、response 等等

示例:

from playwright.sync_api import sync_playwright
def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch()
    page = browser.new_page()
    # 监听请求和响应事件
    page.on("request", lambda request: print(">>", request.method, request.url))
    page.on("response", lambda response: print("<<", response.status, response.url))
    page.goto("https://example.com")
    browser.close()
with sync_playwright() as playwright:
    run(playwright)

7、移动端浏览器支持

移动端支持Safari 浏览器、谷歌、不支持火狐,可以传入的设备有iPhone和Pixel 2 (Pixel 2 是谷歌的一款安卓手机

示例:模拟打开 iPhone 12 Pro Max 上的 Safari 浏览器,然后手动设置定位,并打开百度地图并截图

故宫的经纬度是 39.913904, 116.39014,我们可以通过 geolocation 参数传递给 Webkit 浏览器并初始化

from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    iphone_12_pro_max = p.devices['iPhone 12 Pro Max']
    browser = p.webkit.launch(headless=False)
    context = browser.new_context(
        **iphone_12_pro_max,
        locale='zh-CN',
        geolocation={'longitude': 116.39014, 'latitude': 39.913904},
        permissions=['geolocation']
    )
    page = context.new_page()
    page.goto('https://amap.com')
    page.wait_for_load_state(state='networkidle')
    page.screenshot(path='location-iphone.png')
    browser.close()


8、处理新的窗口、弹窗,iframe

selenium处理iframe比较麻烦,但是playwright就比较简单,有不同方法

第一种,直接定位一个frame,在frame基础上操作

示例

# ********同步*********
# Get frame using the frame's name attribute
frame = page.frame('frame-login')
 
# Get frame using frame's URL
frame = page.frame(url=r'.*domain.*')
 
# Interact with the frame
frame.fill('#username-input', 'John')

# *********异步***********
# Get frame using the frame's name attribute
frame = page.frame('frame-login')
 
# Get frame using frame's URL
frame = page.frame(url=r'.*domain.*')
 
# Interact with the frame
await frame.fill('#username-input', 'John')

第二种,直接定位到frame再定位到上面的元素,在元素基础上操作

示例:

username = page.frame_locator('.frame-class').locator('#username-input')
username.fill('jonas')

处理弹窗,一般注册、或者点击一些按钮容易出现弹窗,我们可以利用page.expect_popup()来获取新窗口的iframe

示例:

with page.expect_popup() as popup_info:
        # iframe中的id如果是动态的,所以我们只匹配关键字
        page.frame_locator("iframe[id^=x-URS-iframe]").locator("text=注册新帐号").click()
    register_page = popup_info.value
    # 点击邮箱地址输入框
    register_page.locator("input[id=\"username\"]").click()
    # 输入邮箱
    register_page.locator("input[id=\"username\"]").fill("TesterRoad")
    # 点击密码输入框
    register_page.locator("input[id=\"password\"]").click()
    # 输入密码
    register_page.locator("input[id=\"password\"]").fill("TesterRoad@126")

本次分享结束,更多功能和操作大家可以参考官方文档,下期将主要分享脚本录制

参考文章:

https://blog.csdn.net/m0_51156601/article/details/126886040

https://blog.csdn.net/m0_58026506/article/details/127263263

https://cuiqingcai.com/36045.html

https://www.playwright.pro/docs/api/class-playwright

扫描二维码关注阿尘blog,一起交流学习

Python-playwright:一款强大的UI自动化工具、新兴爬虫利器,592cde8761b8934554cf819be178c475.png,第2张