网页自动化测试怎么做？Selenium与Playwright及Cypress咋选不串单元测试？ 播报

网页自动化测试不是“写个脚本点点按钮”就完事，而是用工具驱动浏览器模拟真实用户操作，验证页面功能、UI 交互、跨浏览器兼容性的工程化手段。 它和单元测试(测函数逻辑)是两条线——单元测试用 Jest/PyTest 跑后端算法，网页自动化测的是“用户打开浏览器能看到什么、点了会怎样”，别把两者焊死在同一个测试套件里。

🧰 主流工具三选一(2026 年格局)​

Selenium(老牌王者)：支持所有主流浏览器(Chrome/Firefox/Safari/Edge)，语言绑定多(Java/Python/C#/JS)，生态成熟，但启动慢、API 繁琐、需手动管理 WebDriver 版本;适合传统企业级回归测试。

Playwright(微软新贵)：2020 年出道，自动等待元素、多标签页/iframe 隔离、网络拦截、移动端模拟、内置截图/录屏，单 API 统一 Chromium/Firefox/WebKit，代码比 Selenium 简洁 30%+;2026 年已成新项目首选。

Cypress(前端亲儿子)：直接在浏览器内运行，实时重载、时间旅行调试、自动重试断言，写测试像写前端组件;缺点是只支持 JS/TS、不支持多标签页、跨域受限，适合纯前端团队做组件级 E2E。

⚙️ 核心流程四步​

定位元素：用 CSS 选择器/XPath/文本内容找按钮输入框，别用绝对 XPath(易碎)，优先 data-testid 属性;

执行操作：点击、输入、拖拽、文件上传，Playwright/Cypress 自动等元素可交互，Selenium 要手写 WebDriverWait;

断言验证：检查 URL 跳转、元素文本、样式、网络响应，断言库用内置或接 Chai/Jest;

清理环境：测试后还原数据，避免脏数据影响下次运行，用 beforeEach/afterEach 钩子。

📊 测试金字塔分层​

底层单元测试(70%)：函数/组件逻辑，快、隔离;

中间集成测试(20%)：API 接口、数据流，Postman/PyTest;

顶层 E2E 网页自动化(10%)：核心业务流程(登录→加购→支付)，慢但保底。

别把所有测试都写成 E2E，维护成本会爆炸。

⚠️ 避坑铁律​

别用 sleep(5) 硬等，用显式等待(Playwright 自动等、Selenium ExpectedConditions);元素定位优先加 data-testid 属性，前端重构不破测试;测试数据用 Faker 生成，别硬编码真实用户信息;CI/CD 里跑无头模式(headless)，本地调试用有头看界面;跨域/第三方登录用 mock 接口，别真跳微信 OAuth 跑循环;Selenium 4 已支持相对定位器和 CDP，别抱着 Selenium 2 代码不放。