javascript - 如何将 Puppeteer 与 Stripe 元素结合使用

Question

我已经对此感到头疼有一段时间了，不知道为什么会发生这种情况。

我正在使用 react-stripe-elements 并尝试使用 Puppeteer 编写测试。我只是无法让 Puppeteer 填写卡片元素。

我尝试了几种方法

方法 1

我尝试按名称选择输入，然后按其类选择页面上的任何输入

await page.$eval('input[name="cardnumber"]')
await page.$eval(".InputElement");

有人告诉我有 方法2

然后我尝试访问实际的框架，我的理由是它在技术上是一个具有不同来源的页面。再次，什么也没有发生。现在，奇怪的是，当我尝试打印框架的内容时，没有再发生任何事情。

  const cardExpiryFrameHandle = await page.$('iframe[name="__privateStripeFrame5"]')
  const cardExpiryFrame = await cardExpiryFrameHandle.contentFrame()
  const test = await cardExpiryFrame.content()
  console.log(test);

当我控制台注销cardExpiryFrame时，它存在。这应该适合此处定义的 API https://pptr.dev/#?product=Puppeteer&version=v3.3.0&show=api-class-frame ，但它绝对拒绝。

我还添加了禁用某些安全功能的参数，因为我找到了一个问题，表明这可能是一个问题。我就是这样做的

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,
  },
}

方法 3

然后，我尝试模仿人类的行为，单击 div，然后尝试输入测试卡号。

  await page.click(getClass(paymentFlowCardInput))
  await page.keyboard.type('4242424242424242', { delay: '50' })

再次没有运气。没有错误。

现在我没有主意了 - 我该怎么办？

Answer 1

一个好的解决方案是使用选项卡切换到下一个输入。在我的测试中，我输入了持卡人姓名，然后按 Tab 键切换到 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);
});