[User Journeys] - How Iframe works

To perform actions insides iframes, you have to use css selector either inside or outside of the iframe, but never "through" both contexts.

Let's take an exemple, with the following HTML :

<div class="main">
  <form id="my-form"></form>
  <iframe>
    <div class="frame-content">
      <form id="my-form">
      </form>
    </div>
  </iframe>
</div>

.main iframe

✅ ⇒ correctly return the iframe

#my-form

✅ ⇒ correctly return the 1st my-form (the one outside the iframe)

.main iframe .frame-content

❌ ⇒ not working, because .frame-content belongs to the iframe document

.frame-content #my-form

✅ ⇒correctly return the form inside the iframe

iframe #my-form

❌ ⇒ not working because #my-form is already inside the iframe document

⚠️ When you need an element which is inside an iframe, we have to consider that everything outside the iframe content does not exist.