如何读取/获取 <div> 标签中元素的文本答案

【问题标题】：How to read/get the text of the element which is in <div> tag如何读取/获取 <div> 标签中元素的文本
【发布时间】：2021-10-13 07:53:16
【问题描述】：

我是 cypress 和 Javascript 的新手，请帮助我我想阅读标签内的文本，需要验证/断言文本应该带有字符串“已保存”这个 div 标签是

标签的超级子标签

下面是html代码sn-p

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

但是我无法获取元素位置，请帮我如何获取第三个div标签文本的web元素

我使用了上面的代码，但是 cypress 抛出了一个错误

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

应找到元素：#31 634108833080-0-uiGrid-0009-cell > .ui-grid-cell-contents，但从未找到。

【问题讨论】：

标签： javascript html css cypress

【解决方案1】：

你正在寻找第 3 个 div 末尾的 id，它有这个表达式

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

但错误消息前面有一个 3预计会找到元素：#31 634108833080-0-uiGrid-0009-cell。

那么你有没有在选择器前面添加3来获取第三项？

也许你想要

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

这些为您提供最内层的 div。如果您想要 gridcell div，请添加 .parent()。

【讨论】：

谢谢，但是id“#1634105595764-0-uiGrid-0009-cell”是动态生成的，怎么处理？唯一常见的格式是#xxxxxxxxx--0-uiGrid-0009-cell"
你可以改用role属性，我会更新例子。
不要忘记行上还有ng-repeat - 您是否已经选择了行，或者您正在遍历所有行？

【解决方案2】：

在您提供的代码示例中，div 是某个变量还是什么？

如果我拿了你的 html sn-p，用 cypress 加载它并调用 cy.get('div').contains('Saved').should('exist') 测试成功。

【讨论】：

【解决方案3】：

您可以直接使用 contains ，然后检查文本是否存在或是否可见。

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

【讨论】：