最常用方式是结合 Selenium WebDriver 与 Node.js 生态,或更推荐 Playwright;Playwright 开箱即用、多浏览器支持、自动等待;Selenium 需手动管理驱动;定位优先用 data-testid,避免固定等待,测试应独立可重复。

JavaScript 实现自动化测试,尤其是浏览器端的 UI 自动化,最常用的方式是结合 Selenium WebDriver 和 Node.js 生态(如 selenium-webdriver 库或更现代的 WebdriverIO、Playwright)。Selenium 本身不绑定语言,但通过 WebDriver 协议可让 JavaScript 控制真实浏览器(Chrome、Firefox 等)执行点击、输入、断言等操作。
安装与基础环境准备
确保本地已安装 Node.js 和 Chrome 浏览器。推荐使用 chromedriver 配合 Chrome,或直接用 playwright(内置浏览器,免手动管理驱动)。
- 若用原生
selenium-webdriver:运行npm install selenium-webdriver,再单独下载匹配版本的chromedriver并配置 PATH,或使用chromedriver包自动管理 - 更推荐新手用
playwright:执行npm init playwright@latest,它会自动安装依赖、下载浏览器、生成示例测试,开箱即用 - 测试运行器可选
Jest、Vitest或Mocha,用于组织用例和断言
用 Playwright 写一个登录测试(推荐方式)
Playwright 是当前更轻量、稳定、API 更简洁的替代方案,支持多浏览器、自动等待、截图录屏,且无需手动启停驱动。
- 创建测试文件
login.spec.js - 启动浏览器上下文,打开页面:
const page = await context.newPage(); await page.goto('https://example.com/login'); - 定位并交互元素:
await page.fill('#username', 'testuser'); await page.fill('#password', '123456'); await page.click('button[type="submit"]'); - 断言结果:
await expect(page).toHaveURL(/\/dashboard/);或检查文本:await expect(page.getByText('欢迎回来')).toBeVisible();
用 selenium-webdriver 的基本流程(传统方式)
适合需要兼容老项目或必须用 Selenium Grid 的场景。
立即学习“Java免费学习笔记(深入)”;
- 引入模块:
const { Builder, By, until } = require('selenium-webdriver'); - 启动 Chrome 实例:
let driver = await new Builder().forBrowser('chrome').build(); - 导航与操作:
await driver.get('https://example.com'); await driver.findElement(By.id('search')).sendKeys('nodejs'); await driver.findElement(By.name('btnK')).click(); - 显式等待避免时序问题:
await driver.wait(until.elementLocated(By.css('.result')), 5000); - 最后别忘了清理:
await driver.quit();
关键注意事项
自动化测试不是“点点点”的录制回放,稳定性依赖合理的设计。
- 优先用语义化、稳定的定位器:如
data-testid属性(开发配合添加),而非易变的 class 名或 XPath 路径 - 避免
sleep(2000)这类固定等待;改用显式等待(等待元素出现/可点击/文本变化) - 测试应独立、可重复:每次运行前清理 cookies / localStorage,或使用干净的无痕上下文
- CI 环境中注意浏览器权限(如 Linux 下需加
--no-sandbox启动参数)
不复杂但容易忽略:真正的自动化价值在于持续运行、快速反馈、暴露回归问题,而不是单次跑通。从一个核心流程(如用户登录 → 创建订单)开始写起,逐步覆盖主路径,比追求全覆盖更实际。











