bk-press 0.0.5 → 0.0.6

package/README.md

@@ -1,11 +1,14 @@
 # bk-press
 
-一个用于 Cypress 自动化测试的 CLI 工具，帮助快速初始化测试环境和并行运行自动化测试。
+一个用于 Cypress 自动化测试的 CLI 工具，帮助快速初始化测试环境、并行运行自动化测试，并支持从浏览器录制产物生成 **Fixture 拦截数据** 与 **Cypress 测试脚本**。
 
 ## 📋 目录
 
 - [安装](#安装)
 - [快速开始](#快速开始)
+- [CLI 命令一览](#cli-命令一览)
+- [从网络日志生成 Fixture（fixture）](#从网络日志生成-fixturefixture)
+- [从 Chrome Recorder 生成测试脚本（record）](#从-chrome-recorder-生成测试脚本record)
 - [配置文件](#配置文件)
 - [项目结构](#项目结构)
 - [使用示例](#使用示例)
@@ -48,7 +51,8 @@ pnpm add bk-press
    {
      "DEV_URL": "https://your-dev-domain.com",
      "LOCAL_URL": "http://localhost:8080",
-     "COOKIE_DOMAIN": "your-domain.com"
+     "COOKIE_DOMAIN_A": "your-domain.com",
+     "COOKIE_DOMAIN_B": "your-domain.com"
    }
    ```
 
@@ -63,6 +67,62 @@ pnpm add bk-press
    bkpress run
    ```
 
+## CLI 命令一览
+
+| 命令 | 说明 |
+|------|------|
+| `bkpress init` | 初始化 Cypress 测试环境（模板、配置、脚本等） |
+| `bkpress login` | 打开浏览器登录并写入 `cypress.env.json` 中的 Cookie |
+| `bkpress run` | 并行运行 E2E 自动化测试 |
+| `bkpress fixture` | 从项目根目录的 `web-interaction-log.json` 生成 `cypress_fixtures/` 下的响应 JSON |
+| `bkpress record <paths...>` | 根据 Cypress Chrome Recorder 导出的一个或多个 JSON，生成一个或多个 Cypress 测试脚本 |
+
+查看子命令与参数：
+
+```bash
+bkpress --help
+bkpress record --help
+```
+
+## 从网络日志生成 Fixture（fixture）
+
+适用于：在真实页面上操作一遍后，把 **XHR / Fetch 的响应体** 落成静态 JSON，供 `cy.intercept` 等场景做桩数据。
+
+**前置条件**
+
+1. 在 Chrome 应用商店安装 **Web Interaction Logger** 插件，在目标站点录制并导出 **`web-interaction-log.json`**。
+2. 将该文件放在**当前项目根目录**（与执行 `bkpress fixture` 时的 `cwd` 一致）。
+
+**用法**
+
+```bash
+bkpress fixture
+```
+
+**行为说明**
+
+- 读取根目录下的 `web-interaction-log.json`；若不存在会提示先安装插件并导出文件。
+- 仅处理满足以下条件的条目：`type` 为 `network`、`subtype` 为 `response-body`，且 `url` 为以 `/` 开头的相对路径（站点内接口）。
+- 在根目录创建或使用 **`cypress_fixtures/`** 目录，按请求方法与 URL 路径写入多个 `.json` 文件（内容为对应条目的 `responseBody`）。
+
+生成后可在 Cypress 中把上述路径配进 `cy.fixture` / `cy.intercept` 的 `fixture` 或 `body`，与项目内约定保持一致即可。
+
+## 从 Chrome Recorder 生成测试脚本（record）
+
+适用于：使用 **Cypress Chrome Recorder** 插件导出录制的json后，一键生成 Cypress 测试用例代码。
+
+**用法**
+
+```bash
+# 单个文件
+bkpress record ./recordings/flow.json
+
+# 多个文件依次转换
+bkpress record ./a.json ./b.json
+```
+
+路径为相对于当前工作目录的相对路径，或可使用绝对路径。
+
 ## 配置文件
 
 ### cypress.env.json
@@ -75,7 +135,8 @@ pnpm add bk-press
 {
   "DEV_URL": "https://your-dev-domain.com",
   "LOCAL_URL": "http://localhost:8080",
-  "COOKIE_DOMAIN": "your-domain.com"
+  "COOKIE_DOMAIN_A": "your-domain.com",
+  "COOKIE_DOMAIN_B": "your-domain.com",
 }
 ```
 
@@ -86,7 +147,8 @@ pnpm add bk-press
 {
   "DEV_URL": "https://your-dev-domain.com",
   "LOCAL_URL": "http://localhost:8080",
-  "COOKIE_DOMAIN": "your-domain.com",
+  "COOKIE_DOMAIN_A": "your-domain.com",
+  "COOKIE_DOMAIN_B": "your-domain.com",
   "sessionId": "xxx",
   "token": "xxx"
   // ... 其他 Cookie
@@ -97,7 +159,7 @@ pnpm add bk-press
 
 - `DEV_URL`: 开发环境 URL，用于登录获取 Cookie
 - `LOCAL_URL`: 本地开发服务器 URL，用于运行测试
-- `COOKIE_DOMAIN`: Cookie 的域名，用于设置 Cookie 的作用域
+- `COOKIE_DOMAIN_A`: Cookie 的域名，用于设置 Cookie 的作用域，可能有多个，自行命名
 
 ### cypress.config.ts
 
@@ -123,12 +185,14 @@ export default defineConfig({
 your-project/
 ├── cypress/
 │   ├── e2e/              # 端到端测试用例
-│   ├── fixtures/         # 测试数据
+│   ├── fixtures/         # 测试数据（Cypress 默认 fixtures）
 │   ├── support/          # 支持文件
 │   │   ├── commands.ts   # 自定义命令
 │   │   ├── e2e.ts        # E2E 测试支持
 │   │   └── login.ts      # 登录命令（由 login 命令生成）
 │   └── ...
+├── cypress_fixtures/     # fixture 命令由网络日志生成的响应 JSON（可选，运行 fixture 后出现）
+├── web-interaction-log.json   # Web Interaction Logger 导出文件（可选，供 fixture 使用）
 ├── cypress.config.ts     # Cypress 配置文件
 ├── cypress.env.json      # 环境变量配置（包含 Cookie）
 └── package.json          # 包含测试脚本
@@ -157,6 +221,18 @@ bkpress login
 bkpress run
 ```
 
+### 从网络日志生成接口 Fixture
+
+```bash
+bkpress fixture
+```
+
+### 从 Recorder JSON 生成 Cypress 脚本
+
+```bash
+bkpress record ./my-flow.json
+```
+
 ### 在测试用例中使用登录
 
 ```typescript
@@ -242,3 +318,30 @@ npm run component-test
 - 检查 `cypress.env.json` 文件是否包含 Cookie
 - 检查 `cypress/support/login.ts` 文件是否正确生成
 - 确保 `cypress/support/e2e.ts` 中导入了 `./login`
+
+### 6. fixture 报错：web-interaction-log.json 不存在
+
+**问题：** 运行 `bkpress fixture` 时提示找不到 `web-interaction-log.json`
+
+**解决方案：**
+
+- 确认文件位于**项目根目录**，且文件名为 `web-interaction-log.json`
+- 在 Chrome 中安装 **Web Interaction Logger**，完成录制后使用插件的导出功能保存到上述路径
+
+### 7. fixture 未生成预期文件
+
+**问题：** 命令成功但 `cypress_fixtures/` 里文件很少或为空
+
+**解决方案：**
+
+- 当前逻辑只收录 **相对路径** 接口（`url` 以 `/` 开头）；完整 URL（`https://...`）会被过滤掉
+- 只处理 **`response-body`** 类型的网络日志，请确认导出内容里包含响应体
+- 若条目缺少 `responseBody`，对应文件不会写入
+
+### 8. record 命令失败
+
+**问题：** `bkpress record` 退出码非 0 或 `npx` 报错
+
+**解决方案：**
+
+- 确认已传入至少一个 JSON 路径：`bkpress record ./your.json`

package/lib/command/fixture.js

@@ -23,8 +23,13 @@ async function fixture() {
         await (0, util_1.createFolder)(commonPath);
         console.log(`创建 fixtures 文件夹: ${commonPath}`);
     }
+    console.log("validLogList>>>", validLogList);
     validLogList.forEach(async (log) => {
         const jsonContent = log.responseBody;
+        if (!jsonContent) {
+            return;
+        }
+        // console.log("jsonContent>>>", jsonContent);
         const jsonString = JSON.stringify(jsonContent, null, 2);
         const isExistQuery = log.url.includes("?");
         let fileName = "";

package/lib/command/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./login"), exports);
 __exportStar(require("./init"), exports);
 __exportStar(require("./run"), exports);
 __exportStar(require("./fixture"), exports);
+__exportStar(require("./record"), exports);

package/lib/command/init.js

@@ -5,13 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.init = init;
 const child_process_1 = require("child_process");
-const which_pm_runs_1 = __importDefault(require("which-pm-runs"));
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const util_1 = require("../util");
 async function init() {
     console.log("开始初始化Cypress自动化测试环境...");
-    console.log("安装相关依赖...");
+    console.log("全局安装 Chrome Recorder...");
+    await installChromeRecorderGlobal();
+    console.log("安装 Cypress 相关依赖...");
     await installDependencies();
     console.log("添加类型到 tsconfig.json 文件...");
     await addCypressTypesToTsconfigJsonFile();
@@ -25,12 +26,13 @@ async function init() {
     await addCypressEnvJsonFile();
     console.log("添加忽略文件到 .gitignore 文件...");
     await addIgnoreToGitignoreFile();
-    console.log("Cypress自动化测试初始化完成!");
+    console.log("Cypress自动化测试环境初始化完成!");
 }
 // 安装自动化测试相关依赖
 function installDependencies() {
     return new Promise((resolve, reject) => {
-        const pkgTool = (0, which_pm_runs_1.default)()?.name || "npm";
+        const pkgTool = (0, util_1.getPkgTool)();
+        console.log("pkgTool>>>", pkgTool);
         const installPrefix = pkgTool === "npm" ? `${pkgTool} install -D` : `${pkgTool} add -D`;
         (0, child_process_1.exec)(`${installPrefix} cypress cypress-parallel cypress-multi-reporters start-server-and-test`, {
             cwd: process.cwd(),
@@ -45,6 +47,22 @@ function installDependencies() {
         });
     });
 }
+// 安装 Chrome Recorder 全局依赖
+function installChromeRecorderGlobal() {
+    return new Promise((resolve, reject) => {
+        (0, child_process_1.exec)("npm install -g @cypress/chrome-recorder", {
+            cwd: process.cwd(),
+        }, (error, stdout, stderr) => {
+            if (error) {
+                console.error("Chrome Recorder 安装失败:", error);
+                reject(error);
+                return;
+            }
+            console.log("Chrome Recorder 安装成功!");
+            resolve(stdout);
+        });
+    });
+}
 // 添加脚本到 package.json
 async function addScriptsToPackageJson() {
     const packageJsonFile = path_1.default.join(process.cwd(), "package.json");

package/lib/command/record.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.record = record;
+const child_process_1 = require("child_process");
+const path_1 = __importDefault(require("path"));
+async function record(filePaths) {
+    if (!filePaths.length) {
+        throw new Error("请提供 Cypress Chrome Recorder 录制的 json 文件路径");
+    }
+    for (const filePath of filePaths) {
+        await createCypressScript(filePath);
+    }
+}
+function createCypressScript(filePath) {
+    const targetPath = path_1.default.resolve(process.cwd(), filePath);
+    console.log(`开始生成 Cypress 测试脚本: ${targetPath}`);
+    return new Promise((resolve, reject) => {
+        const child = (0, child_process_1.spawn)("npx", ["@cypress/chrome-recorder", targetPath], {
+            cwd: process.cwd(),
+            stdio: "inherit",
+            shell: process.platform === "win32",
+        });
+        child.on("error", (error) => {
+            console.error("生成 Cypress 测试脚本失败:", error);
+            reject(error);
+        });
+        child.on("close", (code) => {
+            if (code !== 0) {
+                reject(new Error(`生成 Cypress 测试脚本失败，退出码: ${code}`));
+                return;
+            }
+            console.log("生成 Cypress 测试脚本完成!");
+            resolve();
+        });
+    });
+}

package/lib/index.js

@@ -6,7 +6,7 @@ const command_1 = require("./command");
 const program = new commander_1.Command();
 program
     .name("bk-press")
-    .description("一个用于 Cypress 自动化测试的 CLI 工具，帮助快速初始化和运行端到端测试")
+    .description("一个用于 Cypress 自动化测试的 CLI 工具，提供了快速初始化测试环境、并行运行自动化测试、生成 fixture 拦截数据、生成 Cypress 测试脚本等强大功能。")
     .version("0.0.5");
 program
     .command("init")
@@ -22,4 +22,9 @@ program
     .command("fixture")
     .description("根据 Chrome 插件 Web Interaction Logger 导出的 web-interaction-log.json 生成 fixture 拦截数据")
     .action(command_1.fixture);
+program
+    .command("record")
+    .description("根据 Cypress Chrome Recorder 录制的 json 文件生成 Cypress 测试脚本")
+    .argument("<paths...>", "目标文件路径，支持传入多个")
+    .action(command_1.record);
 program.parse(process.argv);

package/lib/util/common.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPkgTool = getPkgTool;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const which_pm_runs_1 = __importDefault(require("which-pm-runs"));
+// npx 等场景下 UA 常为 npm；若存在 pnpm-lock.yaml 则按 pnpm 安装。
+function getPkgTool() {
+    if (fs_1.default.existsSync(path_1.default.join(process.cwd(), "pnpm-lock.yaml"))) {
+        return "pnpm";
+    }
+    return (0, which_pm_runs_1.default)()?.name || "npm";
+}

package/lib/util/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./file"), exports);
+__exportStar(require("./common"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bk-press",
-  "version": "0.0.5",
-  "description": "一个用于 Cypress 自动化测试的 CLI 工具，帮助快速初始化测试环境和并行运行自动化测试",
+  "version": "0.0.6",
+  "description": "一个用于 Cypress 自动化测试的 CLI 工具，提供了快速初始化测试环境、并行运行自动化测试、生成 fixture 拦截数据、生成 Cypress 测试脚本等强大功能。",
   "main": "lib/index.js",
   "bin": {
     "bkpress": "./lib/index.js"

package/src/command/fixture.ts

@@ -42,6 +42,9 @@ export async function fixture() {
   }
   validLogList.forEach(async (log) => {
     const jsonContent = log.responseBody;
+    if (!jsonContent) {
+      return;
+    }
     const jsonString = JSON.stringify(jsonContent, null, 2);
     const isExistQuery = log.url.includes("?");
     let fileName = "";

package/src/command/index.ts

@@ -2,3 +2,4 @@ export * from "./login";
 export * from "./init";
 export * from "./run";
 export * from "./fixture";
+export * from "./record";

package/src/command/init.ts

@@ -1,5 +1,4 @@
 import { exec } from "child_process";
-import whichPMRuns from "which-pm-runs";
 import path from "path";
 import fs from "fs-extra";
 import {
@@ -8,11 +7,14 @@ import {
   createFolder,
   deleteFolder,
   isFileOrFolderExist,
+  getPkgTool,
 } from "../util";
 
 export async function init() {
   console.log("开始初始化Cypress自动化测试环境...");
-  console.log("安装相关依赖...");
+  console.log("全局安装 Chrome Recorder...");
+  await installChromeRecorderGlobal();
+  console.log("安装 Cypress 相关依赖...");
   await installDependencies();
   console.log("添加类型到 tsconfig.json 文件...");
   await addCypressTypesToTsconfigJsonFile();
@@ -26,13 +28,13 @@ export async function init() {
   await addCypressEnvJsonFile();
   console.log("添加忽略文件到 .gitignore 文件...");
   await addIgnoreToGitignoreFile();
-  console.log("Cypress自动化测试初始化完成!");
+  console.log("Cypress自动化测试环境初始化完成!");
 }
 
 // 安装自动化测试相关依赖
 function installDependencies() {
   return new Promise((resolve, reject) => {
-    const pkgTool = whichPMRuns()?.name || "npm";
+    const pkgTool = getPkgTool();
 
     const installPrefix =
       pkgTool === "npm" ? `${pkgTool} install -D` : `${pkgTool} add -D`;
@@ -50,7 +52,28 @@ function installDependencies() {
         }
         console.log("依赖安装成功!");
         resolve(stdout);
-      }
+      },
+    );
+  });
+}
+
+// 安装 Chrome Recorder 全局依赖
+function installChromeRecorderGlobal() {
+  return new Promise((resolve, reject) => {
+    exec(
+      "npm install -g @cypress/chrome-recorder",
+      {
+        cwd: process.cwd(),
+      },
+      (error, stdout, stderr) => {
+        if (error) {
+          console.error("Chrome Recorder 安装失败:", error);
+          reject(error);
+          return;
+        }
+        console.log("Chrome Recorder 安装成功!");
+        resolve(stdout);
+      },
     );
   });
 }
@@ -69,7 +92,7 @@ async function addScriptsToPackageJson() {
 // 创建 cypress 文件夹并拉取模板文件
 async function addTemplateFiles() {
   const isCypressExist = await isFileOrFolderExist(
-    path.join(process.cwd(), "cypress")
+    path.join(process.cwd(), "cypress"),
   );
   if (isCypressExist) {
     console.log("cypress 文件夹已存在，跳过拉取模板文件");
@@ -116,7 +139,7 @@ function cloneTemplateFiles(isTsProject = true) {
           return;
         }
         resolve(stdout);
-      }
+      },
     );
   });
 }

package/src/command/record.ts

@@ -0,0 +1,40 @@
+import { spawn } from "child_process";
+import path from "path";
+
+export async function record(filePaths: string[]) {
+  if (!filePaths.length) {
+    throw new Error("请提供 Cypress Chrome Recorder 录制的 json 文件路径");
+  }
+
+  for (const filePath of filePaths) {
+    await createCypressScript(filePath);
+  }
+}
+
+function createCypressScript(filePath: string) {
+  const targetPath = path.resolve(process.cwd(), filePath);
+  console.log(`开始生成 Cypress 测试脚本: ${targetPath}`);
+
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn("npx", ["@cypress/chrome-recorder", targetPath], {
+      cwd: process.cwd(),
+      stdio: "inherit",
+      shell: process.platform === "win32",
+    });
+
+    child.on("error", (error) => {
+      console.error("生成 Cypress 测试脚本失败:", error);
+      reject(error);
+    });
+
+    child.on("close", (code) => {
+      if (code !== 0) {
+        reject(new Error(`生成 Cypress 测试脚本失败，退出码: ${code}`));
+        return;
+      }
+
+      console.log("生成 Cypress 测试脚本完成!");
+      resolve();
+    });
+  });
+}

package/src/index.ts

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 
 import { Command } from "commander";
-import { login, init, run, fixture } from "./command";
+import { login, init, run, fixture, record } from "./command";
 
 const program = new Command();
 
 program
   .name("bk-press")
   .description(
-    "一个用于 Cypress 自动化测试的 CLI 工具，帮助快速初始化和运行端到端测试",
+    "一个用于 Cypress 自动化测试的 CLI 工具，提供了快速初始化测试环境、并行运行自动化测试、生成 fixture 拦截数据、生成 Cypress 测试脚本等强大功能。",
   )
   .version("0.0.5");
 
@@ -28,4 +28,11 @@ program
     "根据 Chrome 插件 Web Interaction Logger 导出的 web-interaction-log.json 生成 fixture 拦截数据",
   )
   .action(fixture);
+program
+  .command("record")
+  .description(
+    "根据 Cypress Chrome Recorder 录制的 json 文件生成 Cypress 测试脚本",
+  )
+  .argument("<paths...>", "目标文件路径，支持传入多个")
+  .action(record);
 program.parse(process.argv);

package/src/util/common.ts

@@ -0,0 +1,11 @@
+import fs from "fs";
+import path from "path";
+import whichPMRuns from "which-pm-runs";
+
+// npx 等场景下 UA 常为 npm；若存在 pnpm-lock.yaml 则按 pnpm 安装。
+export function getPkgTool() {
+  if (fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  return whichPMRuns()?.name || "npm";
+}

package/src/util/index.ts

@@ -1 +1,2 @@
 export * from "./file";
+export * from "./common";