Question 201772 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Rendering iFrame in Cypress

Can anyone help me render the iFrame for the following page in Cypress.

https://testnewpage.digitaldisbursements.org/

Tags:

2

Answers


  1. 0

    Here’s an example of how to render the link in iframe using Cypress;

    describe("Render iFrame", () => {
  it("Should render the iframe", () => {
    cy.visit("https://testnewpage.digitaldisbursements.org/");

  //this finds the iframe element
  cy.get("iframe").its("0.contentDocument").should("exist");

  /*
    here you can perform additional assertions on 
    the iframe if needed, for instance, accessing
    elements within the iframe
  */
  cy.get("iframe")
    .its("0.contentDocument")
    .then(cy.wrap)
    .find("#elementId")
    .should("be.visible")
    .click();
  });
});

    So in the above test, the specified url is visited using cy.visit, then cy.get('iframe') to locate the iframe element. We then assert the contentDocument property of the iframe to ensure that it loaded successfully. The rest of the test is explained in the comment above it. Hope this helps!

    Login or Signup to reply.
  2. 0

    It appears to me that no amount of waiting for the frame to load works for this page. The payment options never appear.

    BUT, if you open the address in a new window the logos and payment buttons do appear.

    This suggests you could try testing it in a new window – the approach is a little experimental but working.
    See Unable to load a specific URL with Cypress for reference.

    Here is a working test.

    it('Should render the iframe', {timeout:20_000}, () => {
  cy.visit('http://testnewpage.digitaldisbursements.org/')

  cy.openWindow('http://testnewpage.digitaldisbursements.org/')

  const paymentMethods = [
    {imgSrc: 'virtual_mc3.png', caption: 'GET A PREPAID MASTERCARD'},    
    {imgSrc: 'paypal.png', caption: 'USE PAYPAL'},    
    {imgSrc: 'venmo.png', caption: 'USE VENMO'},    
    {imgSrc: 'zelle.png', caption: 'USE ZELLE'},    
    {imgSrc: 'virtual_mc3.png', caption: 'GET A PREPAID MASTERCARD'},   
  ]

  cy.get('iframe')
    .its('0.contentDocument')
    .find('body')
    .should('exist')
    .and('not.be.null')
    .within($body => {
      cy.get('#payment')
        .find('.MuiGrid-item')
        .each((paymentMethod, i) => {

          cy.wrap(paymentMethod)      // check the logo
            .find('button img')      // 1st button on card
            .should('have.attr', 'src')
            .and('contain', paymentMethods[i].imgSrc)

          cy.wrap(paymentMethod)     // check the button caption
            .find('button').eq(1)   // 2nd button on card
            .should('contain', paymentMethods[i].caption)
         })

    })
})

    It uses the cy.openWindow() developed by Gleb Bahmutov here Cypress using child window with some adjustments.

    Cypress.Commands.add('openWindow', (url, features) => {
  const w = Cypress.config('viewportWidth')
  const h = Cypress.config('viewportHeight')
  if (!features) {
    features = `width=${w}, height=${h}`
  }
  console.log('openWindow %s "%s"', url, features)

  return new Promise(resolve => {
    if (window.top.aut) {
      console.log('window exists already')
      window.top.aut.close()
    }
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
    window.top.aut = window.top.open(url, 'aut', features)

    // letting page enough time to load and set "document.domain = localhost"
    // so we can access it
    setTimeout(() => {
      cy.state('document', window.top.aut.document)
      cy.state('window', window.top.aut)
      resolve()
    }, 10_000)
  })
})

    Also, some setting needed in cypress.config.js

    const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
    },
    chromeWebSecurity: false,
    modifyObstructiveCode: false,
  },
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search