如何在赛普拉斯中获取元素的属性值？答案

【问题标题】：How to fetch the value of an attribute of an element in cypress?如何在赛普拉斯中获取元素的属性值？
【发布时间】：2020-12-07 19:55:30
【问题描述】：

我正在为网页中的表格进行柏树测试。页面中的元素示例如下：

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

在我正在进行的测试中，我想从每个 div 元素中获取 data-value 属性并将它们存储在一个列表中，这就是我正在尝试的。

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

但是，这不起作用，我面临错误data-value does not exist in your subject。我也尝试过使用cy.its 而不是cy.invoke 也失败了。关于这段代码的任何帮助都会非常有帮助。

【问题讨论】：

.invoke('attr', 'data-value') 怎么样？
@HiramK.Hackenbacker 成功了，谢谢！

标签： javascript automated-tests cypress

【解决方案1】：

基于@Hiram cmets，代码如下：

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

【讨论】：

【解决方案2】：

您必须使用.invoke('attr', 'data-value') 而不是.invoke('data-value')。来自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);
  });
});

【讨论】：