Playwright 自动化点击验证码教程
在自动化测试中，Playwright 是一个流行的浏览器自动化工具，支持多种浏览器的高效操作。验证码（如图片验证码、滑动验证码等）是网页中常见的反自动化机制，常常需要特别处理。我们将介绍如何使用 Playwright 自动化点击验证码，并提供几种常见验证码的处理方案。
官方文档链接：
一、Playwright 环境搭建
1.1 安装 Playwright
首先，需要在项目中安装 Playwright。你可以使用以下命令安装：
bash
pip install playwright
# 初始化 Playwright
playwright install1.2 启动 Playwright 脚本
Playwright 支持 Python、Node.js 等多种语言。以下是 Python 的一个基础示例，展示如何启动浏览器并访问网页：
python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False) # 启动浏览器，headless=False 表示显示浏览器窗口
page = browser.new_page()
page.goto("https://example.com") # 打开目标网页
browser.close()解释：
- 使用
playwright.sync_api提供同步的 API。 launch()启动浏览器，headless=False用于可见浏览器窗口。goto()导航到指定的网页。
二、自动化点击验证码
验证码有多种形式，如单击图片验证码、滑动验证码等。在 Playwright 中，处理这些验证码需要一些额外的步骤。
2.1 单击图片验证码
对于要求点击特定图片的验证码，我们可以通过 Playwright 查找图片按钮并模拟点击操作。
python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# 打开目标网页
page.goto("https://example.com")
# 等待验证码图片出现，点击验证码图片
page.wait_for_selector("#captcha_image") # 确保验证码图片加载完成
page.click("#captcha_image") # 假设验证码图片的选择器为 #captcha_image
# 等待几秒，方便观察点击效果
page.wait_for_timeout(3000)
browser.close()解释：
wait_for_selector()确保验证码图片元素加载完成。click()方法可以模拟鼠标点击操作。
2.2 滑动验证码
滑动验证码要求用户拖动滑块到特定位置。我们可以使用 Playwright 的 drag_and_drop() 方法来模拟滑动行为。
python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# 打开目标网页
page.goto("https://example.com")
# 等待滑动验证码的出现
page.wait_for_selector("#slider") # 确保滑块加载完成
# 获取滑块的元素
slider = page.query_selector("#slider")
# 执行滑动操作，模拟用户拖动滑块
slider.bounding_box() # 获取滑块的位置和大小
page.mouse.move(slider.bounding_box()["x"], slider.bounding_box()["y"])
page.mouse.down()
page.mouse.move(slider.bounding_box()["x"] + 300, slider.bounding_box()["y"], steps=10)
page.mouse.up()
# 等待几秒观察滑动结果
page.wait_for_timeout(3000)
browser.close()解释：
bounding_box()获取滑块的位置与大小，用于确定滑动的起点。mouse.down()模拟按下鼠标，mouse.move()模拟滑动，mouse.up()模拟释放鼠标。
三、处理验证码的常见挑战
3.1 验证码绕过
验证码本质上是为了防止自动化操作，因此绕过验证码可能需要更复杂的策略。常见的解决办法包括：
- 使用验证码识别服务 ：通过 OCR（如
ddddocr）来识别验证码内容。 - 滑块验证码破解：通过分析滑动轨迹、AI 模型进行模拟破解。
- 手动输入验证码：如果验证码较复杂且识别困难，某些情况下可能需要人工干预，或通过 API 提交验证码。
3.2 使用 OCR 库识别验证码
可以使用 ddddocr 来识别验证码图像并自动填写表单。结合 Playwright 和 ddddocr，你可以自动处理验证码。
python
import ddddocr
from playwright.sync_api import sync_playwright
ocr = ddddocr.DdddOcr()
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# 打开目标网页
page.goto("https://example.com")
# 截图验证码
page.wait_for_selector("#captcha_image")
page.screenshot(path="captcha.png", selector="#captcha_image") # 截图保存为 captcha.png
# 使用 ddddocr 识别验证码
with open('captcha.png', 'rb') as f:
img_bytes = f.read()
result = ocr.classification(img_bytes)
print(f"识别的验证码为: {result}")
# 填写验证码
page.fill("#captcha_input", result) # 假设输入框的 ID 为 captcha_input
# 点击提交按钮
page.click("#submit_button") # 假设提交按钮的选择器为 #submit_button
page.wait_for_timeout(3000)
browser.close()解释：
- 截图验证码并将其保存为
captcha.png。 - 使用
ddddocr来识别验证码的文本。 - 自动填写验证码到输入框中并提交表单。
我们将继续扩展之前的教程，增加针对坐标点击验证码 的处理。坐标点击验证码通常会要求用户在验证码图片中的特定位置点击，比如点击指定的文字、图形或区域。通过 Playwright，我们可以获取验证码图片的坐标和尺寸，然后通过 mouse.click() 方法来模拟点击指定的坐标位置。
四、处理坐标点击验证码
为了处理坐标点击验证码，我们需要：
- 获取验证码图像的尺寸和位置。
- 确定要点击的坐标（可以是通过OCR识别或者根据其他规则判断）。
- 使用
Playwright的鼠标点击功能，模拟点击验证码图像中的指定位置。
4.1 获取验证码的坐标和尺寸
通过 Playwright 的 bounding_box() 方法，可以获取验证码图片在页面中的位置和大小，返回值包含 x、y、width、height 等信息。
4.2 代码实现：坐标点击验证码
以下代码扩展了前面的示例，展示如何在识别验证码后点击指定的坐标：
python
import ddddocr
from playwright.sync_api import sync_playwright
ocr = ddddocr.DdddOcr()
def get_click_coordinates(result, bounding_box):
"""
根据识别结果和验证码的 bounding_box 确定点击的坐标。
假设识别出的字符对应的点击区域是已知的。
"""
# 这里可以根据识别结果手动设定点击坐标，假设 result 是 "ABC"，点击 "A"
# 我们假设字符 "A" 需要点击在图像的 1/4 位置，"B" 是 2/4，"C" 是 3/4
# 此处根据实际场景和验证码需求来调整
if result == "A":
x = bounding_box['x'] + bounding_box['width'] * 0.25
y = bounding_box['y'] + bounding_box['height'] * 0.5
elif result == "B":
x = bounding_box['x'] + bounding_box['width'] * 0.5
y = bounding_box['y'] + bounding_box['height'] * 0.5
elif result == "C":
x = bounding_box['x'] + bounding_box['width'] * 0.75
y = bounding_box['y'] + bounding_box['height'] * 0.5
else:
x = bounding_box['x'] + bounding_box['width'] * 0.5 # 默认点击中心
y = bounding_box['y'] + bounding_box['height'] * 0.5
return x, y
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# 打开网页
page.goto("https://example.com")
# 等待验证码图片加载
page.wait_for_selector("#captcha_image")
# 获取验证码的 bounding box 信息 (位置和尺寸)
captcha_box = page.locator("#captcha_image").bounding_box()
# 截图验证码并保存
page.screenshot(path="captcha.png", selector="#captcha_image")
# 使用 ddddocr 识别验证码
with open('captcha.png', 'rb') as f:
img_bytes = f.read()
result = ocr.classification(img_bytes)
print(f"识别结果: {result}")
# 获取需要点击的坐标
x, y = get_click_coordinates(result, captcha_box)
print(f"将要点击的坐标: ({x}, {y})")
# 模拟点击验证码图像的指定坐标
page.mouse.click(x, y)
# 等待几秒，观察操作
page.wait_for_timeout(5000)
browser.close()4.3 代码解读
-
获取验证码的坐标信息：
- 我们通过
page.locator("#captcha_image").bounding_box()获取验证码图片的bounding_box，包含x、y、width、height信息。 x和y是验证码图像在页面中的起始坐标，width和height是图像的宽度和高度。
- 我们通过
-
确定点击的坐标：
get_click_coordinates(result, bounding_box)函数根据 OCR 识别出的结果（假设识别结果是 "A", "B", "C" 等字符）来决定点击的精确坐标。- 我们假设每个字符对应验证码图像中的不同区域，通过计算
bounding_box来定位这些区域。例如，如果识别的结果是 "A"，我们点击图像的左边1/4的位置。
-
模拟点击：
- 使用
page.mouse.click(x, y)来模拟点击指定的坐标位置。
- 使用
五、总结
在这个扩展的教程中，我们学习了如何使用 Playwright 来自动化处理坐标点击验证码 。我们首先通过 Playwright 获取验证码图像的坐标和尺寸信息，然后根据识别结果计算需要点击的精确位置，最后通过 mouse.click() 模拟点击验证码图像中的特定坐标。
关键步骤：
- 获取验证码的
bounding_box：用于确定图像在页面中的位置和尺寸。 - 识别验证码内容 ：通过
ddddocr对验证码进行 OCR 识别。 - 计算点击坐标 ：根据
bounding_box和识别结果计算具体的点击坐标。 - 模拟点击操作 ：使用
Playwright的mouse.click()实现点击。
这个解决方案可以适应大部分要求点击坐标的验证码场景，进一步增强了自动化脚本在复杂验证码中的能力。如果验证码类型更加复杂，可以引入更多的预处理或自定义坐标计算逻辑。