How to fetch the value of an attribute of an element in cypress?

user_11807541 0
Viewed 1099

I am working on cypress testing for a table in a web page. An example of the elements in the page is as follows:

<div class="MuiDataGrid-cell MuiDataGrid-cellWithRenderer" data-testid="admission-row">
    <div class="MuiDataGrid-cell" role="cell" data-value="2020-11-21" data-field="admissionDate" data-rowindex="0">21-NOV-2020</div>
    <div class="MuiDataGrid-cell" role="cell" data-value="2020-10-15" data-field="admissionDate" data-rowindex="0">15-OCT-2020</div>
    <div class="MuiDataGrid-cell" role="cell" data-value="2020-09-07" data-field="admissionDate" data-rowindex="0">07-SEP-2020</div>
</div>

In the test that I am working on, I want to get the data-value attributes from each of the div elements and store them in a list, this is what I am trying.

let dateList = [];
cy.get("[data-testid='admission-row']").children().each((element) => {
    cy.get(element).invoke("data-value").then((date) => {
    dateList.push(date);
    });
});

However, this is not working and I am facing an error data-value does not exist in your subject. I have also tried with cy.its instead of cy.invoke that failed as well. Any help regarding this bit of code would be incredibly helpful.

cypress automated-tests javascript
2 Answers

Based on @Hiram comments, the code which worked is as follows:

let dateList = [];
cy.get("[data-testid='admission-row']").children().each((element) => {
    cy.get(element).invoke("attr", "data-value").then((date) => {
    dateList.push(date);
    });
});
user_118075410

You have to use .invoke('attr', 'data-value') instead of .invoke('data-value'). Reference from Cypress Docs.

let dateList = [];
cy.get("[data-testid='admission-row']").children().each((element) => {
  cy.wrap(element).invoke('attr', 'data-value').then((date) => {
    dateList.push(date);
  });
});
user_45712710
Related