Handling HTML view during API testing with Iframe - Cypress

iframes-with-cypress.js

/// <reference types="Cypress"/>

/**
 *
 * @returns
 *
 * the shared HTML checkout page includes iframe
 *
 * * thereofe i to have to handle it and access the selectos....
 */
const getIframeBody = () => {
  return (
    cy
      .get("iframe_selector")
      /**
       * Cypress yeilds jQuery elements after accessing the iframe
       * in which this iframe havee real DOM in it under property "0"
       *
       * Now with this access we can reach to the body and allocate the elements
       */
      .its("0.contentDocument")
      .its("body")
      /**
       * after reaching the body we can wrap the whole thing in a call back
       *
       * so all elements can be acceessed once we call the const function
       */
      .then(cy.wrap)
  );
};

context("As a user, I am trying to create checkout payment", () => {
  describe("The user needs to navigate to checkout HTML page", () => {
    // override baseUrl in cypress.json
    it("Visit & fetch token", { baseUrl: null }, () => {
      cy.visit("checkout.html");
      getIframeBody().find("the_selector_i_need").type("test");
      cy.get("selector_i_need").then((res) => {
        const t = res.text();
        cy.writeFile("cypress/fixtures/data/ignored/htmlToken.json", {
          anas: t,
        });
      });
    });
  });

  describe("Checkout Controller | POST |_.Positive", () => {
    it("Should init availability | generate searchId | generate driverId", () => {
      /**
       * for this test we need to have a Driver id
       * which can be generated by have a valid search id and Quote id
       *
       * ** during the test we will make sure to get a valid
       * driver id so we can proceed with all test cases
       */
      // <*><*><*> __API_CALL__ <*><*><*>
      cy.initAsyncVehicleAvailabilitySearch(
        branch,
        dropoffDate,
        branch,
        pickupDate
      ).then((res) => {
        /**
         * now in this response payload we will be able to
         * get the search id which will generate us valid quote id ;)
         */
        // <*><*><*> __API_CALL__ <*><*><*>
        cy.getQuoteBySearchId(res.body.searchId, branch).then((res) => {
          // <*><*><*> __API_CALL__ <*><*><*>
          cy.checkoutRegisterQuote(
            res.body.quoteId,
            code,
            dob,
            email,
            fName,
            lName,
            mobile,
            title
          ).then((res) => {
            cy.writeFile(
              "cypress/fixtures/data/ignored/driverId.json",
              res.body
            );
          });
        });
      });
    });

    it("POST | Checkout Payemnt Driver Id -> Checkout Controller :Status: 200 - OK", function () {
      cy.fixture("/data/ignored/htmlToken.json").then((t) => {
        cy.log(t.anas); // now i have the value that i fetch from checkout page and stored the created file above
      });
    });
  });
});