Python Playwright 入门指南

你有没有想过，其实电脑里的浏览器不仅仅能用来浏览网页，它还能通过程序来控制？比如说，你可以用代码让浏览器自动打开一个网页，自动填写表单、点击按钮，甚至截个图。听起来是不是很神奇？今天咱们就来聊聊一个叫做 Playwright 的神奇工具。虽然它的名字听起来像在玩游戏，但其实它是一个非常强大的浏览器自动化工具，可以用来写自动化测试、爬虫程序甚至一些日常的浏览器操作自动化任务。更棒的是，它现在也支持 Python 语言，所以咱们平时写 Python 的朋友也能轻松上手。

什么是 Playwright 呢？

简单来说，Playwright 就像是一位万能的遥控器，可以遥控 Chrome、Firefox、Safari（其实是 WebKit）这些浏览器。以前如果你想要模拟人去操作浏览器，可能得写一些复杂的代码或者借助其他工具，而 Playwright 出现后，这一切都变得简单多了。它支持的浏览器种类多，速度快，而且能很好的应对那些内容动态加载的现代网页。

比如说，你有个网站，要在网站上填写注册信息、点击提交，然后看看是不是注册成功。以前你可能需要写很多测试代码，而 Playwright 就能轻松地模拟你手动操作的每一步，还能让你截下整个过程的视频或图片。这对于写自动化测试、爬虫程序都是非常方便的。

为什么要学 Playwright？

你可能会问：“我就会写 Python，为什么还要学这个？”其实原因很简单。现在很多工作流程都需要自动化，比如说你每天都要做数据采集，或者要进行大量的 UI 测试。想象一下，如果你每次都得人工打开浏览器、填写表单，那工作量有多大？而 Playwright 就可以自动替你完成这些重复的工作，让你省下大把时间。再比如说，如果你想定期检查一个网站的新变化，写个自动化脚本比人工盯着浏览器好多了。

另外，自动化测试越来越受到企业重视，不管你是程序员还是测试工程师，掌握一个像 Playwright 这样的工具，能让你在工作中事半功倍。它不仅仅适用于大公司，许多中小型项目也能从中获益。总之，学了 Playwright，以后你就能随时随地让你的 Python 程序控制浏览器，搞定各种烦人的重复操作。

开始之前的准备工作

要开始玩转 Playwright，其实最重要的就是先把它装到你的电脑上。这里的过程其实非常简单，就像用 pip 安装其他 Python 库一样。你只需要打开命令行，输入下面这条命令就能安装 Playwright 的 Python 包：

pip install playwright

安装完了以后，还得告诉 Playwright “嘿，快去下载你需要用到的浏览器驱动吧！”这一步同样简单，在命令行里输入：

python -m playwright install

运行完这条命令，Playwright 就会自动把 Chromium、Firefox 和 WebKit 的驱动下载到你的电脑上。这个过程可能要花几分钟，耐心等待就好。

第一个小例子：打开一个网页

当你把 Playwright 装好之后，就可以开始写第一个简单的脚本了。咱们先来写个程序，让浏览器打开一个网页，停留几秒钟，然后关闭。写起来其实就和其他 Python 脚本一样，只不过多了几个跟浏览器有关的操作。

下面这个代码是最简单的例子，大家可以把它复制到一个 Python 文件中（比如叫做 test.py），然后运行看看效果：

from playwright.sync_api import sync_playwright

def run():
    # 启动 Playwright 的上下文
    with sync_playwright() as p:
        # 启动一个 Chromium 浏览器，不隐藏窗口（headless=False 表示浏览器窗口会显示出来）
        browser = p.chromium.launch(headless=False)
        # 新建一个页面
        page = browser.new_page()
        # 打开指定的网址
        page.goto("https://example.com")
        # 稍等三秒钟，让你看看打开的网页
        page.wait_for_timeout(3000)
        # 关闭浏览器
        browser.close()

if __name__ == "__main__":
    run()

看完这个代码，可能你会发现它其实就像是个简单的遥控器操作，先让浏览器动起来，然后打开一个网页，再停下来，最后关掉。这里用的是同步的方式，也就是代码是一步步执行的，对于初学者来说理解起来非常简单。等你熟悉之后，Playwright 还有异步版本的 API，那速度会更快、并发更多，但今天咱们先从同步方式开始。

玩转浏览器操作

接下来，咱们一步步来看看如何用 Playwright 模拟一些常见的浏览器操作。你会发现，跟在浏览器里自己点点鼠标、敲敲键盘相比，代码写起来其实一点也不复杂，就像在给浏览器写一封信，告诉它该做什么。

打开网页、点击按钮、输入文字

想象一下，你打开一个登录页面，需要输入用户名、密码，然后点击登录按钮。用 Playwright 来写这段操作其实就是这么几步：

