[英]How to use Puppeteer with Stripe Elements
Been slamming my head against this for a while now and no idea why this is happening.一段时间以来我一直在为此猛烈抨击,不知道为什么会这样。
I'm using react-stripe-elements
and trying to write a test using Puppeteer.我正在使用
react-stripe-elements
并尝试使用 Puppeteer 编写测试。 I simply cannot get Puppeteer to fill in the Card Elements.我根本无法让 Puppeteer 填写卡片元素。
I've tried a few approaches我尝试了几种方法
Approach 1方法一
I try to select the input by its name and then any input on the page by its class我尝试按其名称输入 select,然后按其 class 输入页面上的任何输入
await page.$eval('input[name="cardnumber"]')
await page.$eval(".InputElement");
I'm told that there's Approach 2有人告诉我有方法 2
I then tried to access the actual frame, my reasoning being that its technically a page with a different origin.然后我尝试访问实际的框架,我的理由是它在技术上是一个具有不同来源的页面。 Again, nothing happens.
同样,什么也没有发生。 Now, strangely, when I try and print out the contents of the frame, nothing happens again.
现在,奇怪的是,当我尝试打印出框架的内容时,什么也没有发生。
const cardExpiryFrameHandle = await page.$('iframe[name="__privateStripeFrame5"]')
const cardExpiryFrame = await cardExpiryFrameHandle.contentFrame()
const test = await cardExpiryFrame.content()
console.log(test);
When I console log out cardExpiryFrame
, it exists.当我控制台注销
cardExpiryFrame
时,它存在。 This should fit the API defined here https://pptr.dev/#?product=Puppeteer&version=v3.3.0&show=api-class-frame , but it absolutely refuses to.这应该适合此处定义的API https://pptr.dev/#?product=Puppeteer&version=v3.3.0&show=api-class-frame ,但它绝对拒绝。
I also added arguments to disable some security features because I tracked down an issue that said that this might be a problem.我还添加了 arguments 来禁用一些安全功能,因为我发现了一个问题,说这可能是一个问题。 I do so like this
我这样做
module.exports = {
server: {
command: `npm run-script start:test:server`,
port: 3000,
launchTimeout: 100000,
debug: true,
args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'],
},
launch: {
headless: false,
},
}
Approach 3方法 3
I then tried to mimic what a human would do and clicked the div and then tried to type out the test card number.然后我尝试模仿人类会做什么并单击 div 然后尝试输入测试卡号。
await page.click(getClass(paymentFlowCardInput))
await page.keyboard.type('4242424242424242', { delay: '50' })
Again no luck.再次没有运气。 No errors.
没有错误。
Now I'm out of ideas - what do I do?现在我没有主意了——我该怎么办?
You're likely running into this issue because your test isn't waiting for the CardElement
to mount (and finish its animations) or, the animations are slower than your delay.您可能会遇到此问题,因为您的测试没有等待
CardElement
挂载(并完成其动画),或者动画比您的延迟慢。 Here's an example of a puppeteer test which takes those transitions into account for your reference: https://github.com/stripe/react-stripe-elements/issues/137#issuecomment-352092164这是一个 puppeteer 测试的示例,它考虑了这些转换以供您参考: https://github.com/stripe/react-stripe-elements/issues/137#issuecomment-352092164
A good solution for this is using tab to switch to the next input.一个很好的解决方案是使用 tab 切换到下一个输入。 In my test I have an input for the cardholder name and I then tab to the CardElement component.
在我的测试中,我输入了持卡人姓名,然后我选择了 CardElement 组件。
describe('Test Input', () => {
test('Filling out card payment form', async () => {
let browser = await puppeteer.launch({
headless: false,
slowMo: 100
});
let page = await browser.newPage();
page.emulate({
viewport: {
width: 1280,
height: 1080
},
userAgent: ''
});
await page.goto('http://localhost:3000/asd/payment-requests/50-eur-by-2021-01-15t1200');
await page.waitForSelector('#input-name');
await page.click('input[name=card_name]')
await page.type('input[name=card_name]', 'Joe Bloggs')
await page.keyboard.press("Tab");
await page.keyboard.type(card.number, { delay: 500 })
await page.keyboard.type(card.month, { delay: 50 })
await page.keyboard.type(card.year, { delay: 50 })
await page.keyboard.type(card.cvc, { delay: 50 })
await page.keyboard.type(card.zip, { delay: 50 })
browser.close();
}, 90000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.