Cypress.io - 如何等待返回调用属性的方法的结果？

Question

我有一个方法可以获取元素的 href 属性hrefAppTheme并检查它是否是 string-array 的值之一appThemes：

describe('...',() => {
    it('should ...', () => {
      (...)
      let defaultAppTheme = '';
      onMenuPage.hrefAppTheme.invoke('attr', 'href')
        .then(hrefVal => {
          if (typeof hrefVal !== 'undefined') {
            expect(hrefVal).to.be.oneOf(onMenuPage.appThemes);
            defaultAppTheme = hrefVal;

      //referencing the variable 'defaultAppTheme' further below...
    }
  });

可以安全地假设this.hrefAppTheme.invoke('attr', 'href')总是返回用户主题之一（字符串），因为上面的代码工作可靠。

由于事实证明我需要在几个不同的地方使用该逻辑，因此我想将其提取到一个方法中并将其放入页面对象类中。这就是我所拥有的：

export default class MenuPage {
  (...)
  getUserTheme(): string {
    let userTheme = '';
    cy.then(() => {
      this.hrefAppTheme.invoke('attr', 'href')
        .then(resVal => {
          if (typeof resVal !== 'undefined') {
            userTheme = resVal;
          }
        });
    });
    return userTheme;
  }

我认为我需要使用cy.wrap()- 方法来分配返回的字符串：

describe('...',() => {
    it('should ...', () => {
      (...)
      let defaultAppTheme = '';
      cy.wrap(onMenuPage.getUserTheme()).then(resVal => {
        defaultAppTheme = resVal;
        expect(defaultAppTheme).to.be.oneOf(onMenuPage.appThemes);
      });

      //referencing the variable 'defaultAppTheme' further below...

但是，这样做有问题，因为返回的值始终是空字符串，而不是解析的值：

AssertionError: expected '' to be one of [ 'theme-light.css', 'theme-dark.css' ]
      + expected - actual

      +[ 'theme-light.css', 'theme-dark.css' ]

如何返回 (...) 的解析值myWebelement.invoke('attr', 'href').then(hrefVal => {，以及如何通过调用此方法将其分配给变量？

或者是否有更好的方法将工作代码提取到方法中？

Answer 1

它this.hrefAppTheme已经是一个 Chainer，因为它可以.invoke('attr', 'href')在它之后使用。您可以通过返回它来简化。

接下来的内容.then(resVal...)都是关于修改resVal. 将你的userThemevar 移到那里并返回它。返回值修改先前链接器的结果。

export default class MenuPage {
  (...)
  getUserTheme(): Chainable<string> {
    
    return this.hrefAppTheme.invoke('attr','href') // return the whole chain
      .then(resVal => {
        let userTheme = '';
        if (typeof resVal !== 'undefined') {
          userTheme = resVal;
        }
        return userTheme;   // return here to modify the chainer result
      });
  }

然后在测试中，就像任何自定义命令一样使用它

describe('...',() => {
    it('should ...', () => {

      onMenuPage.getUserTheme().then(defaultAppTheme => {
        expect(defaultAppTheme).to.be.oneOf(onMenuPage.appThemes);
      });

AssertionError：预期 '' 为 [ 'theme-light.css', 'theme-dark.css' ] 之一

您现在可能可以明白为什么会发生该错误，因为返回值是userTheme = ''当 resVal 为 时undefined。

可以通过默认返回预期字符串 1 来解决此问题：

export default class MenuPage {
  (...)
  getUserTheme(): Chainable<string> {
    
    return this.hrefAppTheme.invoke('attr','href') 
      .then(resVal => {
        let userTheme = 'theme-light.css';        // change default value
        if (typeof resVal !== 'undefined') {
          userTheme = resVal;
        }
        return userTheme;  
      });
  }