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

Question

I am testing my Stripe checkout process with Puppeteer. I managed to fill out the form, however I cannot get Puppeteer to click the "Start trial" button, this one:

the html of the button is as follows:

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

and I am trying to click the button with this:

await page.click(".SubmitButton");

However, it throws an error saying:

Node is either not clickable or not an HTMLElement

I tried clicking it using selectors of multiple children of the button and had no success. I went to the console of the browser and typed in:

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

and it just works (the button is clicked and it redirects to the success page), so the selector must be right. I also tried adding different timeouts, but it didn't work either.

Any ideas how to approach this?

Answer 1

When I hit this issue it's usually because of one of these 3 errors:

• element is not present/visible when I click it;
• element is not ready when I click it (maybe some background logic taking a bit a time in the tested website or something);
• it's one of these times where Puppeteer just plays with you;

To get rid of the 2 first reason, make sure you wait for your element to be present, and add some delay before your click (set a high delay for debugging, then you can reduce it as it fits you):

// 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();

If it still doesn't work, then you hit the 3rd issue, the only workaround I've found for the moment is to click the element using page.evaluate :

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