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

Question

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>

Answer 1

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.

Answer 2

Your Html only had one row, so clicking that button should be easy if that is the case..
cy.get('.btn').click
I am betting that will cause problem later, because you will probably have more rows.
cy.get('table').find('tr').eq(ROW INDEX).find('td').eq(COLUMN INDEX).find('.btn-danger').click()
Now I don't think this is the best way to do this. I would suggest you add some classes to your code so you can easier get to your elements. For example add a class to the delete button that is class="delete-item" so you can use that in a selector
cy.get('table').find('tr').eq(ROW INDEX).find('td').eq(COLUMN INDEX).find('.delete-item').click()
I am not 100% sure about this answer because I did not try it.