javascript - Rendering iFrame in Cypress - Stack Overflow

admin管理员组

文章数量:1023187

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

/

<iframe
  frameborder="0"
  title="Payment method selection section."
  src=".html"
  style="border: none; width: 100%; height: 355px; overflow: hidden"
></iframe>

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

https://testnewpage.digitaldisbursements/

<iframe
  frameborder="0"
  title="Payment method selection section."
  src="https://staging-content.digitaldisbursements./latest/index.html"
  style="border: none; width: 100%; height: 355px; overflow: hidden"
></iframe>

• javascript
• testing
• iframe
• automated-tests
• cypress

Share Improve this question Follow edited Jun 6, 2024 at 6:06 Billy.Burr 14588 bronze badges asked Jul 6, 2023 at 0:00 Korben DallasKorben Dallas 8766 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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/')

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

  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/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,
  },
})

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/");

  //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 ment above it. Hope this helps!

cy.get('#idOfIframe')
        .its('0.contentDocument.body')
        .should('not.be.empty')
        .then((iframeBody) => {
            cy.wrap(iframeBody).Do_your_actions()
        })

This worked for me. And it's very simple.

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

/

<iframe
  frameborder="0"
  title="Payment method selection section."
  src=".html"
  style="border: none; width: 100%; height: 355px; overflow: hidden"
></iframe>

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

https://testnewpage.digitaldisbursements/

<iframe
  frameborder="0"
  title="Payment method selection section."
  src="https://staging-content.digitaldisbursements./latest/index.html"
  style="border: none; width: 100%; height: 355px; overflow: hidden"
></iframe>

• javascript
• testing
• iframe
• automated-tests
• cypress

Share Improve this question Follow edited Jun 6, 2024 at 6:06 Billy.Burr 14588 bronze badges asked Jul 6, 2023 at 0:00 Korben DallasKorben Dallas 8766 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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/')

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

  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/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,
  },
})

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/");

  //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 ment above it. Hope this helps!

cy.get('#idOfIframe')
        .its('0.contentDocument.body')
        .should('not.be.empty')
        .then((iframeBody) => {
            cy.wrap(iframeBody).Do_your_actions()
        })

This worked for me. And it's very simple.

本文标签： javascriptRendering iFrame in CypressStack Overflow