Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error trying to get attribute from element in Cypress

Tags:

cypress

I have this HTML element:

<input id="" type="text" name="last_name" value="Userc7bff2d0-7faf-11e8-9884-8fe4c5df7f77-Updated" class="medium" maxlength="2000" autocomplete="off" tabindex="" data-reactid=".0.2.0.1.0.2.1.0.1.0.0.1:0.1.0.1.2:$/=10">

I want to get it's value property to assert that it has been updated by my test.

I have tried using its():

cy
  .get(selector)
  .its("value")
  .should("contain", "-Updated");

But get the error:

CypressError: Timed out retrying: cy.its() errored because the property: 'value' does not exist on your subject.

I have also tried invoke:

cy
  .get(selector)
  .invoke("value")
  .should("contain", "-Updated");

But get a similar error:

CypressError: Timed out retrying: cy.invoke() errored because the property: 'value' does not exist on your subject.

In both cases, the Cypress console output of the get() command shows the element with its value property successfully:

Yielded: input id="" type="text" name="first_name" value="Fake-Updated" class="medium" maxlength="2000" autocomplete="off" tabindex="" data- reactid=".0.2.0.1.0.2.1.0.1.0.0.1:0.1.0.0.2:$/=10"

I'm kind of stumped on this one. Please let me know if you want more info or have an idea what's going on.

like image 501
Brendan Avatar asked Jul 04 '18 17:07

Brendan


People also ask

How do you find the value of an element in Cypress?

If you would like to test/assert the value of an input element, just use . should('have. value', 'input value you test for') .

How do you get text from a tag in Cypress?

Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element.

How do you use the element Cypress?

We can select an element using h1 tag. If we want to select one of our shapes, we can select a single element using either class, id or an attribute. To select an element by class you need to use . prefix and to select an element by its it, you should prefix id with # .


3 Answers

invoke() calls a jquery function on the element. To get the value of an input, use the function val():

cy.get('input').invoke('val').should('contain', 'mytext') 

This is not the same as getting the value attribute which will not update with user input, it only presets the value when the element renders. To get an attribute, you can use the jquery function attr():

cy.get('input').invoke('attr', 'placeholder').should('contain', 'username') 
like image 101
bkucera Avatar answered Sep 16 '22 15:09

bkucera


you can use this

cy.get('a') // yields the element
  .should('have.attr', 'href') // yields the "href" attribute
  .and('equal', '/home') // checks the "href" value

or

cy.get('a').should('have.attr', 'href', '/home')

for more details check this: https://docs.cypress.io/api/commands/should#Method-and-Value

like image 36
Sajad Saderi Avatar answered Sep 18 '22 15:09

Sajad Saderi


If above answers doesn't work try this,

cy.get('input[placeholder*="Name"]')

Find the input with a placeholder attribute containing the word "Name".

like image 45
lakjeewa Wijebandara Avatar answered Sep 18 '22 15:09

lakjeewa Wijebandara