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

【问题标题】：Unable to click the Stripe checkout button with Puppeteer无法使用 Puppeteer 单击 Stripe 结帐按钮
【发布时间】：2022-02-05 01:46:00
【问题描述】：

我正在使用 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()

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

任何想法如何解决这个问题？

【问题讨论】：

我不确定如何使用 Puppeteer 执行此操作，但使用 Stripe 进行自动化测试通常比自动点击页面更简单。你能告诉我更多关于你在这里测试什么吗？
我只是在为我的应用程序做端到端测试，所以在这里点击页面是一种强制性的。我正在测试的部分之一是结帐过程，即从用户在我的应用程序中单击“订阅”到在 Stripe 中成功结帐过程后的成功页面。我对每个单独的部分都有单独的单元测试和集成测试。

标签： javascript testing stripe-payments puppeteer

【解决方案1】：

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

当我点击它时元素不存在/不可见；
当我点击元素时它还没有准备好（可能一些后台逻辑在测试的网站中需要一些时间或其他东西）；
这是 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);

【讨论】：