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

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.

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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

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().