前言

playwright是微软设计的一款工具，可以爬取网页，还可以自动化测试自己编写的网站，而且不像bs4、request编写爬虫那么复杂，也不需要考虑反爬技术，只需要知道最基础的前端知识，就可以高效、便捷的编写爬虫代码

但是这篇文章不可能将playwright的所有功能全部讲到，但是覆盖了最基础的一些知识，如果想更系统的学习，可以参考playwright python的官方文档：https://playwright.dev/python/docs/intro

也非常推荐白月黑羽的教程：Playwright web自动化 - Python版_哔哩哔哩_bilibili

安装步骤

pip install pytest-playwright
playwright install

简单demo

使用下面命令可以开启录制

playwright codegen

右边窗口会自动根据左边浏览器做的操作进行记录，下面是自动生成的代码模板，定义了同步操作（不是异步）的playwright类，并输入到run函数中，browser这句代码开辟新的进程，打开了playwright自带的浏览器chromium，这个可以自己改为其他的浏览器（参考官网），headless为False时，执行过程会打开浏览器，否则将不会显示。

from playwright.sync_api import Playwright, sync_plawright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

在左边浏览器键入www.baidu.com，右边代码就新增了代码，表示跳转到了这个界面

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

然后点击输入框，并输入nihao，就会新增下面这些代码，其中locator是定位器，page.locator("#kw") 定位到的是输入的文本框，即定位到网页中的一个部件，后面的click、fill、press分别表示点击、填充、输入回车等操作，对部件的操作见Actions | Playwright Python

page.locator("#kw").click()
page.locator("#kw").fill("nihao")
page.locator("#kw").press("Enter")

这样一来就可以自动设计代码啦，同时还可以使用tracing模块来记录执行的过程

context = browser.new_context()
context.tracing.start(snapshots=True, sources=True, screenshots=True)
...
context.tracing.stop(path="trace.zip")

然后在终端执行就可以显示整个的过程，左边为playwright的各种操作，右边有Action，Before和After显示每一步的动作、先前状态和执行过后的状态

playwright show-trace trace.zip

这样一个简单的demo，打开baidu网站，查询nihao，就实现啦

from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    context.tracing.start(snapshots=True, sources=True, screenshots=True)
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.locator("#kw").click()
    page.locator("#kw").fill("nihao")
    page.locator("#kw").press("Enter")
    context.tracing.stop(path="trace.zip")
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

任务描述和预备知识

我将通过一个实际应用来说明如何使用playwright，获取到leetcode上每一个题目的url网址。

进入leetcode官网，点击题库

然后跳到第二页

发现网页为：https://leetcode.cn/problemset/?page=2，其中?右边为参数，表示在第几页，没有page参数时默认第1页，我们发现每一页都有50个题目（除了第一页有51个题目，需要特殊处理）

点击F12打开开发者模式，右边选择“元素”菜单

点击下面的图表，然后在左侧点击控件，可以查看到第52题这块对应的源码，右边源码中有属性href=“/problems/n-queens-ii”，这就是我们想要获取的信息，但是这个网页不完整，点击这个网站后，可以看到网页变为了https://leetcode.cn/problems/n-queens-ii/description，所以还需要加上前缀：“https://leetcode.cn” 和后缀 ”/description“

我们的目标是获取到每一个题目的href信息，并保存在一个txt文件当中

选择器定位

前面使用到了page.locator方法，里面的参数就是我们去定位组件的标准，我们不能完全依靠codegen这一个方法自动化完成代码，如果需要输出一些信息，就不能指望它了，所以这一节将介绍如何定位元素以及元素的一些操作

我们首先在模板中填写下面的代码，暂时不处理最后一页的题目，遍历第1页到第72页的题目，然后goto到该网站，并等待5s，之所以等待5s是因为需要等网页加载完毕后，才能提取到相关的信息，否则会加载错误

for page_index in trange(1, 73):
    page.goto(f"https://leetcode.cn/problemset/?page={page_index}")
    page.wait_for_timeout(5000)

接下来就是定位了，例如某一个分块有class属性，如下所示，则locator里面可以写为page.locator(".truncate") ，这里的"."表示匹配的class元素

<div class='truncate'>
    nihao
</div>

然后可以调用.inner_text()可以打印这一个locator的文本信息

lc = page.locator(".truncate")
print(lc.inner_text())	# 输出nihao

然而一个html网页中可能有多个块的class包含truncate，那么 page.locator(".truncate") 就会定位到所有的块，这时候就需要使用.all()方法，将所有定位到的locator转变为list对象，然后我们遍历list，再打印文本信息

lcs = page.locator(".truncate").all()
for lc in lcs:
    print(lc.inner_text())

