我已经坚持了很长时间了，不知道如何让Cypress 12.8.1与条纹元素一起输入信用卡详细信息并创建付款.
我搜索了互联网，但似乎没有一个解决方案奏效.
Any help is greatly appreciated.个
我试过了:
-
Using xpath https://www.browserstack.com/guide/frames-and-iframes-in-cypress this does nto work for me. See error: https://github.com/cypress-io/cypress/issues/24764#issuecomment-1489438851
-
我试过这个插件，但它不再工作了.https://stackoverflow.com/a/70024952/10222449个 https://github.com/dbalatero/cypress-plugin-stripe-elements
-
try 此操作，但出现以下错误.
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('input[name="number"]').click().type('4242424242424242')
stripe = cy.wrap($body)
stripe.find('input[name="expiry"]').click().type('4242')
stripe = cy.wrap($body)
stripe.find('input[name="cvc"]').click().type('424')
})
- try 了几个版本的添加自定义Cypress命令"iframeLoaded"，但我想不出如何在新的Cypress 12打字脚本格式中添加这些命令，并且只收到错误. https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b个 https://bionicjulia.com/blog/cypress-testing-stripe-elements
我在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);
Update:个
我想我用福迪的回答就知道了.我做了3次更改. 我不得不这样改变它:
function getCardField(selector: any, attempts = 0) {
Cypress.log({displayName: 'getCardField', message: `${selector}: ${attempts}`})
if (attempts > 50) throw new Error('too many attempts')
return cy.get('iframe', {timeout:10_000, log:false})
// CHANGE: .eq(1 to .eq(0
.eq(0, {log:false})
.its('0.contentDocument', {log:false})
.find('body', {log:false})
.then(body => {
const cardField = body.find(selector)
if (!cardField.length) {
return cy.wait(300, {log:false})
.then(() => {
getCardField(selector, ++attempts)
})
} else {
return cy.wrap(cardField)
}
})
}
// CHANGE: "div.CardField" to "div.CardNumberField input"
getCardField('div.CardNumberField input')
.type('4242424242424242')
// CHANGE: "div.CardField" to "div.CardNumberField-input-wrapper"
getCardField('div.CardNumberField-input-wrapper')
.find('input').eq(0)
.should('have.value', '4242 4242 4242 4242') // passes