温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - How to get a row and select a specific td in cypress?
cypress row

其他 - 如何在赛普拉斯中获取一行并选择特定的TD?

发布于 2020-04-18 09:45:34

我有一个包含6列和可变行的表。现在,我希望赛普拉斯测试删除按钮。因此,我之前在测试中的表中创建了一个测试项,并希望我的程序删除该测试项。

如何搜索第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>

查看更多

提问者
UD3
被浏览
79
Marion Morrison 2020-02-05 04:30

您显示的代码是在服务器上编译的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列之外的其他列中,则将变得更加困难,但是上述条件就足够了。

还要注意的另一件事是,如果您的测试方案始终使用相同的数据(例如来自Fixture文件中的数据),则可以指定特定的行号,但这是一个脆弱的测试,如果页面结构发生更改,则需要重新编写。