1. 打开登录页面。
2. 找到用户名输入框，输入用户名。
3. 找到密码输入框，输入密码。
4. 找到登录按钮，点击它。

这四步用代码写起来就像下面这样：

from playwright.sync_api import sync_playwright

def login():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        # 打开登录页面
        page.goto("https://www.example.com/login")
        # 填写用户名和密码
        page.fill("#username", "my_username")  # 这里 #username 表示输入框的 CSS 选择器
        page.fill("#password", "my_password")
        # 点击登录按钮
        page.click("#login-button")
        # 等待页面加载
        page.wait_for_timeout(2000)
        browser.close()

if __name__ == "__main__":
    login()

你可能会注意到，这里的 #username、#password 和 #login-button 都是 CSS 选择器，意思是告诉浏览器“找到页面上 ID 分别是 username、password 和 login-button 的元素”。这其实就是告诉浏览器该去找哪个地方。用 Playwright 操作浏览器，其实就是这样简单，先找到页面元素，然后告诉它们要做什么。

截图保存页面

有时候你可能需要记录下浏览器当前的样子，比如做个测试报告，或者只是想保存个证据。Playwright 提供了截图功能，你只需要调用 page.screenshot() 方法就能轻松保存当前页面的截图。比如下面这段代码：

from playwright.sync_api import sync_playwright

def screenshot_demo():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://example.com")
        # 截图保存到当前目录下的 screenshot.png 文件中
        page.screenshot(path="screenshot.png")
        browser.close()

if __name__ == "__main__":
    screenshot_demo()

运行这段代码后，你会发现当前目录下多了一个 screenshot.png 文件，里面就是你刚刚看到的网页样子。对测试人员来说，这可是非常实用的功能哦！

处理那些动态加载的网页

现在很多网站都用了各种 AJAX 和前端框架，页面内容都是动态加载的。你如果直接打开页面，可能会发现有些内容还没显示出来。别担心，Playwright 也有办法解决这个问题。

你只需要告诉 Playwright “等一下，等到页面上某个特定的元素出现以后再继续操作”，就能保证你获取到完整的数据。比如说，你可以这样写：

from playwright.sync_api import sync_playwright

def dynamic_page():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://www.example.com/dynamic")
        # 等待页面上 id 为 dynamic-content 的元素出现，最多等待 10 秒钟
        page.wait_for_selector("#dynamic-content", timeout=10000)
        # 等待完成后再截图
        page.screenshot(path="dynamic_page.png")
        browser.close()

if __name__ == "__main__":
    dynamic_page()

这样一来，Playwright 就会一直等到你指定的元素加载出来，才会继续执行后面的代码。这样既能保证数据加载完成，又不会让程序因为等待太久而卡住。

用视频录制来记录整个操作过程

有时候，截图只能记录一瞬间，而有的视频记录可以把整个浏览器操作过程录下来，方便调试或者生成测试报告。Playwright 同样支持录制视频，只不过设置起来稍微复杂一点。你只需要在创建浏览器上下文的时候，加上一些录制参数，比如这样：

from playwright.sync_api import sync_playwright

def record_video():
    with sync_playwright() as p:
        # 设置录制视频的路径和其他选项
        context = p.chromium.launch_persistent_context(
            user_data_dir="/tmp/playwright",  # 临时用户数据目录
            headless=False,
            record_video_dir="videos"  # 视频将保存在 videos 目录中
        )
        page = context.new_page()
        page.goto("https://example.com")
        # 等待几秒钟，录制整个页面操作过程
        page.wait_for_timeout(5000)
        # 关闭浏览器，上下文会自动保存视频
        context.close()

if __name__ == "__main__":
    record_video()

录制视频有助于你在出现问题的时候回放整个操作过程，找出出错的环节。虽然录制视频会占用一些磁盘空间，但它对于调试复杂的前端问题来说真的是一大法宝。

Playwright 的定位器使用

大白话来说，定位器就好比你去超市买东西时的购物清单，你需要告诉系统你想找哪种商品。同样，在浏览器自动化中，你需要告诉 Playwright 到底要操作哪个网页元素。最常用的就是 CSS 选择器了，但有时候你也可以用文字定位，甚至用 XPath 之类的。只不过对于初学者来说，先从简单的 CSS 选择器开始最合适。

比如，你想点击一个写着“提交”的按钮，页面上可能有很多按钮，但你知道哪个按钮的文字是“提交”，这时你可以用文本定位器：

page.locator("text=提交").click()

这个语法就是告诉 Playwright：“找出所有包含‘提交’文字的按钮，然后点击它。”如果页面上有多个这样的按钮，Playwright 会选中第一个。当然，如果需要更精确的定位，你就得结合 CSS 选择器、属性选择器等多种方式，这样一来，你的自动化脚本就能做到非常精确、稳定。

