CODEWITHSUNDEEP
testingiframecypressintegration-testinge2e-testing
user18025789
user18025789

Reputation:

Not able to locate iframe using cypress

I am using cypress v5.4 to test braintree paypal dropin with test visa card but unable to locate into iframe. Since cypress doesn't provide a native way to deal with iframes hence I am creating a custom command, basically to traverse through an iframe. But it doesn't work.

here is how command.js looks like.

Cypress.Commands.add('getIframeBody', () => {
  return cy
   .get('#braintree-hosted-field-number')
   .its('0.contentDocument.body')
   .should('not.be.empty')
   .then(cy.wrap)
  });

And here is my test paymentMethods.js

cy.get(".braintree-option.braintree-option__card")
  .should("be.visible")
  .click()
cy.get("div.ModalContent__BottomSection-b9lci0-1", {timeout:5000})
cy.getIframeBody()
  .find('#credit-card-number').type('4111111111111111');

It stuck when wrapping iframe into cypress

stuck here

HTML:

enter image description here

All help will be appreciated, thank you.

Upvotes: 1

Views: 714

Answers (1)

Alapan Das
Alapan Das

Reputation: 18650

I would suggest you use the cypress iframe plugin.

  1. To install use the command npm install -D cypress-iframe.

  2. In your cypress/support/commands.js file, add the following:

import 'cypress-iframe'
// or
require('cypress-iframe')
  1. Then in your test write:
cy.iframe('#braintree-hosted-field-number')
  .find('#credit-card-number')
  .type('4111111111111111')

Upvotes: 2

Related Questions