Warm tip: This article is reproduced from stackoverflow.com, please click
cypress row

How to get a row and select a specific td in cypress?

发布于 2020-04-18 09:29:44

I have a table with 6 columns and variable rows. Now i want cypress to test the delete button. so i create a testitem in my table in the test before and want my program to delete this testitem.

How can i search in a table in column 2, filter the row and click on the button in column 6 with cypress?

I read the docu and guide on cypress.io but i have not find any solutions.

    <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>
Questioner
UD3
Viewed
408
Marion Morrison 2020-02-05 04:30

The code you show is ASP.Net source which gets compiled on the server, so the HTML in the browser (the HTML your test needs to work with) will be different.

i.e @foreach (var att in Model) gives you a row for each item in Model and @Html.DisplayFor(modelItem => att.2) will be translated into some concrete content for column 2.

Therefore, it would be easier to answer if you run the app in a browser and copy and paste that HTML from the console.

Since you want to search on column 2, that can go two ways.

If the content in column 2 is very unique, e.g names that do not appear in other columns, you can target it just by looking for the text

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

OR

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

If text you want to search for can appear in columns other than column 2, it becomes more difficult, but chances are the above will suffice.

The other thing to note, if your test scenario always uses the same data, e.g from a fixture file, you can target specific row numbers but that's a fragile test which will need re-writing if the structure of the page changes.