如何单击ID中包含伪造者中冒号的元素？

Question

按钮的ID为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')">

在操纵up中，我尝试单击此按钮是：

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

投掷：

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

带有双转义字符：

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

投掷：

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

我认为问题是冒号。有任何想法如何点击它吗？

Answer 1

“双重转义”有效。结肠应该不是问题。

问题很可能是该元素还没有被渲染。要等待元素首先被渲染，可以使用函数this document，如下所示：

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

Answer 2

您可以尝试使用属性选择器：

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