Cypress | Click on a button in a column inside a row on specific condition

Question

I've a table that includes multiple rows and columns.

I want to trigger the following scenario:

Get the row that has any of its columns match specific keywords.
Click on a button inside this row.

Here is my table structure:

And here is my code snippet

clickOnDeleteIcon(email: string)  {
        cy.get('tbody.MuiTableBody-root tr td', { timeout: 20000})
            .filter(`:contains(${email})`)
            .parentsUntil('tbody.MuiTableBody-root tr')
            .find('button[title = "Delete"]')
            .click()
    }

I also tried

clickOnDeleteIcon(email: string)  {
        cy.contains('tbody.MuiTableBody-root tr td', email).parent('tr')
            .find('button[title = "Delete"]')
            .click()
    }

But, I'm getting timeout in filter

Timed out retrying after 10000ms: Expected to find element: :contains(Julie_Williamson88@gmail.com), but never found it. Queried from element: [ <td.MuiTableCell-root.MuiTableCell-body.MuiTableCell-paddingNone>, 1535 more... ]

You need to delete all the emails or a specific email ? – Alapan Das Oct 18 '21 at 17:29 — Alapan Das, Oct 18 '21 at 17:29
@AlapanDas Specific email, the one I pass to the function. – Mona101ma Oct 18 '21 at 17:29 — Mona101ma, Oct 18 '21 at 17:29

score 1 · Answer 1 · answered Oct 18 '21 at 17:30

1

the filter() command uses css, but :contains does not seem to be valid css as stated here.

You should use contains() command from cypress to query elements by their text content.

I would use it like this:

cy.get('tbody.MuitableBody-root')
    .contains('tr', email)
    .find('button[title="Delete"]')
    .click();

answered Oct 18 '21 at 17:30

PeaceAndQuiet

1,692
8
13

It cause a timeout as well. – Mona101ma Oct 18 '21 at 17:34

Alapan Das · Accepted Answer · 2021-10-18T18:27:28.290

-1

You can do something like this:

cy.get('tbody.MuiTableBody-root tr', {
  timeout: 15000,
})
  .should('be.visible')
  .each(($ele, index) => {
    if ($ele.text().toLowerCase().trim().includes('ursula_white@gmail.com')) {
      cy.wrap($ele).within(() => {
        cy.get('[title="Delete"]').click()
      })
    }
  })

edited Oct 18 '21 at 18:27

answered Oct 18 '21 at 17:33

Alapan Das

17,144
3
29
52

@Alan When I use `cy.get('tbody.MuiTableBody-root tr')`, the matched results aren't retrieved. I just tried this and the cy.log isn't executed as well. ``` clickOnDeleteIcon(email: string) { cy.get('tbody.MuiTableBody-root tr').each(($ele) => { cy.wrap($ele).within(() => { if ($ele.text().includes(email)) { cy.log('eh da ba2a') cy.get('button[title="Delete"]').click() } }) }) } ``` – Mona101ma Oct 18 '21 at 17:43
I want to access the parent of `$ele` in the if statement? – Mona101ma Oct 18 '21 at 17:48
Added an assertion. basically now instead of `td` we are looping through `tr` and getting the entire inner text of the row. Now if the row has the email, we scope our search to that row using `within` and then click the delete button. Updated the answer. can you try. Also changed the position of the if statement. – Alapan Das Oct 18 '21 at 17:49
Same thing, the code inside this condition isn't executed `$ele.text().includes(email)` – Mona101ma Oct 18 '21 at 17:57
please post the error screenshot. upload it to imgur and add in the comments. And also please hardcode the email for now and try instead of using the parameter. – Alapan Das Oct 18 '21 at 17:58
Here you go https://imgur.com/a/W0u95s8 – Mona101ma Oct 18 '21 at 18:02
Let's debug this. Can you execute this? This should print 1 to 251. I want to check if `.each` is working or not. `cy.get('tbody.MuiTableBody-root tr', { timeout: 15000, }) .should('be.visible') .each(($ele, index) => { cy.log(index) })` – Alapan Das Oct 18 '21 at 18:05
I executed this ```clickOnDeleteIcon(email: string) { cy.get('tbody.MuiTableBody-root tr', { timeout: 15000, }) .should('be.visible') .each(($ele, index) => { cy.log(index.toString()) if ($ele.text().includes(email)) { cy.log('email found') cy.wrap($ele).within(() => { cy.get('button[title="Delete"]').click() }) } }) }``` – Mona101ma Oct 18 '21 at 18:10
The logs inside `.each` are working while the one inside the if condition isn't – Mona101ma Oct 18 '21 at 18:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238283/discussion-between-alapan-das-and-mona101ma). – Alapan Das Oct 18 '21 at 18:11

Cypress | Click on a button in a column inside a row on specific condition

2 Answers2