对于定位器来说，掌握几种常见的写法就已经足够用了。最简单的就是根据 id 来定位，因为 id 在页面上通常都是唯一的。你只要写上 #元素id 就能定位到那个元素。比如说，一个输入框 id 是 email，那么就用 #email 来定位。以后你还会遇到根据类名、标签名、甚至是组合选择器定位元素，这些都是基础知识，慢慢用用就熟练了。

进阶用法和常见问题

当你对基本操作熟悉以后，就可以尝试一些进阶的用法了。比如说，有时候你需要在多个页面之间跳转，有时候需要模拟复杂的用户操作（比如拖拽、鼠标悬停等），还有就是如何管理那些因为动态内容加载而频繁出现的问题。

多页面和多标签页操作

在真实的浏览器操作中，用户常常会打开多个标签页，而在自动化中，有时候你也需要同时控制多个页面。Playwright 支持这种操作，你只需要新建多个页面对象，然后在它们之间切换就行了。比如说，你先打开一个页面，点击一个链接，这个链接会在新标签页中打开，然后你想控制新页面进行一些操作，就可以这样写：

from playwright.sync_api import sync_playwright

def multi_page():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page1 = browser.new_page()
        page1.goto("https://www.example.com")
        # 点击链接，会打开新标签页
        with page1.expect_popup() as popup_info:
            page1.click("a[target='_blank']")
        page2 = popup_info.value
        # 在新标签页中做操作，比如截图
        page2.screenshot(path="new_tab.png")
        browser.close()

if __name__ == "__main__":
    multi_page()

这里我们用到了 expect_popup() 方法，它可以让 Playwright 期待新标签页的弹出，然后把这个新页面保存下来。这样你就能在新页面上继续各种操作，而不会弄混。

模拟复杂用户操作

很多时候，简单的点击和输入已经不够用，实际业务场景中可能需要模拟鼠标悬停、右键点击、拖拽等复杂操作。Playwright 也能应付得来。以拖拽操作为例，你只需要指定起点和终点的位置，就能模拟出鼠标拖拽的效果。比如说：

from playwright.sync_api import sync_playwright

def drag_and_drop():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://www.example.com/drag_and_drop")
        # 假设有两个元素，一个 id 为 source，一个 id 为 target
        source = page.locator("#source")
        target = page.locator("#target")
        # 拖拽操作：把 source 拖拽到 target 上面
        source.drag_to(target)
        page.wait_for_timeout(2000)
        browser.close()

if __name__ == "__main__":
    drag_and_drop()

这种模拟操作对于测试前端交互非常有帮助。只要你理解了每一步的含义，用 Playwright 模拟各种操作其实就像在画画，每一步都在“告诉”浏览器该怎么做。

处理网络请求和响应

有时候你可能不仅仅想要操作页面，还想了解页面背后发生的网络请求。Playwright 可以让你捕捉到网络请求，甚至修改请求和响应数据。比如说，你可以拦截某个请求，然后返回自定义的数据，这对于做测试 Mock 非常有用。下面这个例子演示了如何拦截网络请求并打印出来：

from playwright.sync_api import sync_playwright

def intercept_requests():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        
        # 给页面注册一个请求拦截器，每次请求都会调用下面这个函数
        def handle_route(route, request):
            print("拦截到请求：", request.url)
            # 直接让请求继续，不修改数据
            route.continue_()
        
        page.route("**/*", handle_route)
        page.goto("https://www.example.com")
        page.wait_for_timeout(5000)
        browser.close()

if __name__ == "__main__":
    intercept_requests()

这段代码中的 page.route("**/*", handle_route) 表示拦截所有请求，然后调用 handle_route 函数。你可以在里面做各种操作，比如记录请求信息、修改请求参数甚至模拟返回数据。这样一来，对于测试 API 接口、前后端联调等场景就能更加灵活。

常见问题与调试技巧

初学者在使用 Playwright 的过程中，可能会遇到一些常见问题。比如说，元素找不到、页面加载慢、甚至是自动化操作和预期的不一致。这时候，调试技巧就显得非常重要了。

首先，你可以打开浏览器窗口（即 headless 设置为 False），这样你能直观地看到浏览器在做什么。如果遇到元素找不到的问题，建议使用浏览器的开发者工具，检查页面中元素的 id 或 class 是否和代码中使用的一致。有时候页面是动态加载的，你可以在代码中加入适当的等待时间，或者用 wait_for_selector() 来确保元素已经出现。

其次，如果你发现某个操作没有按预期执行，可以在代码中加入一些打印语句或者截图，帮助你判断问题出在哪里。比如在每一步操作后，都调用一次 page.screenshot() 保存当前页面，这样你就能通过截图一步步排查问题。

