Error trying to get attribute from element in Cypress

Question

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.

Ximenez

With some hacking about, I manage to get a working test with cy.get('input').should('have.value', 'myValue'). cy.get() returns an array of subjects (even if selector is specific and only returns one subject), so its() property references are properties of the array, not the subject. It would be better if cypress evaluated its('myProperty') consistent with the way should() evaluates its chainers. – Orellana

Answer 1

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')

Synthetic

'value attribute which will not update with user input' - this does not seem to be correct, according to my test. I'm doing .type('newValue') and seeing the value updated. – Orellana

The actual dom attribute does not get updated. The value property does. Attribute !== Property – Synthetic

Yes, I figured that was what you were trying to say - that user update will not change the original value attribute (Userc7bff2d0-7faf-11e8-9884-8fe4c5df7f77-Updated). However, it should be noted for testing purposes value property can be used. – Orellana

how to use type() after should()? – Penelope

Answer 2

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

Patrizio

Answer 3

If above answers doesn't work try this,

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

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

Cohleen

Answer 4

Now there is a plugin for your need.

https://github.com/Lakitna/cypress-commands/blob/develop/docs/attribute.md

With this, you'll be able to do :

cy.get('input').attribute('placeholder').should('contain', 'username');

Benita

Nice, thanks for sharing that, I'll give it a shot! – Ximenez

Is this official tho? (≖_≖ ) – Eam

Absolutely not. But sometimes a command or a plugin from a tier is cool too. – Benita

Answer 5

Aprt from above suggestions, you can also get the value using prop()

The benefit of using prop() over attr() is that: The prop() will always give you the current value but the attr can sometimes give you the default value no matter how many times you updated it.

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

Sulphurize

Answer 6

#. Find attribute value in cypress - This covers the following things:

1. Find the attribute value.
2. Print the attribute value.
3. Compare two attributes value. Note:- For few attribute value do not capture due to HTML invisible rule. E.g.- viewBox="0 0 24 24".

cy.yourlocator.then(($label) => {

    let downloadReportBtnDataTablePath = $label.attr('d'); //d is attribute

    cy.log("DownloadReportBtnDataTablePath: " + downloadReportBtnDataTablePath) //Print the attribute value

    cy.yourlocator.then(($label) => {
      let exportHighChartReportBtnPath = $label.attr('d');
      cy.log("ExportHighChartReportBtnPath: " + exportHighChartReportBtnPath)

      expect(downloadReportBtnDataTablePath).equals(exportHighChartReportBtnPath); //Compare both attribute value. 
    })
  })

Imperceptive

Answer 7

I got this error too. In my case, the web element had a custom html attribute called table-row-index. I called .invoke() without the attr argument like this .invoke("table-row-index"). To fix the error, I changed it to .invoke("attr", "table-row-index").

Effluence