Cypress it块中类实例变量访问异常：category值为何为undefined

这个问题的核心是类实例属性的初始化顺序错误，导致categorySession计算时this.category还未被赋值。

错误代码示例（对应你的写法） #

class Page {
  // 类体中直接初始化categorySession，此时this.category还未被构造函数赋值
  categorySession = `[data-cy="${this.category}-form"]`;

  constructor(category) {
    this.category = category;
  }

  enterValue() {
    cy.get(this.categorySession).type('test');
  }
}

// 实例化时
const page = new Page('Liquidity');
console.log(page.category); // 打印'Liquidity'，因为构造函数已完成赋值
page.enterValue(); // 定位的是[data-cy="undefined-form"]，因为categorySession在构造函数赋值前就生成了

为什么会这样？ #

在ES6类中，类体中直接定义的实例属性会在构造函数内部代码执行之前完成初始化。也就是说，categorySession的模板字符串计算是在this.category = category这行代码之前执行的，此时this.category还是undefined，所以最终生成的选择器是[data-cy="undefined-form"]。

你控制台打印page.category时得到Liquidity，是因为构造函数已经执行完毕，this.category已经被赋值，但categorySession的值不会自动更新——它在类初始化阶段就已经固定为undefined-form了。

正确的写法 #

有两种方式可以解决这个问题：

写法1：构造函数内初始化

把categorySession的定义移到构造函数内部，确保使用已赋值的this.category：

class Page {
  constructor(category) {
    this.category = category;
    // 此时this.category已完成赋值，模板字符串能正确计算
    this.categorySession = `[data-cy="${this.category}-form"]`;
  }

  enterValue() {
    cy.get(this.categorySession).type('test');
  }
}

写法2：使用getter动态计算

将categorySession改为getter属性，每次访问时动态生成选择器，避免固定初始值：

class Page {
  constructor(category) {
    this.category = category;
  }

  // 每次访问categorySession时动态生成选择器
  get categorySession() {
    return `[data-cy="${this.category}-form"]`;
  }

  enterValue() {
    cy.get(this.categorySession).type('test');
  }
}

这两种写法都能保证categorySession使用的是已赋值的this.category，从而生成正确的选择器[data-cy="Liquidity-form"]。

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