How to read/get the text of the element which is in <div> tag

user_6310127 0
Viewed 146

I am new to cypress and Javascript, Please help me I wanted to read the text inside the tag and need to validate/assert that the text should be with the string "Saved" this div tag is the super child of <div role="row"...> tag

Below is the HTML code snippet

    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-class="{'ui-grid-row-selected': row.isSelected}" style="">
      <div role="row" ui-grid-row="row" row-render-index="rowRenderIndex" class="ng-isolate-scope">
        <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell ng-scope ui-grid-disable-selection ui-grid-coluiGrid-0009" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="gridcell" ui-grid-cell="" id="1634105595764-0-uiGrid-0009-cell">
          <div class="ui-grid-cell-contents ng-binding ng-scope">Saved</div></div>

But I am not able to get the element position, Please help me how to get the web element of the third div tag text

I used the above code but cypress throws an error

   cy.get(div).contains('Saved')

Expected to find element: #31 634108833080-0-uiGrid-0009-cell > .ui-grid-cell-contents, but never found it.

cypress css html javascript
3 Answers

In code example that you provided, is div some variable or what?

If I take your html snippet, load it with cypress and call cy.get('div').contains('Saved').should('exist') the test is successful.

user_17577370

You can directly use contains and then check if the text exists or is visible.

cy.contains('.ui-grid-cell-contents', 'Saved').should('exist')
cy.contains('.ui-grid-cell-contents', 'Saved').should('be.visible')
user_45712710

You are looking for the id at the end of the 3rd div, which has this expression

id="1634105595764-0-uiGrid-0009-cell"

but the error message has a 3 in front Expected to find element: #31 634108833080-0-uiGrid-0009-cell.

so have you added 3 in the front of the selector to get the third item?

Maybe you want

cy.get('div[role="gridcell"]')     // will give all cells
  .eq(2)                           // pick the 3rd cell (indexes start at 0)
  .contains('Saved')

or

cy.get('div[role="gridcell"]')     // will give all cells
  .eq(2)                           // pick the 3rd cell (indexes start at 0)
  .find('.ui-grid-cell-contents')
  .contains('Saved')

These give you the inner-most div. If you want the gridcell div instead, add .parent().

user_169977070
Related