Playwright: 比 Puppeteer 更好用的浏览器自动化工具

在 Playwright 之前，我一般会使用 Selenium 或者 Puppeteer 来进行浏览器自动化操作。然而，Selenium 经常会有一些奇怪的 bug, Puppeteer 则是没有官方 Python 版，非官方版本也只有 async 版本，并且也是有一些奇怪的 bug. 另外，众所周知，Python 的 Async API 并不是那么好使。

Playwright 是微软出品的浏览器自动化工具，代码质量应该是有足够保证的。而且它还官方支持同步版的 Python API, 同时支持三大浏览器，所以赶紧切换过来了。

特别注意 Playwright 的拼写，别把中间的 "w" 丢了。

安装

pip install playwright==1.8.0a1  # 很奇怪，必须指定版本，不指定会安装到一个古老的版本
python -m playwright install  # 安装浏览器，此处国内网络可能会有问题（你懂的），请自行解决

基本使用

Playwright 支持 Firefox / Chrome / WebKit(Safari). 其中 webkit 最轻量了，所以没有什么特殊需求最好使用 webkit, 不要使用 chromium.

from playwright.sync_api import sync_playwright as playwright

with playwright() as pw:
    webkit = pw.webkit.launch(headless=False)
    context = webkit.new_context()  # 需要创建一个 context
    page = context.new_page()  # 创建一个新的页面
    page.goto("https://www.apple.com")
    print(page.content())
    webkit.close()

Playwright 官方推荐使用 with 语句来访问，不过如果你不喜欢的话，也可以用 pw.start() 和 pw.stop().

新概念：Context

和 Puppeteer 不同的是，Playwright 新增了 context 的概念，每个 context 就像是一个独立的匿名模式会话，非常轻量，但是又完全隔离。比如说，可以在两个 context 中登录两个不同的账号，也可以在两个 context 中使用不同的代理。

通过 context 还可以设置 viewport, user_agent 等。

context = browser.new_context(
  user_agent='My user agent'
)
context = browser.new_context(
  viewport={ 'width': 1280, 'height': 1024 }
)
context = browser.new_context(
    http_credentials={"username": "bill", "password": "pa55w0rd"}
)

# new_context 其他几个比较有用的选项：
ignore_https_errors=False
proxy={"server": "http://example.com:3128", "bypass": ".example.com", "username": "", "password": ""}
extra_http_headers={"X-Header": ""}

context 中有一个很有用的函数 context.add_init_script , 可以让我们设定在调用 context.new_page 的时候在页面中执行的脚本。

# hook 新建页面中的 Math.random 函数，总是返回 42
context.add_init_script(script="Math.random = () => 42;")
# 或者写在一个文件里
context.add_init_script(path="preload.js")

还可以使用 context.expose_binding 和 context.expose_function 来把 Python 函数暴露到页面中，不过个人感觉还是使用 add_init_script 暴露 JS 函数方便一些。

和 Puppeteer 一样，Playwright 的核心概念依然是 page, 核心 API 几乎都是 page 对象的方法。可以通过 context 来创建 page.

页面基本操作

按照官网文档，调用 page.goto(url) 后页面加载过程：

1. 设定 url

2. 通过网络加载解析页面

3. 触发 page.on("domcontentloaded") 事件

4. 执行页面的 js 脚本，加载静态资源

5. 触发 page.on("laod") 事件

6. 页面执行动态加载的脚本

7. 当 500ms 都没有新的网络请求的时候，触发 networkidle 事件

page.goto(url) 会跳转到一个新的链接。默认情况下 Playwright 会等待到 load 状态。如果我们不关心加载的 CSS 图片等信息，可以改为等待到 domcontentloaded 状态，如果页面是 ajax 加载，那么我们需要等待到 networkidle 状态。如果 networkidle 也不合适的话，可以采用 page.wait_for_selector 等待某个元素出现。不过对于 click 等操作会自动等待。

page.goto(url, referer="", timeout=30, wait_until="domcontentloaded|load|networkidle")

Playwright 会自动等待元素处于可操作的稳定状态。当然也可以用 page.wait_for_* 函数来手工等待：

page.wait_for_event("event", event_predict, timeout)
page.wait_for_function(js_function)
page.wait_for_load_state(state="domcontentloaded|load|networkidle", timeout)
page.wait_for_selector(selector, timeout)
page.wait_for_timeout(timeout)  # 不推荐使用

对页面的操作方法主要有：

# selector 指的是 CSS 等表达式
page.click(selector)
page.fill(selector, value)  # 在 input 中填充值

# 例子
page.click("#search")

获取页面中的数据的主要方法有：

page.url  # url
page.title()  # title
page.content()  # 获取页面全文
page.inner_text(selector)  # element.inner_text()
page.inner_html(selector)
page.text_content(selector)
page.get_attribute(selector, attr)

# eval_on_selector 用于获取 DOM 中的值
page.eval_on_selector(selector, js_expression)
# 比如：
search_value = page.eval_on_selector("#search", "el => el.value")

