Skip to main content

Iframe | Cypress | Test & QA

  • Iframe | Cypress | Test & QA

Código usado​

describe.skip("Iframe example", () => {
    beforeEach(() => {
      cy.visit(`${Cypress.env("demoQA")}/nestedframes`);
    });
    it("Simple and nested iframe", () => {
      cy.get("#frame1").then(function ($iframe) {
        const $body: JQuery<HTMLElement | Document | Text | Comment> = $iframe
          .contents()
          .find("body");
        cy.wrap($body).should("have.text", "Parent frame");
        cy.wrap($body)
          .find("iframe")
          .then(function ($childIframe) {
            const $childBody = $childIframe.contents().find("body");
            cy.wrap($childBody).find("p").should("have.text", "Child Iframe");
          });
      });
    });
  });
  
  describe("Typing on an Iframe using the internet app", () => {
    beforeEach(() => {
      cy.visit(`${Cypress.env("theInternet")}/iframe`);
    });
    it("Iframedemo", () => {
      cy.get("#mce_0_ifr").then(($iframe) => {
        const $body: JQuery<HTMLElement | Document | Text | Comment> = $iframe
          .contents()
          .find("body");
        cy.wrap($body).find("p").type("{selectAll}{del}Hello World");
      });
      cy.get("#mce_0_ifr").then(($iframe) => {
        const $body = $iframe.contents().find("body");
        cy.wrap($body).find("p").should("have.text", "Hello World");
      });
    });
  });

1. Exemplo de Iframe Simples e Iframe Aninhado (Nested)​

describe.skip("Iframe example", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("demoQA")}/nestedframes`);
  });

Explicação:​

  • describe.skip: ignora a execução desse bloco de testes
  • O cenário acessa uma página com iframe pai e iframe filho

Teste – Validação de Iframe Pai e Filho​

it("Simple and nested iframe", () => {
  cy.get("#frame1").then(function ($iframe) {
    const $body: JQuery<HTMLElement | Document | Text | Comment> = $iframe
      .contents()
      .find("body");

Explicação:​

  • cy.get("#frame1"): seleciona o iframe pai
  • .contents(): acessa o conteúdo interno do iframe
  • .find("body"): obtém o body do documento do iframe
  • O body é armazenado em uma variável para reutilização

Validação do Conteúdo do Iframe Pai​

cy.wrap($body).should("have.text", "Parent frame");

Explicação:​

  • cy.wrap: converte o elemento jQuery em um comando Cypress
  • Valida o texto exibido no iframe pai

Acessando e Validando o Iframe Filho​

cy.wrap($body)
  .find("iframe")
  .then(function ($childIframe) {
    const $childBody = $childIframe.contents().find("body");
    cy.wrap($childBody).find("p").should("have.text", "Child Iframe");
  });

Explicação:​

  • Localiza o iframe filho dentro do iframe pai
  • Acessa o body do iframe filho
  • Valida o texto presente no parágrafo interno

2. Digitando Texto Dentro de um Iframe​

describe("Typing on an Iframe using the internet app", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("theInternet")}/iframe`);
  });

Explicação:​

  • Agrupa testes relacionados à digitação em iframe
  • A página contém um editor de texto dentro de um iframe

Teste – Digitando Conteúdo no Iframe​

it("Iframedemo", () => {
  cy.get("#mce_0_ifr").then(($iframe) => {
    const $body: JQuery<HTMLElement | Document | Text | Comment> = $iframe
      .contents()
      .find("body");
    cy.wrap($body).find("p").type("{selectAll}{del}Hello World");
  });

Explicação:​

  • Seleciona o iframe do editor
  • Acessa o body do iframe
  • Seleciona o parágrafo editável
  • Remove o texto existente e digita Hello World

Validação do Texto Digitado​

cy.get("#mce_0_ifr").then(($iframe) => {
  const $body = $iframe.contents().find("body");
  cy.wrap($body).find("p").should("have.text", "Hello World");
});

Explicação:​

  • Reacessa o iframe
  • Valida que o texto digitado foi persistido corretamente