Returning value from a page class function in Cypress and using it another page class function-CodePudding

I'm trying to return a value from one page class function and to use it in another page class function.

But when I try returning primitives value; its always shows as undefined as cypress commands are asynchronous and return statement is synchronous. When I tried aliases the aliases in page class 1 is not visible in page class-2.

What is the correct way of returning values from page class function in cypress. Below is sample code.

     /// <reference types="Cypress" />

     import Page1 from "../pages/Page1";
     import Page2  from "../pages/Page2";

     let page1 = new Page1();
     let page2 = new Page2();

     describe('SampleTesSuite', function(){

     beforeEach(() => {
        cy.clearCookies();
        cy.visit("https://cypress.io");
        cy.log("Application launched")
        cy.viewport(1280, 1024)
    });

    it('Test1', function(){

     let divTitle = page1.getValue();
     page2.processValue(divTitle);
     
    });

    });

    /// <reference types="Cypress" />

    class Page1
    {

     getValue()
     {  
        let divTitle;

        cy.get("section[class^='Hero']  div[class='container']>h1>div")
          .invoke('text').then((text) => {
            divTitle = text;
          });

        return divTitle;
      }
     }

     export default Page1;

    /// <reference types="Cypress" />

    class Page2
    {
      processValue(title)
      {
        cy.log("The value fetched from Pageclass-1" title);
      }

    }

      export default Page2;

CodePudding user response：

You can't return synchronous value from asynchronous code. Once part of your method is async, then method return value is async and must be treated as such.

page1

getValue() {  
  // returns a wrapped version of the text
  return cy.get("section[class^='Hero'] div[class='container'] > h1 > div")
    .invoke('text')
}

test

page1.getValue().then(divTitle => {  // wrapped text must be accessed with .then()
  page2.processValue(divTitle);
})

You can make use of an alias with .as(), but it's still async code.

page1

getValue() {  
  // no return value, but sets a Cypress alias (asynchronously)
  cy.get("section[class^='Hero'] div[class='container'] > h1 > div")
    .invoke('text')
    .as('divTitle')
}

test

page1.getValue()
cy.get('@divTitle').then(divTitle => {  
  page2.processValue(divTitle);
})

Since you use it('...', function() { the alias value will be available as this.divTitle.

However, it's still async so you access it like this

test

page1.getValue()
cy.then(() => {    // cy.then() waits for the alias value to be set
  page2.processValue(this.divTitle);
})

CodePudding user response：

/// <reference types="Cypress" />

import Page1 from "../pages/Page1";
import Page2  from "../pages/Page2";

let page1 = new Page1();
let page2 = new Page2();

describe('SampleTesSuite', function(){

    beforeEach(() => {
        cy.clearCookies();
        cy.visit("https://cypress.io");
        cy.log("Application launched")
        cy.viewport(1280, 1024)
    });

    it('Test1', function(){

     let titles = page1.getValue();

     page2.processValue(titles);

    });

});

/// <reference types="Cypress" />

class Page1
{

    getValue()
    {  
       let titles = [];

        cy.get("section[class^='Hero']  div[class='container']>h1>div").invoke('text').then((text) => {
            titles.push(text);
        });

        return titles;
   }
}

export default Page1;

/// <reference types="Cypress" />

class Page2
{
    processValue(titles)
    {
       cy.then(() => {
           cy.log("The value fetched from Page-1 is=" titles[0])
        });
    }

}

export default Page2;