Search code examples
javascriptcypressend-to-end

Function returns undefined in cypress.io


The following code works fine in a test.

cy.get("table").find(`tr[data-index=0] > :nth-child(1)`).then($td => { 
    cy.get("input").type($td.text().trim() + "{enter}");
});

But this one, same code but wrapped in a function, won't

const getResult = () => {
    cy.get("table", {timeout: 60000}).find(`tr[data-index=0] > :nth-child(1)`, {timeout: 60000}).then($td => {
        return $td.text().trim()
    });
}

it("query", () => {
    cy.get("input").type(getResult() + "{enter}");
})

what am I missing about then() in cypress?

The aim is, of course, getting the content of the first cell of the table and type it in input field.

EDIT: following @jean-smaug suggestion, I tried this invoke/as but I'm getting the error Cannot read property 'text' of undefined. Indeed the function is in a different ES module and the context is different. The code:

// different ES module
export const getResult = () => {
    cy.get("table").find(`tr[data-index=0] > :nth-child(1)`).invoke("text").as("text")
} 

// test
getResult("opencga-file-grid")
cy.get("input").type(this.text + "{enter}");

Solution

  • Your last example works if you drop the alias and treat the return value as a Cypress Chainable.

    // different ES module
    export const getResult = () => {
      return cy.get("table").find(`tr[data-index=0] > :nth-child(1)`).invoke("text");
    } 
    
    // test
    getResult("opencga-file-grid")
      .then(text => {
        cy.get("input").type(text + "{enter}");
      });
    

    Equivalent to this (if all code was in the same file)

    cy.get("table").find(`tr[data-index=0] > :nth-child(1)`).invoke("text")
      .then(text => {
        cy.get("input").type(text + "{enter}");
      });