Question 207260 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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%;">

enter image description here
enter image description here
enter image description here

Tags:

2

Answers


  1. 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");
    Login or Signup to reply.
  2. 0

    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()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search