CODEWITHSUNDEEP
cypress
bonum_cete
bonum_cete

Reputation: 4962

Cypress test targeting iframe embedded within a local html file

For reference I am using these blogs for reference:

https://www.mariedrake.com/post/testing-iframes-with-cypress https://dev.to/mkubdev/cypress-iframes-1ole

I have a local file with an embeded iframe like so

test.html

<div>
  <iframe
    style="height: 100%; width: 100%; min-height: 375px; min-width: 375px"
    title="Embedded"
    frameborder="0"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; execution-while-out-of-viewport; execution-while-not-rendered;"
    allowfullscreen
    mozallowfullscreen="true"
    webkitallowfullscreen="true"
    src="redacted"
    data-test="embeddedPresentation"
  >
  </iframe>
</div>

spec trying to access the iframe

it("gets the embeded site", { baseUrl: null }, () => {
  cy.visit("../cypress/text.html");

  cy.get("[data-test=embeddedPresentation]")
    .its("0.contentDocument")
    .should("be.visible")
    .then(cy.wrap);
});

results in

enter image description here

Why is contentDocument null?

Upvotes: 0

Views: 225

Answers (1)

Fody
Fody

Reputation: 31904

You seem to be missing the attribute data-test=embeddedPresentation. Can you add it to the iframe?

<div>
  <iframe
    data-test="embeddedPresentation"
    style="height: 100%; width: 100%; min-height: 375px; min-width: 375px"
    title="Embedded presentation 'In the weeds'"
    frameborder="0"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; execution-while-out-of-viewport; execution-while-not-rendered;"
    allowfullscreen
    mozallowfullscreen="true"
    webkitallowfullscreen="true"
    src="redacted"
  >
  </iframe>
</div>

Or is that attribute on the parent element? If so, try

cy.get("[data-test=embeddedPresentation] iframe")

Upvotes: 1

Related Questions