How do I bypass plaid iframe with Cypress.io?

Question

I'm currently doing some automation, and I'm having trouble getting over the Plaid iframe. This how it looks inside of my app:

This how is setup inside of my app:

<div class="PaneActions PaneActions--no-padding-top"><button
        class="TextButton TextButton--is-action TextButton--is-threads-treatment TextButton--no-margin">
        <p class="FinePrint FinePrint--is-threads-treatment">By selecting “Continue” you agree to the <u>Plaid End User
                Privacy Policy</u></p>
    </button><button
        class="Touchable-module_resetButtonOrLink__hwe7O Touchable-module_block__WBbZm Touchable-module_wide__EYer3 Button-module_button__1yqRw Button-module_large__1nbMn Button-module_centered__3BGqS"
        id="aut-continue-button" type="button" role="button"><span class="Button-module_flex__2To5J"><span
                class="Button-module_text__38wV0">Continue</span></span></button></div>

I'm getting the parent and the child elements, I'm looking by the text, and many other options and I'm unable to test this product. Does anyone has been working with plaid before?

Answer 1

Using the Plaid demo page as a test app and following the steps in Working with iframes in Cypress, I managed to get a consistently working test.

From the blog, I used this sequence to ensure the iframe body has fully loaded

iframe -> body -> should.not.be.empty

The page loads a placeholder first while is waits for a GET request to complete, so just getting a loaded iframe body is not sufficient.

placeholder

<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>

We need to wait for the "Continue" button, which takes a bit of time to show so give it a long timeout.

Using .contains('button', 'Continue', { timeout: 10000 }) actually returned two button, although there is only one visible.

I changed the button selector to use an id and all works consistently.

The test

cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');

cy.contains('button', 'Launch Demo').click()

cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {

  cy.wrap(iframe)                   // from Cypress blog ref above
  .its('0.contentDocument.body')
  .should('not.be.empty')           // ensure the iframe body is loaded
  .as('iframeBody')                 // save for further commands within iframe.body

  //.contains('button', 'Continue', { timeout: 10000 })     // returns 2 buttons!

  .find('button#aut-continue-button', { timeout: 10000 })   // this is the best selector

  .click()

  cy.get('@iframeBody')
    .contains('h1', 'Select your bank')  // confirm the result of the click()


})