Cucumber-js+TypeScript中POManager的类型优化方案咨询

页面对象管理器（POManager）是页面对象模式的合理扩展，在你的技术栈中完全适用：

• 集中管理所有页面对象实例，避免在步骤定义中重复创建页面对象，提升代码复用性
• 统一维护页面对象的初始化逻辑，后续新增页面对象只需在POManager中添加，降低维护成本
• 与BDD与否无关，本质是优化测试代码结构的手段，即使不使用BDD特性，也能让测试代码更清晰、模块化

以下几种方案都能在保障类型正确性的前提下解决this.poManager的类型错误：

1. 运行时检查+类型窄化 #

在步骤定义中先判断poManager是否存在，不存在则抛出错误，TypeScript会自动将类型窄化为POManager：

Given(/^Blah Blah Blah$/, function (this: CustomWorld) {
  if (!this.poManager) {
    throw new Error("POManager未初始化，请检查Before钩子逻辑");
  }
  // 此处this.poManager类型已被窄化为POManager，无类型错误
  const myPage2: MyPage = this.poManager.myPage;
});

这种方法兼顾运行时安全和类型安全，是最稳妥的方案。

2. 拆分World接口为初始化前后两种类型 #

将CustomWorld拆分为基础未初始化类型和初始化完成类型，通过类型守卫确保步骤中使用的是已初始化的World：

// 基础World接口，包含无需初始化的属性
export interface BaseWorld extends World {
  // 其他通用属性
}

// 初始化完成后的World接口，所有核心属性为必选
export interface InitializedWorld extends BaseWorld {
  context: BrowserContext;
  page: Page;
  poManager: POManager;
}

// 类型守卫函数，验证并返回已初始化的World
function assertInitialized(world: BaseWorld): asserts world is InitializedWorld {
  if (!world.context || !world.page || !world.poManager) {
    throw new Error("测试环境未完成初始化，请检查Before钩子");
  }
}

// 步骤定义中使用
Given(/^Blah Blah Blah$/, function (this: BaseWorld) {
  assertInitialized(this);
  // 此时this的类型自动变为InitializedWorld，可直接访问poManager
  const myPage2: MyPage = this.poManager.myPage;
});

3. 使用类扩展World并结合非空断言 #

用类替代接口定义CustomWorld，在类中使用非空断言!标记属性为必选，同时确保Before钩子一定会初始化这些属性：

import { World, WorldOptions } from '@cucumber/cucumber';
import { BrowserContext, Page } from '@playwright/test';

export class CustomWorld extends World {
  context!: BrowserContext;
  page!: Page;
  poManager!: POManager;

  constructor(options: WorldOptions) {
    super(options);
  }
}

// Before钩子中初始化
Before(async function (this: CustomWorld) {
  this.context = await browser.newContext();
  this.page = await this.context.newPage();
  this.poManager = new POManager(this.page);
});

// 步骤定义中直接访问
Given(/^Blah Blah Blah$/, function (this: CustomWorld) {
  // 非空断言确保TS认为属性已初始化，结合钩子的执行顺序，运行时不会为空
  const myPage2: MyPage = this.poManager.myPage;
});

注意：这种方法依赖Cucumber的钩子执行顺序（Before钩子一定会在步骤前运行），若钩子逻辑异常会导致运行时错误，需确保钩子的可靠性。

内容的提问来源于stack exchange，提问作者RafalLovesWorking