第一章：自动化工具概览——Selenium、Playwright、Puppeteer对比，以及AI视觉识别的引入价值
各位同学，欢迎来到《浏览器自动化与AI视觉识别实战》的第一课。
说实话，每次开新班，总有人问我同一个问题：「老师，这么多自动化工具，我到底该学哪个？」
嗯，这个问题问得好。我当年刚入行时也纠结过。那时候Selenium是绝对的王者，几乎没人质疑。但这些年，Playwright和Puppeteer杀出来，局面完全变了。
今天，我就带大家把这三个工具扒个底朝天。顺便聊聊，为什么我们要把AI视觉识别拉进来。
1.1 三大自动化工具：谁是你的菜？
先看一张对比表，心里有个底。
| 特性 | Selenium | Playwright | Puppeteer |
|---|---|---|---|
| 支持语言 | Java、Python、C#、JS等 | JS、Python、Java、.NET | 仅JavaScript/TypeScript |
| 浏览器支持 | Chrome、Firefox、Safari、Edge | Chrome、Firefox、Safari、Edge | 仅Chrome/Chromium |
| 速度 | 中等（依赖WebDriver） | 快（原生协议） | 快（原生协议） |
| 自动等待 | 需手动配置 | 内置智能等待 | 需手动配置 |
| 网络拦截 | 有限支持 | 强大且易用 | 强大但较底层 |
| 移动端测试 | 通过Appium | 原生支持 | 不支持 |
| 社区生态 | 最成熟 | 快速增长 | 稳定但偏小众 |
看完表格，你可能更懵了。别急，我一个一个说。
Selenium：老大哥，稳如老狗
Selenium是我用的第一个自动化工具。那时候还在做电商测试，每天手动点几百次「加入购物车」，手指都快废了。
它的核心优势是什么？生态成熟。你遇到的大部分问题，网上都有答案。而且支持的语言最多，团队里用Java的、用Python的都能一起玩。
但缺点也很明显——慢。为什么？因为它走的是WebDriver协议，每次操作都要经过一层中间转换。说白了，就像你开车非要绕个收费站，能不慢吗？
Playwright：后起之秀，真香
Playwright是微软出的，2019年才发布。我第一次用的时候，心里想：「又一个新工具，学不动了。」
结果真香了。
它最大的亮点是自动等待。你写代码时不用再写一堆time.sleep()或者WebDriverWait。Playwright会自己判断元素是否可见、是否可交互。我个人的习惯是，新项目直接上Playwright，省心。
另外，它的网络拦截功能特别强。比如你想模拟弱网环境，或者拦截某个API请求，几行代码就搞定。
// Playwright 网络拦截示例
await page.route('**/api/user', route => {
route.fulfill({
status: 200,
body: JSON.stringify({name: 'fake_user'})
});
});
你想想看，这在测试中多有用。不用改后端代码，前端自己就能模拟各种场景。
Puppeteer：轻量级选手，专为Chrome而生
Puppeteer是Google出的，只支持Chrome。如果你只做Chrome上的自动化，它是个好选择。
它的API设计很简洁，生成PDF、截图、爬取SPA页面都特别顺手。我有个朋友用它做爬虫，一天抓了10万条数据，稳得很。
但局限性也很明显——不支持Firefox和Safari。如果你的用户群体用Safari比较多，那Puppeteer就帮不上忙了。
1.2 为什么需要AI视觉识别？
讲完工具，我们来聊聊一个更深的问题。
传统的自动化，靠的是DOM元素定位。比如通过ID、CSS选择器、XPath去找按钮。这听起来很完美，对吧？
但现实很骨感。
我在项目中遇到过这样的情况：一个按钮的ID是动态生成的，每次刷新页面都不一样。或者，某个元素在iframe里，死活定位不到。更离谱的是，有一次测试一个canvas绘制的图形，DOM里根本没有任何可点击的元素。
这时候，传统自动化就抓瞎了。
AI视觉识别就是来解决这个问题的。它不依赖DOM，而是直接「看」屏幕。
OpenCV：让机器「看见」
OpenCV是一个计算机视觉库。你可以用它做图像匹配、颜色识别、形状检测。
举个例子。你想点击屏幕上的某个图标，但它在canvas里。用Selenium根本找不到。但用OpenCV，你可以先截个图，然后通过模板匹配找到图标的位置，再模拟点击。
# OpenCV 模板匹配示例
import cv2
import numpy as np
# 读取屏幕截图和模板图片
screen = cv2.imread('screenshot.png')
template = cv2.imread('icon.png')
# 执行模板匹配
result = cv2.matchTemplate(screen, template, cv2.TM_CCOEFF_NORMED)
min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(result)
# 如果匹配度超过阈值，就点击
if max_val > 0.8:
click_x = max_loc[0] + template.shape[1] // 2
click_y = max_loc[1] + template.shape[0] // 2
print(f'找到图标，位置：({click_x}, {click_y})')
嗯，这里要注意。OpenCV的匹配度阈值很关键。设得太高，容易漏掉；设得太低，容易误点。我一般从0.8开始试，根据实际情况调整。
OCR：让机器「阅读」
OCR（光学字符识别）是用来识别文字的。比如验证码、PDF中的文字、图片里的水印。
我最常用的是Tesseract OCR。它免费、开源，而且支持中文。
# Tesseract OCR 示例
import pytesseract
from PIL import Image
# 打开图片
img = Image.open('captcha.png')
# 识别文字
text = pytesseract.image_to_string(img, lang='chi_sim+eng')
print(f'识别结果：{text}')
说实话，OCR的准确率不是100%。尤其是遇到扭曲的验证码、模糊的字体，识别结果可能惨不忍睹。但配合一些预处理（比如灰度化、二值化、去噪点），准确率能提升不少。
1.3 什么时候该用视觉识别？
我总结了几种典型场景：
- 动态ID或类名：每次刷新页面，元素属性都变。用视觉识别直接找图标。
- Canvas或SVG图形：DOM里没有可交互元素，只能靠图像匹配。
- 跨平台测试：同一个界面在Web、移动端、桌面端都有。用视觉识别可以写一套脚本，跑在不同平台上。
- 验证码识别：虽然不鼓励破解验证码，但有些内部系统的验证码很简单，OCR可以搞定。
- UI回归测试：对比两张截图，找出像素级别的差异。这在视觉回归测试中非常有用。
1.4 本章小结
好了，第一课的内容就到这里。
我们聊了三个自动化工具的特点：Selenium稳、Playwright快、Puppeteer轻。也聊了AI视觉识别的价值——当DOM搞不定时，让机器「看」和「读」。
下一章，我会带大家动手搭建第一个自动化环境。到时候，我们直接用Playwright写一个能自动登录、截图、填表单的脚本。你想想看，是不是有点期待？
记住一句话：工具是死的，思路是活的。别纠结于学哪个工具，而是学会在什么场景下用什么方案。
我们下章见。