无法使用 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");

但是，它会抛出一条错误消息：

Node is either not clickable or not an HTMLElement

我尝试使用按钮的多个子项的选择器单击它，但没有成功。我转到浏览器的控制台并输入：

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

它确实有效（单击按钮并重定向到成功页面），因此选择器必须正确。我也尝试添加不同的超时，但它也没有用。

有什么想法可以解决这个问题吗？

Answer 1

当我遇到这个问题时，通常是因为以下 3 个错误之一：

当我点击元素时，元素不是 present/visible；
当我点击它时元素还没有准备好（可能是一些后台逻辑在测试的网站上花费了一些时间等等）；
这是 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);

无法使用 Puppeteer 单击 Stripe 结帐按钮

Unable to click the Stripe checkout button with Puppeteer

javascript

testing

stripe-payments

puppeteer