Typescript Cypress页面对象模型模式.扩展Elements属性

This seems to be a result of this issue
Accessing property on super should be a type error #35314 Nov 24, 2019

如果您点击TS Playground链接，它将以最新的TS版本打开，console.log(super.n)显示错误.如果您将版本更改为3.7.5，则错误将消失.

但是，如果您查看手册Overriding Methods，则允许对101进行同等访问，因此上面的更改似乎造成了异常

class Base {
  greet() {
    console.log("Hello, world!");
  }
}
 
class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
    }
  }
}

具体而言，在Cypress中，您可以使用this.elements而不是super.elements，因为派生类继承了基类元素属性:

Testing (with string return values instead of Chainers)个

export default class SpecificWidget extends AbstractWidget {
  elements = {
    ...this.elements,
    assetSearch: () => 'assetSearch',
  }

  constructor(widgetId: number) {
    super(widgetId)
  }
}

export default abstract class AbstractWidget {
  private widgetId: number

  elements = {
    widget: () => `widgetbox-container-${this.widgetId}`,
  }

  constructor(widgetId: number) {
    this.widgetId = widgetId
  }
}

const specific = new SpecificWidget(1)
expect(specific.elements.widget()).to.eq('widgetbox-container-1')
expect(specific.elements.assetSearch()).to.eq('assetSearch')

或者你可以在基类中创建一个"helper方法"

export default abstract class AbstractWidget {
  private widgetId: number

  elements = {
    widget: () => `widgetbox-container-${this.widgetId}`,
  }

  getElements() {
    return this.elements
  }

  constructor(widgetId: number) {
    this.widgetId = widgetId
  }
}

export default class SpecificWidget extends AbstractWidget {
  elements = {
    ...super.getElements(),
    assetSearch: () => 'assetSearch',
  }

  constructor(widgetId: number) {
    super(widgetId)
  }
}

另请注意，像这样返回Chainers

widget: () => cy.getDataTestId(`widgetbox-container-${this.widgetId}`),

如果返回的Chainer由于页面更改而无效，则可能导致意外问题.

见Variables and aliases - Return values

Return Values
You cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously.

如果您打算在调用widgit()和使用结果之间立即链接而没有页面操作，这是可以的，但这意味着任何使用该类的人都必须记住这一点.

Cypress专门针对这个问题将默认值更改为type: query.

如果别名在使用时变得陈旧，则重新运行chainer以获取查询结果的新副本.但这不会自动发生在你的100.