Кукловод: поиск по внутреннему тексту без учета регистра

Question

Я пытаюсь найти внутренний текст без учета регистра, используя puppeteer.

Я прочитал это: xpath без учета регистра содержит () возможно?

Например, у меня есть следующие элементы:

<div>
 <span>Test One</span>
 <span>Test Two</span>
 <span>Test Three</span>
</div>

Я попытался это безуспешно:

const element = await page.$x("//span//text()[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]");

Answer 1

Ваше выражение XPath допустимо, но вы возвращаете text() вместо самого узла. page.$x ожидает, что XPath вернет элемент, поэтому ваш код не работает. Чтобы вернуть узел, вам нужно запросить элемент span.

const element = await page.$x("//span[contains(translate(text(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]");

Обратите внимание, что text() работает только для текстовых узлов. Если у вас смешанный контент (содержащий элементы и текст), вы должны использовать строковое значение (. вместо text()):

const element = await page.$x("//span[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]");

Для сравнения выражений я поместил их друг под другом:

//span//text()[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]
//span[contains(translate(text(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')
//span[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]

Первое - это выражение (данное вами) для текста узла span. Второй запрашивает сам узел, используя text(). Последний использует строковое значение для запроса узла.

Answer 2

Не так красиво, но вы можете использовать page.evaluateHandle вместе с регулярным выражением, чтобы найти элемент:

const element = await page.evaluateHandle(() =>
    Array.from(document.querySelectorAll("div > span")).find(a => /test two/i.test(a.innerText))
);

Answer 3

Как и в SPB, я бы сделал:

const element = await page.evaluateHandle(() =>
 [...document.querySelectorAll('span')].find(s => s.innerText.toLowerCase().match('two'))
)