基于Puppeteer的专有SPA自动化导航系统中模拟导航路径的TypeScript类型定义需求

我太懂这种场景的痛苦了——专有SPA连个URL导航锚点都不给，自动化全靠摸黑找元素，用TypeScript做强类型约束绝对是能把导航逻辑捋顺的关键一步。下面我给你一套贴合这个场景的类型定义方案，还附带实践思路：

1. 先把SPA内部的“路由”枚举清楚 #

首先得把你要导航的所有视图/页面定义成枚举，这样所有导航状态都是强类型的，再也不会出现拼写错误或者状态模糊的情况：

// 枚举SPA里所有需要交互的内部视图
enum AppInternalRoute {
  Dashboard = "dashboard",
  UserProfile = "user-profile",
  OrderList = "order-list",
  OrderDetail = "order-detail",
  Login = "login"
}

2. 定义单个导航步骤的类型 #

每个导航动作都是由一串步骤组成的（比如点菜单、等元素加载），咱们把单个步骤的规则用类型卡死：

// 导航支持的操作类型
type NavigationAction = {
  // 操作类型：点击、输入、等待元素、执行页面脚本等
  type: "click" | "waitForSelector" | "fill" | "evaluate";
  // DOM选择器（针对需要操作元素的动作）
  selector?: string;
  // 输入内容（针对填充表单的动作）
  inputValue?: string;
  // 自定义页面脚本（针对SPA内部JS触发的跳转）
  script?: () => void;
  // 超时时间（可选，默认30秒）
  timeout?: number;
};

// 单个导航路径：从A视图到B视图的完整步骤链
type NavigationPath = {
  from: AppInternalRoute;
  to: AppInternalRoute;
  steps: NavigationAction[];
};

3. 导航上下文类型：跟踪当前状态 #

因为没有URL做参考，咱们得自己维护当前SPA的状态，避免重复执行导航或者在错误的视图上操作：

type NavigationContext = {
  currentRoute: AppInternalRoute;
  // 可选：存临时状态，比如当前打开的订单ID、用户ID等
  tempState?: Record<string, any>;
};

4. 导航管理器的接口类型 #

最后把这些类型整合起来，定义一个导航管理器的接口，让整个导航逻辑的调用更规范：

import type puppeteer from "puppeteer";

// 导航管理器的核心接口
interface SPANavigator {
  browser: puppeteer.Browser;
  page: puppeteer.Page;
  context: NavigationContext;
  // 预定义好的所有导航路径
  navigationPaths: NavigationPath[];

  // 核心方法：从当前视图跳转到目标视图
  navigateTo(targetRoute: AppInternalRoute): Promise<void>;
  // 验证当前是否真的在目标视图上（通过检查标志性元素）
  verifyCurrentRoute(route: AppInternalRoute): Promise<boolean>;
  // 自动更新上下文的当前路由
  updateCurrentRoute(): Promise<void>;
}

额外给你个实际使用的小例子 #

比如从仪表盘跳转到订单详情页的路径配置：

const dashboardToOrderDetail: NavigationPath = {
  from: AppInternalRoute.Dashboard,
  to: AppInternalRoute.OrderDetail,
  steps: [
    { type: "click", selector: "#order-list-menu-item" },
    { type: "waitForSelector", selector: "#order-list-table", timeout: 15000 },
    { type: "click", selector: "#order-12345-row" },
    { type: "waitForSelector", selector: "#order-detail-header" }
  ]
};

最后提几个实用小建议 #

• 每个AppInternalRoute一定要对应一个标志性元素（比如登录页的用户名输入框、仪表盘的统计卡片），用来验证当前视图是否正确加载
• 所有导航步骤里尽量加上waitForSelector，避免DOM还没渲染完就执行下一个操作
• 如果SPA有内部JS方法触发的跳转，直接用evaluate类型的步骤，在页面上下文里调用内部方法就行

备注：内容来源于stack exchange，提问作者Aaron Dale