How do I select the right elements with querySelectorAll as I do by using the Chrome developers console?

Question

I'm currently using cypress to test salesforce, and I'm running into a certain circumstance where I don't know the Party record ID that will create it within the opportunity. Meaning that I have to find a workaround to select a specific party record to be able to edit the file.

If I use the Chrome tools or doing the following within cypress, I'm able to do call the element but it will not open or click anything:

       cy.document().then((doc) => {
                const edit = doc.querySelectorAll("a")[41]
                const click = doc.querySelectorAll("a")[42]
                edit.click()
                click.click()

            })

The problem is that cypress does not make any click, and I can't move forward. Does anyone know what we can do in these scenarios?

This is the down arrow elements:

Answer 1

You can use eq() to directly get the second dropdown and execute click() on it.

cy.get('svg[data-key="down"]')             // select all dropdowns
  .eq(1)                                   // select the second
  .click();

or you might need to target the <use href...> element,

cy.get('svg[data-key="down"]')             // select all dropdowns
  .eq(1)                                   // select the second
  .find('use')                             // since this element has the href
  .click();

Answer 2

You can use each() to iterate over all the dropdowns and based on the index, do a click() like:

cy.get('svg[data-key="down"]').each(($ele, index) => {
  if (index == 2) { //For second down arrow 
    cy.wrap($ele).click() //Clicks the second down arrow
    //Do Something else
  }
})

If the normal click is not working you can use click({force: true}).

Or, if the above doesn't work then I guess you have then you have to use shadow() to go inside shadow dom and then perform click() -

cy.get('svg[data-key="down"]').each(($ele, index) => {
  if (index == 2) {
    cy.wrap($ele).shadow().find('svg#down').click()
    //Do Something else
  }
})