How click on element with id containing colons in puppeteer?

Question

Button has id like this my:very:beautiful:button

<input id="my:very:beautiful:button" type="image" src="https://xxx/search_off.gif" name="my:very:beautiful:button" onmouseout="imgOff('searchBttn', this)" onmouseover="imgOn('searchBttn', this)" class="btn searchBttn" onclick="doSubmit(this, 'clearBttn')">

In puppeteer my attempt to click on this button is:

await page.click('#my\:very\:beautiful\:button');

Throws:

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#my:very:beautiful:button' is not a valid selector.

With double escape characters:

await page.click('#my\\:very\\:beautiful\\:button');

Throws:

Error: No node found for selector: #my\:very\:beautiful\:button

I assume the problem is colon. Any thoughts how click on it?

Answer 1

The "double escaping" works. The colon should not be the problem.

The problem is most likely that the element simply has not been rendered yet. To wait for the element to be rendered first, you can use the function page.waitForSelector like this:

const selector = '#my\\:very\\:beautiful\\:button';
await page.waitForSelector(selector);
await page.click(selector);

Answer 2

You can try an attribute selector:

await page.click('[id="my:very:beautiful:button"]');