javascript - Cypress how to store values yielded by a function into a variable - Stack Overflow

This has been bugging me from a long time. I am not well versed with javascript. Here it goes:

1. How do i store return value of a function into a variable:

   lenValue = cy.get(selector).children().length

Above line of code returns undefined But when i try following in cypress test runner console then I get a valid output:

cy.$$(selector).children().length --> gives me correct number

2. How to return value from inside a then function and catch it to reuse later:

file1.js

function a(selector, attrName){
cy.get(selector).then(function ($el){
return $el.attr(attrName));
}

file2.js

state = file1Obj.a('#name','name')

This has been bugging me from a long time. I am not well versed with javascript. Here it goes:

1. How do i store return value of a function into a variable:

   lenValue = cy.get(selector).children().length

Above line of code returns undefined But when i try following in cypress test runner console then I get a valid output:

cy.$$(selector).children().length --> gives me correct number

2. How to return value from inside a then function and catch it to reuse later:

file1.js

function a(selector, attrName){
cy.get(selector).then(function ($el){
return $el.attr(attrName));
}

file2.js

state = file1Obj.a('#name','name')

• javascript
• return-value
• cypress

Share Improve this question Follow asked Mar 23, 2021 at 13:58 bucky barnsbucky barns 39388 silver badges1919 bronze badges 1

• Just to check since you are new to javascript, do you have lenValue declared as a variable anywhere using var let or const? so like let lenValue = ... – aeischeid Commented Mar 23, 2021 at 15:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

@aeischeid shows you the wrong way to do it.

His code works only for a static site, but web pages are rarely static. As soon as API fetches are involved, lucky timing goes out the window and the test bombs.

This is why Cypress mands have automatic retry. Otherwise we could just build tests with jQuery.

---

Since cy.$$(selector).children().length --> gives me correct number, use that inside the helper function.

function a(selector, attrName) {
  return cy.$$(selector).attr(attrName);      // jQuery methods used
}

Or

function a(selector, attrName) {
  return Cypress.$(selector).attr(attrName);  // jQuery methods used
}

But be aware that jQuery only handles static pages, it does not retry if the attribute that you want to query arrives slowly.

For that use a mand

cy.get('#name')
  .should('have.attr', 'name')     // retries until name exists
  .then(name => {                  // guaranteed to have a value
    // use name here
  })

What you're doing makes plete sense, but simply put, you cannot. (per the docs). https://docs.cypress.io/guides/core-concepts/variables-and-aliases/#Return-Values

You can, however, use aliases to acplish what (I think) you're after.
https://docs.cypress.io/guides/core-concepts/variables-and-aliases/#Aliases

Here is a example from a cypress test I have that seems pretty relevant

    let oldDescription;
    cy.get('input#description').should(($input) => {
      oldDescription = $input.val();
    });
    let randomDescription = Math.random().toString(36).substring(7);
    cy.get('input#description').clear().type(randomDescription);
    cy.get('input#description')
      .parents('.ant-table-row')
      .contains('Save').click();

    cy.get('input#description').should('not.exist');
    cy.contains(`${randomDescription}`);
    cy.contains(`${oldDescription}`).should('not.exist');

because oldDescription is set inside of an asyncronous callback it isn't safe to expect it to be set, farther down the code outside of that callback, but in a lot of cases with cypress you end up having some other .get call or thing that waits, effectively pausing the code long enough that you can get away with not worrying about it.