CODEWITHSUNDEEP
cypress
Gregory Boutte
Gregory Boutte

Reputation: 771

Cypress command that return values from DOM

In my DOM i have an input and a div, and i want to get the value of both in one command.

Here is an HTML exemple

<div id="myDiv">Content of the div</div>
<input id="myInput" value="2000" />

Here is what i tried for my command

Cypress.Commands.add("getDomValues", () => {
        var divValue = cy.get('#myDiv').invoke('text')
        var inputValue = cy.get('#myInput').invoke('val')

        return cy.wrap({
            divValue:divValue,
            inputValue:inputValue
        });
        
});

If there is no cy.wrap around my returned object i get this error

Unhandled rejection CypressError: Cypress detected that you invoked one or more cy commands in a custom command but returned a different value.

And then in my test for now i use it like that

cy.getDomValues().then((values)=>{
   console.log(values)
})

In my console inside the returned object i have something like that for both values

$Chainer {userInvocationStack: "    at Context.eval (http://localhost:8888/__cypress/tests?p=cypress/support/index.js:181:24)", specWindow: Window, chainerId: "chainer4419", firstCall: false, useInitialStack: false}

Do you have any idea how i could have a result like that ?

{
   divValue:"Content of the div",
   inputValue:"2000"
}

Upvotes: 2

Views: 2066

Answers (2)

user14783414
user14783414

Reputation:

You need to access the values with .then()

Cypress.Commands.add("getDomValues", () => {
  cy.get('#myDiv').invoke('text').then(divValue => {
    cy.get('#myInput').invoke('val').then(inputValue => {

      // no need to wrap, Cypress does it for you
      return {
        divValue,       // short form if attribute name === variable name
        inputValue
      }
});

The error you received was because you were returning Chainers instead of values.

Upvotes: 2

Alapan Das
Alapan Das

Reputation: 18586

You can use .as() to assign an alias for later use.

cy.get('#myDiv').invoke('text').as('divValue')
cy.get('##myInput').invoke('val').as('inputValue')

Then use these values later separately like -

cy.get('@divValue').then(divValue => {
  //Do something with div value
})

cy.get('@inputValue').then(inputValue => {
  //Do something with input value
})

OR, use these values later together like -

cy.get('@divValue').then(divValue => {
    cy.get('@inputValue').then(inputValue => {
        //Do something with div value
        //Do something with input value
    })
})

Upvotes: 0

Related Questions