I have been stuck on this for ages and can’t figure out how to get Cypress 12.8.1 to work with Stripe elements to enter credit card details and create a payment.
I have scoured the internet but none of the solutions seem to work.
Any help is greatly appreciated.
I have tried:
- Using xpath Handling Frames and iFrames in Cypress | BrowserStack this does not work for me. See error: Receiving cy.xpath is not a function · Issue #24764 · cypress-io/cypress · GitHub
- Tried this plugin but it does not work anymore. javascript - How to get stripe element in cypress - Stack Overflow GitHub - dbalatero/cypress-plugin-stripe-elements: A small Cypress plugin that assists you in filling in Stripe Elements inputs
- Tried a few versions of adding the custom Cypress command “iframeLoaded” but I can’t figure out how to add these in the new Cypress 12 typescript format and just get errors. Testing Stripe Elements with Cypress | by Michael Bahr | Medium Cypress Testing Stripe Elements - Bionic Julia
My code in support/commands.ts
// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
declare namespace Cypress {
interface Chainable<Subject = any> {
iframeLoaded($iframe: any): typeof iframeLoaded;
}
}
function iframeLoaded($iframe: any): Promise<any> {
const contentWindow = $iframe.prop('contentWindow')
return new Promise(resolve => {
if (contentWindow && contentWindow.document.readyState === 'complete') {
resolve(contentWindow)
} else {
$iframe.on('load', () => {
resolve(contentWindow)
})
}
})
}
Cypress.Commands.add('iframeLoaded', {prevSubject: 'element'}, iframeLoaded);
Stackoverflow: