如何在cypress中获取一行并选择特定的td？

Question

我有一个包含 6 列和可变行的表。现在我想让柏树测试删除按钮。所以我在之前的测试中在我的表中创建了一个 testitem 并希望我的程序删除这个 testitem。

如何在第 2 列的表格中搜索、过滤该行并使用 cypress 单击第 6 列中的按钮？

我阅读了 cypress.io 上的文档和指南，但没有找到任何解决方案。

    <div class="row">
        <div class="top-buffer"></div>
        <div class="panel panel-primary">
            <div class="panel-heading panel-head">Article</div>
            <div class="panel-body">
                <div class="btn-group">
    
                    <a asp-action="Edit" asp-route-id="@Guid.Empty" class="btn btn-primary"><i class="" glyphicon glyphicon-plus"></i>NEW</a>
                </div>
                <div class="top-buffer"></div>
                <table class="table table-bordered table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var att in Model)
                        {
                        <tr>
                            <td>@Html.DisplayFor(modelItem => att.1)</td>
                            <td>@Html.DisplayFor(modelItem => att.2)</td>
                            <td>@Html.DisplayFor(modelItem => att.3)</td>
                            <td>@Html.DisplayFor(modelItem => att.4)</td>
                            <td>@Html.DisplayFor(modelItem => att.5)</td>
                            <td>
                                <a asp-action="Edit" asp-route-id="@att.Id" class="btn btn-info"><i class="glyphicon glyphicon-pencil"></i>EDIT</a>
                                <a asp-action="DeleteCategory" asp-route-id="@att.Id" class="btn btn-danger"><i class="glyphicon glyphicon-trash"></i>DELETE</a>
                            </td>
    
                        </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Answer 1

您显示的代码是在服务器上编译的 ASP.Net 源代码，因此浏览器中的 HTML（您的测试需要使用的 HTML）将有所不同。

即为@foreach (var att in Model)模型中的每个项目提供一行，@Html.DisplayFor(modelItem => att.2)并将被转换为第 2 列的一些具体内容。

因此，如果您在浏览器中运行该应用程序并从控制台复制并粘贴该 HTML，则答案会更容易。

由于您想在第 2 列上进行搜索，因此可以通过两种方式进行搜索。

如果第 2 列中的内容非常独特，例如没有出现在其他列中的名称，您可以通过查找文本来定位它

cy.contains('td', 'text-to-search-for')  // gives you the cell 
  .parent()                              // gives you the row
  .within($tr => {                       // filters just that row
    .get('td a')                         // finds the buttons cell of that row
    .contains('DELETE')                  // finds the delete button
    .click()

或者

cy.contains('td', 'text-to-search-for')  // gives you the cell 
  .siblings()                            // gives you all the other cells in the row
  .contains('a', 'DELETE')               // finds the delete button
  .click()

如果您要搜索的文本可以出现在第 2 列以外的列中，这将变得更加困难，但上述内容可能就足够了。

另一件要注意的事情是，如果您的测试场景总是使用相同的数据，例如来自固定文件的数据，您可以针对特定的行号，但这是一个脆弱的测试，如果页面结构发生变化，则需要重新编写。