3

Scenario: I am trying to access an element with id "popin_tc_privacy_button_2" but cypress throws the error "Timed out retrying after 120000ms: Expected to find element: #popin_tc_privacy_button_2, but never found it." Though I am manually able to locate the element during the cypress run.

Note: This button is present inside a popup modal (popping up in the same page no new tab or navigation involved).

** Parent Element inside the body **

<div id="tc-privacy-wrapper" class="tc-privacy-wrapper tc-privacy-override">
   <div id="popin_tc_privacy" class="tc-reset-css tc-privacy-banner tc-privacy-popin tc-privacy-mid" aria-describedby="description" role="dialog" aria-modal="true" style="top: 42.5px; left: 980px;">
      <div id="popin_tc_privacy_container_text" class="tc-reset-css tc-privacy-block-text">
         <div id="popin_tc_privacy_text" class="tc-reset-css tc-privacy-text">
            <p style="font-size: 12px;"> **** <a class="info" href="****" type="button">Informativa privacy</a></p>
            <p id="rifiutabtn" style="text-align: center; display: block; position: absolute; bottom: 0; left: 0; width: 100%; margin-bottom: 30px; font-weight: bold; font-size: 12px;" align="center"></p>
         </div>
      </div>
      <div id="popin_tc_privacy_container_button" class="tc-reset-css tc-privacy-block-button">
          <button id="popin_tc_privacy_button" class="tc-reset-css tc-privacy-button" type="button" title="Impostazioni dei cookies">Impostazioni dei cookies</button>
          <button id="popin_tc_privacy_button_2" class="tc-reset-css tc-privacy-button" type="button" title="Accetta tutti i cookies">Accetta tutti i cookies</button>
          <button id="popin_tc_privacy_button_3" class="tc-reset-css tc-privacy-button" type="button" title="Rifiuta tutti i cookies">Rifiuta tutti i cookies</button></div>
      <div id="popin_tc_privacy_btn_close" class="tc-reset-css tc-privacy-button-close"><img id="tc_privacy_close" width="20" height="20" title="" alt="" src="***"></div>
   </div>
</div>

Element:

<button id="popin_tc_privacy_button_2" 
  class="tc-reset-css tc-privacy-button" type="button" 
  title="Accetta tutti i cookies">Accetta tutti i cookies</button>

Xpath: /html/body/div[4]/div/div[2]

selector : #popin_tc_privacy_button_2

Solutions Tried:

  1. cy.wait()
  2. cy.get("#popin_tc_privacy_button_2",{withinSubject:null, includeShadowDom:true, timeout: 120000}).click()
  3. cy.wrap(window.top.document.querySelector('button[id="popin_tc_privacy_button_2"]')).click({ force: true })
  4. Tried intercepting the api call related to the modal - cy.intercept('POST', "****", (req) => { cy.get("#popin_tc_privacy_button_2",{withinSubject:null, includeShadowDom:true, timeout: 120000}).click() })

Cypress: 12.9.0 Browser: Chrome/Edge

Expectation: Cypress to identify the element in the modal.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
ssa1234
  • 33
  • 5
  • Is the element within the shadow dom, or an iframe? – agoff Apr 26 '23 at 15:28
  • It is not in an iframe. I am trying to figure out if it is inside a shadow dom - but just to confirm that only I had also included the "includeShadowDom:true" option. – ssa1234 Apr 26 '23 at 16:12

2 Answers2

4

This particular overlay (with modal inside) is added outside of the <body> tag.

You can tell, if you make the Cypress window smaller or open devtools the modal shifts over the Cypress log.
It doesn't stay confined to the body of the app under test.

To select it, use the withinSubject option to specify the Cypress runner document body instead of the <body> of the app under test (which is the default root for all Cypress queries).

This code passes:

cy.get("#popin_tc_privacy_button_2", {withinSubject: parent.document.body})
  .click()
user16695029
  • 3,365
  • 5
  • 21
0

its kind of ugly and very basic but shouldnt cy.get("button").contains("Accetta tutti i cookies").click() work?

skkrrea
  • 170
  • 9
  • Ideally it should have. But unfortunately, it is not working since this button is inside the modal. It says that it is not able to find the element. However, In the devtools elements tab, I am able to manually locate the element during the run. – ssa1234 Apr 27 '23 at 06:52
  • thats weird! im currently not able to test things out for you but one thing you could try is by doing it with .then(), like in [this](https://stackoverflow.com/questions/70143485/cypress-unable-to-select-elements-in-modal) first answer. if that doesnt work i have no more ideas, Hope it works soon, have a great day – skkrrea Apr 27 '23 at 07:10
  • Thanks for your help. My code fails in the get itself. So its not going to the then part. – ssa1234 Apr 27 '23 at 07:39