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