再者，Playwright 本身提供了详细的错误日志信息，当你的代码出错时，错误信息往往会提示你是哪个环节出了问题。遇到这种情况，不妨仔细阅读错误提示，有时候问题就在一字之差或者选择器写错了。

最后，多参考 Playwright 的官方文档也是非常有用的。虽然文档中有很多专业术语，但只要结合代码示例来阅读，其实理解起来并不难。而且，官方文档经常会更新最新的用法，保持关注能让你及时掌握新功能。

综合实战：制作一个简单的爬虫

学会了这些基本操作后，我们可以尝试做一个简单的爬虫。假设你想定期抓取某个新闻网站的头条新闻，然后保存下来做进一步处理。使用 Playwright 来写这样一个爬虫，其实就是让浏览器自动打开网站、找到新闻标题、把它们保存到文件中。整个流程其实非常直观，就像你平时手动复制粘贴新闻标题一样，只不过全部交给代码去做。

下面是一段简单的示例代码：

from playwright.sync_api import sync_playwright

def crawl_news():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        # 打开新闻网站的主页
        page.goto("https://news.example.com")
        # 等待页面上新闻列表加载完毕
        page.wait_for_selector(".news-item")
        # 获取所有新闻标题（假设新闻标题在 class 为 news-title 的元素里）
        titles = page.locator(".news-title").all_text_contents()
        # 把标题保存到文件中
        with open("news_titles.txt", "w", encoding="utf-8") as f:
            for title in titles:
                f.write(title.strip() + "\n")
        print("抓取的新闻标题保存成功！")
        browser.close()

if __name__ == "__main__":
    crawl_news()

在这段代码中，我们先让浏览器后台运行（headless 模式），这样不会弹出浏览器窗口，然后打开新闻网站，等待新闻标题加载完毕，再获取所有新闻标题的文字内容。最后，把这些标题一行一行地写入到一个文本文件中。整个过程就像你用肉眼浏览网页、复制文字一样，但用代码做起来效率要高得多。

未来的学习方向

学会了基本的 Playwright 用法后，你其实已经掌握了一项非常有用的技能。不过，自动化这块内容其实非常广泛，未来你还可以探索更多内容。比如说，使用 Playwright 的异步 API，可以让你同时控制多个浏览器操作，提高效率；又比如说，结合其他 Python 库，比如 Pandas 来处理爬取的数据，或者用 Flask 做一个简单的后台服务，把自动化任务结合起来，形成一个完整的应用系统。

再比如说，你可以研究如何把 Playwright 脚本和持续集成工具（如 GitHub Actions、Jenkins 等）结合起来，这样每次代码提交后自动运行测试脚本，确保你的网页应用始终保持稳定。自动化测试是目前软件开发中非常重要的一环，很多大公司都会花大量时间和资源在这上面，而你掌握了 Playwright，无疑就为自己增加了一项很实用的技能。

小结

回顾一下今天的内容，其实整个 Playwright 的学习过程并不复杂。从最基础的安装、打开网页，到模拟点击、输入、截图，再到处理动态内容、拦截网络请求，整个过程就像是一步步在给浏览器下指令。你只需要按照代码的逻辑，一步步告诉浏览器该做什么，就能轻松实现自动化操作。用大白话来说，Playwright 就像是给浏览器写了一个“剧本”，然后让浏览器按照这个剧本去演戏，而你就是导演。

只要你熟练掌握了这些操作，以后无论是做测试、爬虫还是其他自动化任务，都能得心应手。希望这篇文章能让你对 Playwright 有一个全面的了解，也希望你能在实践中不断探索，发现更多有趣的用法。

学习编程其实就像学一门语言，起初可能觉得生疏，但只要多实践、多动手，慢慢地你就会发现其实一切都变得很简单。每次写代码的时候，把自己当成一个导演，让电脑按照你的剧本演出，这种感觉其实非常有趣。记住，最重要的不是写出多复杂的代码，而是能让代码真正解决你的问题，帮你提高工作效率。

总的来说，Playwright 是一个非常灵活且强大的工具，它能让你用 Python 代码模拟各种复杂的浏览器操作，而这一切都是为了让你的工作变得更简单。无论你是做测试、爬虫，还是想实现一些自动化的小工具，Playwright 都能满足你的需求。而且它的文档和社区都非常活跃，你遇到问题时总能找到解决办法。

最后，给大家提个小建议：在学习过程中，多尝试、多调试，遇到问题不要急着放弃。把每个小问题都当作一次学习的机会，一步步深入，你会发现自己掌握的东西越来越多。希望大家都能在自动化这条路上越走越远，把那些重复、繁琐的操作统统交给代码去处理，让自己腾出更多时间来做真正有创意、有挑战性的事情。