Как нажать на элемент с идентификатором, содержащим двоеточие в кукловоде?

Question

Кнопка имеет такой идентификатор 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')">

В кукловоде я пытаюсь нажать на эту кнопку:

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.

С двойными escape-символами:

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

Выдает:

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

Полагаю, проблема в двоеточии. Есть мысли как нажать на нее?

Answer 1

Вы можете попробовать селектор атрибута:

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

Answer 2

«Двойной побег» работает. Двоеточие не должно быть проблемой.

Проблема, скорее всего, в том, что элемент просто еще не визуализирован. Чтобы дождаться отображения элемента в первую очередь, вы можете использовать функцию page.waitForSelector, например:

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