無法使用 Puppeteer 單擊 Stripe 結帳按鈕

Question

我正在使用 Puppeteer 測試我的 Stripe 結帳流程。 我設法填寫了表格，但是我無法讓 Puppeteer 單擊“開始試用”按鈕，這個：

按鈕的html如下：

<button class="SubmitButton SubmitButton--complete" type="submit" data-testid="hosted-payment-submit-button" style="background-color: rgb(0, 116, 212); color: rgb(255, 255, 255);"><div class="SubmitButton-Shimmer SubmitButton--complete-Shimmer" style="background: linear-gradient(to right, rgba(0, 116, 212, 0) 0%, rgb(58, 139, 238) 50%, rgba(0, 116, 212, 0) 100%);"></div><div class="SubmitButton-TextContainer"><span class="SubmitButton-Text SubmitButton-Text--current Text Text-color--default Text-fontWeight--500 Text--truncate" aria-hidden="false">Start trial</span><span class="SubmitButton-Text SubmitButton-Text--pre Text Text-color--default Text-fontWeight--500 Text--truncate" aria-hidden="true">Processing...</span></div><div class="SubmitButton-IconContainer"><div class="SubmitButton-Icon SubmitButton-Icon--current"><div class="Icon Icon--md Icon--square"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" focusable="false"><path d="M3 7V5a5 5 0 1 1 10 0v2h.5a1 1 0 0 1 1 1v6a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V8a1 1 0 0 1 1-1zm5 2.5a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-1-1zM11 7V5a3 3 0 1 0-6 0v2z" fill="#ffffff" fill-rule="evenodd"></path></svg></div></div><div class="SubmitButton-Icon SubmitButton-SpinnerIcon SubmitButton-Icon--pre"><div class="Icon Icon--md Icon--square"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false"><ellipse cx="12" cy="12" rx="10" ry="10" style="stroke: rgb(255, 255, 255);"></ellipse></svg></div></div></div><div class="SubmitButton-CheckmarkIcon"><div class="Icon Icon--md"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="14" focusable="false"><path d="M 0.5 6 L 8 13.5 L 21.5 0" fill="transparent" stroke-width="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div></button>

我試圖用這個點擊按鈕：

await page.click(".SubmitButton");

但是，它會拋出一個錯誤說：

節點要么不可點擊，要么不是 HTMLElement

我嘗試使用按鈕的多個子項的選擇器單擊它，但沒有成功。 我去了瀏覽器的控制台並輸入：

var btns = document.getElementsByClassName("SubmitButton");
btns[0].click()

它可以正常工作（單擊按鈕並重定向到成功頁面），因此選擇器必須是正確的。 我也嘗試添加不同的超時，但它也不起作用。

任何想法如何解決這個問題？

Answer 1

當我遇到這個問題時，通常是因為以下三個錯誤之一：

• 當我單擊它時，元素不存在/不可見；
• 當我點擊它時元素還沒有准備好（可能一些背景邏輯在測試的網站上需要一些時間或其他東西）；
• 這是 Puppeteer 只是和你一起玩的時候之一；

要擺脫第 2 個原因，請確保等待元素出現，並在單擊之前添加一些延遲（為調試設置高延遲，然后您可以根據需要減少它）：

// wait for element
const myElement = await page.waitForSelector(".SubmitButton", {visible: true});
// add some delay
await page.waitForTimeout(5000); // 5s
// click your elem
await myElement.click();

如果它仍然不起作用，那么您遇到了第三個問題，我目前發現的唯一解決方法是使用page.evaluate單擊元素：

const locator = ".SubmitButton";
await page.evaluate( (paramLocator) => {
    document.querySelector(paramLocator).click();
}, locator);