[Internship] Cypress E2E Web Automation | Interacting with Elements | Handling iFrames

import "cypress-iframe";

describe("handling frames", () => {
  it.skip("approach1", () => {
    cy.visit("https://the-internet.herokuapp.com/iframe");
    const iframe = cy
      .get("#mce_0_ifr")
      .its("0.contentDocument.body")
      .should("be.visible")
      .then(cy.wrap);

    iframe.clear().type("Welcome {cmd+a}");
    // {cmd+a}: because we need to change all the words to bold
    cy.get("[aria-label='Bold']").click();
  });
  // we made our own custom command in commands.js
  it.skip("approach2 - by using custom command", () => {
    cy.visit("https://the-internet.herokuapp.com/iframe");
    cy.getIframe("#mce_0_ifr").clear().type("Welcome {cmd+a}");
    cy.get("[aria-label='Bold']").click();
  });
  it.only("approach3 - by using cypress - iframe plugin", () => {
    cy.visit("https://the-internet.herokuapp.com/iframe");
    cy.frameLoaded("#mce_0_1fr"); // Load the frame
    cy.iframe("#mce_0_ifr").clear().type("Welcome {cmd+a}");
    cy.get("[aria-label='Bold']").click();
  });
});