Cypress自定义carPage类调用getModel报属性不存在错误该如何解决

• 你定义的getModel、get都是carPage类的实例成员，仅类的实例对象可访问。你当前直接将类作为默认导出，导入后直接调用类本身的getModel方法，该方法不存在于类的构造函数对象上，因此抛出类型错误。
• 静态成员直接挂载在类本身，无需实例化即可通过类直接调用，因此你将方法改为静态方法后可正常运行。

你当前封装的选择器存在语法错误：cy.get(cy-data-${key})是匹配标签名为cy-data-xxx的元素，若要匹配带cy-data-xxx属性的元素，需要改为属性选择器格式：

cy.get(`[cy-data-${key}]`)

方案1：保持实例成员，导出类的实例 #

修改carPage类的导出逻辑，直接导出实例化后的对象，导入后即可直接调用方法：

// ../../helpers/carPage 代码
class carPage {
  model = 'model'
  getModel = () => this.get(this.model)
  get = (key) => cy.get(`[cy-data-${key}]`); 
}
// 导出实例而非类本身
export default new carPage()

测试用例无需修改即可正常运行。

方案2：全部改为静态成员 #

将类的所有属性、方法都改为静态成员，无需实例化即可直接通过类调用：

// ../../helpers/carPage 代码
class carPage {
  static model = 'model'
  static getModel = () => this.get(this.model)
  static get = (key) => cy.get(`[cy-data-${key}]`); 
}
export default carPage

测试用例无需修改即可正常运行。

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