CODEWITHSUNDEEP
puppeteer
Giorgi Gviani
Giorgi Gviani

Reputation: 28374

How click on element with id containing colons in puppeteer?

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?

Upvotes: 9

Views: 11079

Answers (2)

vsemozhebuty
vsemozhebuty

Reputation: 13782

You can try an attribute selector:

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

Upvotes: 7

Thomas Dondorf
Thomas Dondorf

Reputation: 25230

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

Upvotes: 11

Related Questions