How to get the value of an element only if another specific element is visible?

Question

What I am working with:

<ul class="abc">
 <li class="xyz">
  <a href="www.something.com">
   <div>
    <h2>
     <div>
      <div class="theText">
       <div>Get this text</DIV>
      </div>
     </div>
    </h2>
   </div>
  </a> 
  <button aria-label="remove">...</button>
 </li>
 <li class="xyz">...Same stuff here as above li...</li>
 <li class="xyz">...Same stuff here as above li...</li>
 <li class="xyz">...Same stuff here as above li...</li>
</ul>

The button here has two states for the aria-label attribute which is remove (for when the button is clicked) and add (for when the button is not yet clicked).

What I want to achieve:
I want to get the value within the <a> tag, which in this case is "Get this text", BUT only if the button within its same <li> tag is set to aria-label="remove". I will also be storing the values that I get within an array to later on compare with another array.

What I have tried:

let myArray: any = []

cy.get('li[class="xyz"]').each(($element) => {
    cy.get('li[class="xyz"]').within(($element) => {
        cy.wrap($element)
            .find('button[aria-label="remove"]')
            .find('div[class="theText"]')
            .invoke('text').then(text => {
                myArray.push(text)
            })
    })
}).then(() => {
    cy.wrap(myArray).as('myArray')
})

With the above code, I am getting this Assertion Error from Cypress.

Haven't used cypress. However if I understand but first why don't you do cy.get('li.xyz')? Also You are querying all the specific li items and for each one you are trying to find another `.xyz` element? however based on the provided markup no other .xyz exist — Manos Kounelakis, Oct 14 '22 at 04:15
You can remove the `cy.get('li[class="xyz"]').within()` line since you are wrapping `$element` and using `.find()` - within and find do pretty much the same thing. — Roberta D, Oct 14 '22 at 07:57

TesterDick · Answer 1 · 2022-10-14T22:59:06.150

Use the cypress-if package

let myArray: any = []

cy.get('li[class="xyz"]').each(($element) => {
  cy.wrap($element).within(() => {    

    cy.get('button[aria-label="remove"]')
      .if()                     // any chained commands will only run 
                                // if [aria-label="remove"] exists
                                // but the test does not fail 
                                // if [aria-label="remove"] does not exist
      
      .parent()                 // move up to parent to avoid your error msg
      .find('div[class="theText"] div')
      .invoke('text').then(text => {
        myArray.push(text)
      })
  })
}).then(() => {
  cy.wrap(myArray).as('myArray')
})

cy.get('@myArray')
  .should('deep.eq', ['Get this text'])    // passes

Sample HTML for testing

<ul class="abc">
  <li class="xyz">
    <a href="www.something.com">
      <div>
        <h2>
          <div>
            <div class="theText">
              <div>Get this text</DIV>
            </div>
          </div>
        </h2>
      </div>
    </a>
    <button aria-label="remove">...</button>
  </li>
  <li class="xyz">
    <a href="www.somethingelse.com">
      <div>
        <h2>
          <div>
            <div class="theText">
              <div>Not this text</DIV>
            </div>
          </div>
        </h2>
      </div>
    </a>
    <button aria-label="add">...</button>
  </li>
</ul>

Result: ['Get this text']

Note I added and extra div here .find('div[class="theText"] div') to avoid whitespace around the text, but it doesn't alter the conditional check.

You have a bug somewhere, it works for me - will add the sample I tested it on. — TesterDick, Oct 14 '22 at 19:48

score 2 · Answer 2 · answered Oct 14 '22 at 08:03

This is the "old" way to do conditional checking, but the .if() command is better because it has built-in retry when loading asynchronous data.

let myArray: any = []

cy.get('li[class="xyz"]').each(($element) => {

  // Use jquery to check the button has remove attribute
  const removeButton = $element.find('button[aria-label="remove"]')
  if (removeButton.length) {

    cy.wrap($element).find('div[class="theText"]')
      .invoke('text').then(text => {
        myArray.push(text)
      })
  }
}).then(() => {
  cy.wrap(myArray).as('myArray')
})

score 2 · Accepted Answer · answered Oct 14 '22 at 08:16

If you want to use the :has() pseudo-selector, you should do so on the outer of the .each() loop.

But please beware, :has() pseudo-selector will fail if there are zero buttons already clicked.

let myArray: any = []

cy.get('li[class="xyz"]:has(button[aria-label="remove"])')  // implied filter
  .each($li => {
    // only element with remove attribute inside here
    cy.wrap($li)
      .find('div[class="theText"]')
      .invoke('text')
      .then(text => {
        myArray.push(text)
      })
  })
}).then(() => {
  cy.wrap(myArray).as('myArray')
})

Nick Vu · Answer 4 · 2022-10-15T06:32:53.023

You can use has in your selector

let myArray: any = []

cy.get('li[class="xyz"]:has(button[aria-label="remove"])').each(($element) => {
    cy.get('li[class="xyz"]:has(button[aria-label="remove"])').within(($element) => {
        cy.wrap($element)
            .find('div[class="theText"]')
            .invoke('text').then(text => {
                myArray.push(text)
            })
    })
}).then(() => {
    cy.wrap(myArray).as('myArray')
})

Or you can use parentsUntil to get back to the parent element after finding the related element with aria-label="remove"

let myArray: any = []

cy.get('li[class="xyz"]').each(($element) => {
    cy.get('li[class="xyz"]').within(($element) => {
        cy.wrap($element)
            .find('button[aria-label="remove"]')
            .parentsUntil('li[class="xyz"]')
            .find('div[class="theText"]')
            .invoke('text').then(text => {
                myArray.push(text)
            })
    })
}).then(() => {
    cy.wrap(myArray).as('myArray')
})

I modified my answer with `has` in the first `cy.get` as well. I think it would help you to check elements with certain conditions only. @krisc — Nick Vu, Oct 15 '22 at 06:33

score 1 · Answer 5 · answered Oct 14 '22 at 04:34

let myArray = []

const buttonCheck = document.querySelector("button").getAttribute("aria-label");
    
if(buttonCheck === "remove"){
   const aTagInnerText = document.querySelector("a").innerText;
   myArray.push(aTagInnerText.trim(" "));
}

console.log(myArray)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

</head>
<body>
<ul class="abc">
 <li class="xyz">
  <a href="www.something.com">
   <div>
    <h2>
     <div>
      <div class="theText">
       <div>Get this text</DIV>
      </div>
     </div>
    </h2>
   </div>
  </a> 
  <button aria-label="remove">...</button>
 </li>
 <li>...Same stuff here as above li...</li>
 <li>...Same stuff here as above li...</li>
 <li>...Same stuff here as above li...</li>
</ul>
</body>

</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 17 '22 at 22:22

How to get the value of an element only if another specific element is visible?

5 Answers5