Playwright+TS+Cucumber集成报错求助：无法读取visit_base_url属性

首次搭建Playwright TypeScript结合Cucumber JS的仓库，此前仅使用过两者的JavaScript版本，复用旧项目POM模式时出现以下错误：

@Smoke
  Scenario: User is able to login with valid credentials # features/login.feature:3
    Given User is on the "Login" Page
User is on the Login Page
    ✖ failed
      TypeError: Cannot read property 'visit_base_url' of undefined
          at /Users/Rahul_Yadav/Documents/FE-Projects/play-cuke-ts/src/step-definitions/login.step.ts:16:24
          at Generator.next (<anonymous>)
          at fulfilled (/Users/Rahul_Yadav/Documents/FE-Projects/play-cuke-ts/src/step-definitions/login.step.ts:5:58)
          at runNextTicks (node:internal/process/task_queues:61:5)
          at processImmediate (node:internal/timers:437:9)

问题核心是this.loginPage未被正确初始化，导致调用visit_base_url时触发undefined错误，以下是修复步骤：

• 1. 配置自定义Cucumber World类
  在src/support/world.ts中创建自定义World类，统一初始化Playwright浏览器、页面及POM实例：

  import { World, setWorldConstructor } from '@cucumber/cucumber';
  import { Browser, Page, chromium } from 'playwright';
  import { LoginPage } from '../pages/login.page';
  
  class CustomWorld extends World {
    browser: Browser;
    page: Page;
    loginPage: LoginPage;
  
    async setup() {
      this.browser = await chromium.launch({ headless: false });
      this.page = await this.browser.newPage();
      this.loginPage = new LoginPage(this.page);
    }
  
    async teardown() {
      await this.browser.close();
    }
  }
  
  setWorldConstructor(CustomWorld);
  

• 2. 添加Cucumber前后置钩子
  在src/support/hooks.ts中添加钩子函数，触发World类的初始化与销毁逻辑：

  import { Before, After } from '@cucumber/cucumber';
  
  Before(async function () {
    await this.setup();
  });
  
  After(async function () {
    await this.teardown();
  });
  

• 3. 确保POM类正确接收Page实例
  检查src/pages/login.page.ts，保证构造函数正确传入并保存Playwright Page对象：

  import { Page } from 'playwright';
  
  export class LoginPage {
    private page: Page;
  
    constructor(page: Page) {
      this.page = page;
    }
  
    async visit_base_url() {
      await this.page.goto('https://your-actual-login-url.com');
    }
  }
  

完成以上配置后，this.loginPage会在每个场景执行前被正确初始化，即可正常调用visit_base_url方法。

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