Playwright基类访问page属性报错：初始化前使用属性问题求助

问题原因 #

TypeScript类的实例属性初始化顺序是先执行类体中直接定义的属性赋值，再执行构造函数内的代码。你在类体中直接初始化ts时，this.page还没被构造函数里的this.page = page赋值，所以触发了这个初始化顺序错误。

解决方案 #

方案1：在构造函数内初始化ts #

把ts的初始化逻辑移到构造函数里，确保this.page赋值完成后再创建tsMethods实例：

// Import Playwright test library.
import { Page } from "@playwright/test";
import { tsMethods } from "../custom-methods/other-methods/tsMethods";

// Declare a class.
export class baseClass {
  // Declare a page varible.
  page: Page;
  // 先声明ts属性，不直接初始化
  public readonly ts: tsMethods;

  // Declare a constructor.
  constructor(page: Page) {
    // Get access to the page property.
    this.page = page;
    // 此时page已经赋值，再初始化ts
    this.ts = new tsMethods(this.page);
  }

  public async beforeTest() {}
}

// Export the current class.
export default baseClass;

方案2：使用getter延迟初始化 #

如果希望保持ts作为类属性的写法，可以用getter来延迟创建实例，只有当第一次访问ts时才初始化：

// Import Playwright test library.
import { Page } from "@playwright/test";
import { tsMethods } from "../custom-methods/other-methods/tsMethods";

// Declare a class.
export class baseClass {
  // Declare a page varible.
  page: Page;
  // 私有属性存储ts实例
  private _ts?: tsMethods;

  // Declare a constructor.
  constructor(page: Page) {
    // Get access to the page property.
    this.page = page;
  }

  // 用getter返回ts实例，第一次访问时初始化
  public get ts(): tsMethods {
    if (!this._ts) {
      this._ts = new tsMethods(this.page);
    }
    return this._ts;
  }

  public async beforeTest() {}
}

// Export the current class.
export default baseClass;

说明 #

两种方案都能解决初始化顺序问题：

• 方案1更直接，适合确定在构造时就需要初始化ts的场景；
• 方案2是懒加载模式，适合ts可能不会被所有子类用到的场景，节省初始化资源。

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