注意，如果locator定位到的元素个数大于1，则不能执行fill、click、inner_text等操作，需要使用all()将其转换为列表，下面是locator的一些方法和用法

locator(".truncate").count()		# 匹配元素的个数
locator(".truncate").first			# 第一个元素
locator(".truncate").last			# 最后一个元素
locator(".truncate").nth(3)			# 第三个元素

除了使用class定位，还可以使用id定位，一般而言html中的id是唯一的，例如下面的代码可以使用 page.locator("#animal") 来定位，"#"表示id

<div id='animal'>
    nihao
</div>

如果一个块中有多个class类别，例如下面的例子，使用 page.locator(".animal.plant") 定位，注意中间不能有空格

<div class='animal plant'>
    nihao
</div>

还可以直接使用page.locator(“div”)来定位这个div块，如果不是上述情况，而是其他的属性名，则可以用方括号来指示，例如下面的例子可以用 page.locator("[role=region]") 定位

<div role='region'>
    nihao
</div>

还可以是模糊匹配，包含 *=， ^=， *=等方式

[href*=www] -> href属性包含www的元素
[href^=www] -> href属性以www开头的元素
[href$=www] -> href属性以www结尾的元素

我们还可以通过多级选择器来选择，在下面的例子中，想定位nihao，可以使用 page.locator(".a > .b)" 定位，“>” 表示直接子节点，如果想定位oahin，还可以使用子孙节点的定位方式，使用空格来隔开 page.locator(".a .d") ，这样就跳过了中间节点".c"

<div class='a'>
	<div class='b'>
		nihao
    </div>
	<div class='c'>
        <div class='d'>
            oahin
        </div>
    </div>
</div>

实际定位

弄清楚如何定位后，接下来，我们要获取每一页中的所有题目的信息，找到某一个题目的信息，代码如下

可以使用下面的代码定位，但是如何确定是否准确定位到呢，一个方法就是执行一遍代码，打印出来定位到的块，查看是否符合预期，但是这样太麻烦了，浏览器中可以帮助我们查看

lcs = page.locator(".truncate .h-5")

在右上方（下方是另一个界面了）输入Ctrl + F开启搜索功能，输入.truncate .h-5，看到我们找到了50个元素，刚好对应一页中题目的个数

我们可以通过下面的代码获取到第i个元素的url地址，使用到了get_attribute方法获取某一个属性的值

lcs = page.locator(".truncate .h-5")
lcs.nth(i).get_attribute("href")

然后我们可以将url补充完整，特殊处理一下第一页51道题目的情况，将题目索引以及url保存在urls.txt文件当中，编写完成下面的脚本

from playwright.sync_api import Playwright, sync_playwright
from tqdm import trange

def run(playwright: Playwright) -> None:
    with open('urls.txt', 'w') as f:
        browser = playwright.chromium.launch(headless=True)
        context = browser.new_context()
        page = context.new_page()
        cnt = 1
        for page_index in trange(1, 73):
            page.goto(f"https://leetcode.cn/problemset/?page={page_index}")
            page.wait_for_timeout(5000)
            lcs = page.locator(".truncate .h-5")
            for problem_index in range(50):     # 第一页的题目索引要加一
                problem_page = f'https://leetcode.cn{lcs.nth(problem_index + int(page_index == 1)).get_attribute("href")}/description'
                f.write(str(cnt) + ' ' + problem_page + '\n')
                cnt += 1
                f.flush()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    # 获取系统参数
    run(playwright)

最终获取了信息啦！

如果对您有帮助，请不要吝啬您的赞呀，你们的鼓励是我最大的动力！

补充样例

下面的例子是打开有道翻译，输入英文，返回翻译后的信息代码，如果您感兴趣，可以看看哦，使用到的方法都差不多~

from playwright.sync_api import Playwright, sync_playwright, expect
import re

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=True)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://fanyi.youdao.com/#/") 
    page.locator(".close").click()
    page.locator("div").filter(has_text=re.compile(r"^翻译$")).click()
    page.locator(".ic_language_arrowdown").first.click()
    page.get_by_text("英语").first.click()
    page.wait_for_timeout(1000)
    while True:
        word = input("=" * 100 + "\n>>> ")
        page.locator("#js_fanyi_input").click()
        page.locator("#js_fanyi_input").fill(word)
        page.wait_for_timeout(1000)
        if page.locator(".pron").count():   # 单个单词，打印音标以及所有意思
            for text in page.locator(".pron").all_inner_texts():
                split = text.split()
                if not split:
                    continue
                else:
                    print(f"{split[0]}: /{split[1]}/")
            print(page.locator(".paraphrase-container").first.inner_text())
        else:   # 句子，直接显示翻译
            print(page.locator(".tgt.un-step-trans").inner_text())

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

执行效果