如何使用帶有條紋元素的 Puppeteer

Question

一段時間以來我一直在為此猛烈抨擊，不知道為什么會這樣。

我正在使用react-stripe-elements並嘗試使用 Puppeteer 編寫測試。 我根本無法讓 Puppeteer 填寫卡片元素。

我嘗試了幾種方法

方法一

我嘗試按其名稱輸入 select，然后按其 class 輸入頁面上的任何輸入

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 ，但它絕對拒絕。

我還添加了 arguments 來禁用一些安全功能，因為我發現了一個問題，說這可能是一個問題。 我這樣做

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

您可能會遇到此問題，因為您的測試沒有等待CardElement掛載（並完成其動畫），或者動畫比您的延遲慢。 這是一個 puppeteer 測試的示例，它考慮了這些轉換以供您參考： https://github.com/stripe/react-stripe-elements/issues/137#issuecomment-352092164

Answer 2

一個很好的解決方案是使用 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);
});