一、技术介绍

技术栈：Playwright + Node.js

实现效果：零代码录制网页手动操作、自动生成标准化测试脚本、一键自动回放测试，快速完成页面功能自动化回归验证。

运行环境：Mac / Windows 通用（本步骤适配Mac）

二、前期准备

1. 电脑安装 Node.js

2. 新建空项目文件夹，进入文件夹并打开终端

三、环境安装（逐条复制执行）

# 初始化本地前端项目，生成项目配置文件（仅当前文件夹生效） 
npm init -y 

# 本地安装Playwright自动化测试核心依赖 
npm i -D @playwright/test 

# 配置国内镜像，解决浏览器下载卡顿、失败问题 
export PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright 

# 安装Playwright专用测试浏览器内核（自动化专属，不占用本地日常浏览器） 
npx playwright install chromium

四、新建3个核心配置文件

在项目文件夹内新建以下文件，直接复制粘贴内容，无需修改代码逻辑。

1. config.json（项目配置文件）

作用：配置测试网址、文件存储路径、元素优先定位规则

{ 
    "baseUrl": "https://www.antdv.com/components/overview", 
    "recordSavePath": "./record-temp/record.js", 
    "genTestPath": "./gen-test/", 
    "preferLocator": ["getByRole", "getByText", "getByPlaceholder"] 
}

可修改 baseUrl 替换为自己需要测试的网页地址

2. element-store.js（元素管理文件）

作用：统一收纳页面元素，优化脚本稳定性，无需改动

const elementPool = {};
function addElement(pageName, eleName, locatorCode) {
  if (!elementPool[pageName]) elementPool[pageName] = {};
  elementPool[pageName][eleName] = locatorCode;
}
function getElement(pageName, eleName) {
  return elementPool[pageName]?.[eleName] || "";
}
function getAllElement() {
  return elementPool;
}
module.exports = {addElement,getElement,getAllElement};

3. pw-skill.js（核心运行脚本）

作用：自动创建目录、启动录制、生成测试脚本、自动回放测试，适配所有网页，无固定标题报错

const fs = require("fs");
const path = require("path");
const { execSync, spawn } = require("child_process");
const config = require("./config.json");
const { addElement, getAllElement } = require("./element-store");

// 自动创建文件夹，解决路径不存在报错
function ensureDir(dirPath) {
  if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath, { recursive: true });
}
ensureDir(path.dirname(config.recordSavePath));
ensureDir(config.genTestPath);

// 启动浏览器录制页面操作
function startCliRecord() {
  console.log("🚀 启动网页操作录制");
  const cmd = `npx playwright codegen ${config.baseUrl} --target=javascript -o ${config.recordSavePath}`;
  const child = spawn(cmd, { shell: true, stdio: "inherit" });
  return new Promise(resolve => {
    child.on("close", () => resolve());
  });
}

// 解析录制操作，提取有效测试步骤
function parseRecordCode() {
  if (!fs.existsSync(config.recordSavePath)) return null;
  const code = fs.readFileSync(config.recordSavePath, "utf8");
  const actionLines = [];
  code.split("\n").forEach(line => {
    const trimLine = line.trim();
    if (trimLine.startsWith("await page.goto") || trimLine.includes(".click()") || trimLine.includes(".fill(")) {
      actionLines.push(trimLine);
    }
  });
  return { actions: actionLines };
}

// 自动生成标准化测试脚本
function generateTest(caseName, actions) {
  const template = `import { test, expect } from '@playwright/test';
test('${caseName}', async ({ page }) => {
${actions.map(item => `  ${item}`).join("\n")}
});`;
  const savePath = path.join(config.genTestPath, `${Date.now()}.test.js`);
  fs.writeFileSync(savePath, template, "utf8");
  console.log("✅ 测试脚本生成成功");
}

// 自动回放执行测试用例
function runTest() {
  console.log("🧪 开始自动回放测试");
  try {
    execSync(`npx playwright test ${config.genTestPath} --headed`, { stdio: "inherit" });
    console.log("🎉 测试执行完成");
  } catch (e) {
    console.error("❌ 测试执行失败");
  }
}

// 完整自动化流程：录制-生成脚本-自动回放
async function run() {
  await startCliRecord();
  const data = parseRecordCode();
  if (!data) return;
  generateTest("页面自动化测试", data.actions);
  runTest();
}

run();

五、启动自动化完整流程

1. 首次录制（核心使用流程）

# 启动录制+自动生成脚本+自动回放测试 
node pw-skill.js

操作流程：自动弹出浏览器 → 手动操作页面 → 关闭浏览器 → 程序自动生成脚本并回放测试

2. 重新录制（操作失误时使用）

# 清空旧录制数据，重新录制 
rm -f record-temp/record.js && node pw-skill.js

3. 仅回放已有测试脚本

# 不重新录制，直接执行已生成的测试用例 
npx playwright test gen-test --headed

六、简易注意事项

1. 所有环境配置仅生效于当前项目文件夹，删除文件夹即可彻底清空，无电脑残留

2. 录制页面操作时节奏放缓，避免快速连点，防止元素定位冲突报错

3. 更换测试网页只需修改 config.json 中的 baseUrl，无需改动其他代码

4. 回放报错优先执行重新录制命令，大概率为旧录制数据残留导致