Cypress.io - How do I wait for the result of a method that returns an invoked attribute?

Question

I have a method that gets the href-attribute of an element hrefAppTheme and checks if its one of the values of the 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...
    }
  });

It is safe to assume that this.hrefAppTheme.invoke('attr', 'href') always returns one of the user-themes (a string), because the code above works reliably.

Since it turned out that I need to use that logic in several different places, I want to extract it into a method and put it into the page-object-class. This is what I've got:

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;
  }

I figured that I need to use the cy.wrap()-method to assign the string that is being returned:

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...

However, there is something wrong with this, because the value being returned is always an empty string, not the resolved-value:

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

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

How do you return the resolve-value of myWebelement.invoke('attr', 'href').then(hrefVal => {(...), and how can you assign it to a variable by calling this method?

Or is there a better approach to extract the working code into a method?

Lola Ichingbola · Accepted Answer · 2023-06-09T21:26:32.940

The this.hrefAppTheme is already a Chainer, since it can use .invoke('attr', 'href') after it. You can simplify by just returning it.

The .then(resVal...) that follows is all about modifying the resVal. Move your userTheme var inside there and return it. The return value modifies the result of the previous chainers.

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
      });
  }

Then in the test, just use it like any Custom Command

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

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

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

You can probably now see why that error occurs, since the return value is userTheme = '' when the resVal is undefined.

That can be fixed by returning one on the expcted strings as default:

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;  
      });
  }

`getUserTheme(): string` is not correct since it returns `getUserTheme(): Chainable` in fact — Mikhail Bolotov, Jun 09 '23 at 07:05
Yet this is the better answer - cuts out the unnecessary `cy.then()`, plus it corrects the rookie mistake that throws the `Assertion error`. — Trestle, Jun 09 '23 at 22:55

score 2 · Answer 2 · answered Jun 08 '23 at 16:00

Because of the asynchronous nature of Cypress commands, the return in your function is occurring before the Cypress commands have set the value. In order to return the value, you will have to return the Cypress command chain that is getting the value.

getUserTheme(): string {
    return cy.then(() => {
      return this.hrefAppTheme.invoke('attr', 'href')
        .then(resVal => {
          return resVal ?? '';
        });
    })
  }

However, this does not return a string variable, but a Chainable<string>. This means you won't have to use cy.wrap() around the variable, but can just continue the chain.

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

This elegant solution not only solved the problem but helped me to better understand how deal with the asynchronous behaviour of Cypress.io. Which was actually the main motivation for posting this question. Thank you very much! — Jan and RESTless, Jun 09 '23 at 14:44

Cypress.io - How do I wait for the result of a method that returns an invoked attribute?

2 Answers2