# evaluate 用于获取页面中 JS 中的数据，比如说可以读取 window 中的值
result = page.evaluate("([x, y]) => Promise.resolve(x * y)", [7, 8])
print(result) # prints "56"

选择器表达式

在上面的代码中，我们使用了 CSS 表达式（比如 #button ）来选取元素。实际上，Playwright 还支持 XPath 和自己定义的两种简单表达式，并且是自动识别的。

# 通过文本选择元素，这是 Playwright 自定义的一种表达式
page.click("text=login")

# 直接通过 id 选择
page.click("id=login")

# 通过 CSS 选择元素
page.click("#search")
# 除了常用的 CSS 表达式外，Playwright 还支持了几个新的伪类
# :has 表示包含某个元素的元素
page.click("article:has(div.prome)")
# :is 用来对自身做断言
page.click("button:is(:text('sign in'), :text('log in'))")
# :text 表示包含某个文本的元素
page.click("button:text('Sign in')")  # 包含
page.click("button:text-is('Sign is')")  # 严格匹配
page.click("button:text-matches('\w+')")  # 正则
# 还可以根据方位匹配
page.click("button:right-of(#search)")  # 右边
page.click("button:left-of(#search)")  # 左边
page.click("button:above(#search)")  # 上边
page.click("button:below(#search)")  # 下边
page.click("button:near(#search)")  # 50px 之内的元素

# 通过 XPath 选择
page.click("//button[@id='search'])")
# 所有 // 或者 .. 开头的表达式都会默认为 XPath 表达式

对于 CSS 表达式，还可以添加前缀 css= 来显式指定，比如说 css=.login 就相当于 .login .

除了上面介绍的四种表达式以外，Playwright 还支持使用 >> 组合表达式，也就是混合使用四种表达式。

page.click('css=nav >> text=Login')

复用 Cookies 等认证信息

在 Puppeteer 中，复用 Cookies 也是一个老大难问题了。这个是 Playwright 特别方便的一点，他可以直接导出 Cookies 和 LocalStorage, 然后在新的 Context 中使用。

# 保存状态
import json
storage = context.storage_state()
with open("state.json", "w") as f:
    f.write(json.dumps(storage))

# 加载状态
with open("state.json") as f:
    storage_state = json.loads(f.read())
context = browser.new_context(storage_state=storage_state)

监听事件

通过 page.on(event, fn) 可以来注册对应事件的处理函数：

def log_request(intercepted_request):
    print("a request was made:", intercepted_request.url)
page.on("request", log_request)
# sometime later...
page.remove_listener("request", log_request)

其中比较重要的就是 request 和 response 两个事件

拦截更改网络请求

可以通过 page.on("request") 和 page.on("response") 来监听请求和响应事件。

from playwright.sync_api import sync_playwright as playwright

def run(pw):
    browser = pw.webkit.launch()
    page = browser.new_page()
# Subscribe to "request" and "response" events.
    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 playwright() as pw:
    run(pw)

其中 request 和 response 的属性和方法，可以查阅文档：https://playwright.dev/python/docs/api/class-request

通过 context.route, 还可以伪造修改拦截请求等。比如说，拦截所有的图片请求以减少带宽占用：

context = browser.new_context()
page = context.new_page()
# route 的参数默认是通配符，也可以传递编译好的正则表达式对象
context.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())
context.route(re.compile(r"(\.png$)|(\.jpg$)"), lambda route: route.abort())
page.goto("https://example.com")
browser.close()

其中 route 对象的相关属性和方法，可以查阅文档：https://playwright.dev/python/docs/api/class-route

灵活设置代理

Playwright 还可以很方便地设置代理。Puppeteer 在打开浏览器之后就无法在更改代理了，对于爬虫类应用非常不友好，而 Playwright 可以通过 Context 设置代理，这样就非常轻量，不用为了切换代理而重启浏览器。

context = browser.new_context(
    proxy={"server": "http://example.com:3128", "bypass": ".example.com", "username": "", "password": ""}
)

杀手级功能：录制操作直接生成代码

Playwright 的命令行还内置了一个有趣的功能：可以通过录制你的点击操作，直接生成 Python 代码。

python -m playwright codegen http://example.com/

Playwright 还有很多命令行功能，比如生成截图等等，可以通过 python -m playwright -h 查看。

其他

除此之外，Playwright 还支持处理页面弹出的窗口，模拟键盘，模拟鼠标拖动（用于滑动验证码），下载文件等等各种功能，请查看官方文档吧，这里不赘述了。对于写爬虫来说，Playwright 的几个特性可以说是秒杀 Puppeteer/Pyppeteer:

1. 官方同步版本的 API

2. 方便导入导出 Cookies

3. 轻量级设置和切换代理

4. 支持丰富的选择表达式

快点用起来吧！

参考

1. https://playwright.dev/python/docs/core-concepts