How can I find a button inside a div element searching by specific name in a row?

Question

The page returns several records within a div element. I am trying to fetch the line that contains the name Kiyara.Hu and click on the respective edit button of that name.

I tried the command below but it didn't work.

cy.contains('div','Kiyara.Hu').find('button').click()

Below is the HTML code and screenshots of the site.

<div class="oxd-table-cell oxd-padding-cell" role="cell">
  <div class="oxd-table-card-cell-checkbox">
    <div class="oxd-checkbox-wrapper" data-v-6179b72a=""><label class="" data-v-6179b72a=""><!----><input type="checkbox" value="22" data-v-6179b72a=""><span
      class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"
      data-v-6179b72a=""><i class="oxd-icon bi-check oxd-checkbox-input-icon"
          data-v-bddebfba="" data-v-6179b72a=""></i></span></label></div>
  </div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
  <div data-v-6c07a142="">Kiyara.Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
  <div data-v-6c07a142="">ESS</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
  <div data-v-6c07a142="">Kiyara Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">

score 4 · Accepted Answer · answered Jul 13 '23 at 20:52

With so many divs in the picture, you will have to be more specific about which one your test needs to target.

Same with the button, since there are two per line.

I'm presuming the line in the table is represented by class oxd-table-card, if that's not the case you can re-examine the DOM to find the appropriate element.

cy.contains('div.oxd-table-card', 'Kiyara.Hu')
  .find('button').eq(1)
  .click()

ControlAltDel · Answer 2 · 2023-07-13T18:29:36.913

0

Here's how you can do it:

var divs = [...document.querySelectorAll("DIV")];
divs = divs.filter(function(a) {
  return a.innerText.includes('Kiyara.Hu');
});
//maybe check that your div has been found first, then
divs[0].querySelector("Button");

edited Jul 13 '23 at 18:29

answered Jul 13 '23 at 17:01

ControlAltDel

33,923
10
53
80

It didn't work for me. Displays the error message: divs.filter is not a function. – Kakashi - Sensei Jul 13 '23 at 17:56
@Kakashi-Sensei I have updated my answer: I/You need to convert the NodeList (from querySelectorAll) to an Array. – ControlAltDel Jul 13 '23 at 18:01
Now it is showing the following error message: Cannot read properties of undefined (reading 'querySelector') – Kakashi - Sensei Jul 13 '23 at 18:20
@Kakashi-Sensei 3rd time's the charm (I hope) – ControlAltDel Jul 13 '23 at 18:30
I couldn't understand your answer. – Kakashi - Sensei Jul 13 '23 at 19:08
This code works now – ControlAltDel Jul 13 '23 at 19:31

How can I find a button inside a div element searching by specific name in a row?

2 Answers2