Поиск элемента по тексту document.querySelector, какой селектор подобрать?

Question

[Владислав]

Пытаюсь сделать эмуляцию клика, найдя элемент по тексту в нем. Как правильно написать селектор? Пробовал разные конструкции, наподобие этой:

setTimeout(function() {
  let link = document.querySelector("//*[text()='Search FragmentX']"); 
  link.click(); 
});

outerHTML элемента

<label for="x-auto-1558" htmlfor="x-auto-1558" class="x-form-cb-label" style="position: relative; left: 0.78479px; top: -0.0104141px;">Search FragmentX</label>

Full XPath
/html/body/div[4]/div[2]/div[1]/div/div/div/div/div[2]/div[1]/form/div[1]/div[1]/div/table/tbody/tr[3]/td/div/label

Поиск по ID и прочим стандартным параметрам не вариант

Answer 1

[Владислав]

Решение

setTimeout(function() {
  let link = document.querySelectorAll('label');  //собираем все элементы label в nodelist
  link = Array.from( link ).filter( e => (/Текст/i).test( e.textContent ) ); //переводим в массив и фильтруем по тексту
  link[0].click();  //кликаем по первому элементу массива
});

Answer 2

[Алексей Сундуков]

Сам Xpath некорректный. //*[text()='Search FragmentX'] вернет безымянный текстовой узел содержащий данный текст (т.е. даже не label, а узел внутри этого label). А на нем onclick может и не быть. Еще есть вариант, что в момент вызова данного кода и клика в DOM еще нет обработчика. Потому что не понятно, каким образом вызывается этот код и в какой момент.

А если завязаться на класс x-form-cb-label (на правах эксперимента), то такой клик срабатывает?

Comments

[Владислав]

Дело в том, что в системе несколько тысяч элементов, которые различаются по ID и расположению, но могут иметь одинаковые названия.
Мне нужно искать элементы по тексту, классы не помогут, так как в двадцати разных элементах на странице, будет одинаковый класс.

Прикладываю пример трех кусков HTML, содержащих Radio и Label (конечная цель нажатие Radio, но при нажатии Label также срабатывает Radio) Первый и второй пример должны кликаться по одному условию селектору. Третий пример с другим текстом, прикладываю просто для понимания отличий.

************ 1. Искомый элемент "First Text"

<td class="x-table-layout-cell" role="presentation" align="LEFT" valign="TOP" style="position: static; padding-bottom: 5px;">
	<div class="x-form-check-wrap x-form-field x-component " role="presentation" id="x-auto-1559" style="position: relative;">
		<input type="radio" name="gxt.RadioGroup.4" value="" id="x-auto-1558" class=" x-form-radio" tabindex="0" style="position: relative; left: 0px; top: 1px;">
		<label for="x-auto-1558" htmlfor="x-auto-1558" class="x-form-cb-label" style="position: relative; left: 0.78479px; top: -0.0104141px;">First Text</label>
	</div>
</td>

JS path для элемента Label: document.querySelector("#x-auto-1559 > label")
Full xPath для элемента Label: /html/body/div[4]/div[2]/div[1]/div/div/div/div/div[2]/div[1]/form/div[1]/div[1]/div/table/tbody/tr[3]/td/div/label

************* 2. Искомый элемент "First Text"

<td class="x-table-layout-cell" role="presentation" align="LEFT" valign="TOP" style="position: static; padding-bottom: 5px;">
	<div class="x-form-check-wrap x-form-field x-component " role="presentation" id="x-auto-1831" style="position: relative;">
		<input type="radio" name="gxt.RadioGroup.8" value="" id="x-auto-1830" class=" x-form-radio" tabindex="0" style="position: relative; left: 0px; top: 1px;">
		<label for="x-auto-1830" htmlfor="x-auto-1830" class="x-form-cb-label" style="position: relative; left: 0.78479px; top: -0.0104141px;">First Text </label>
	</div>
</td>

JS path для элемента Label: document.querySelector("#x-auto-1831 > label")
Full xPath для элемента Label: /html/body/div[4]/div[2]/div[1]/div/div/div/div/div[2]/div[1]/form/div[1]/div[1]/div/table/tbody/tr[2]/td/div/label

************* 3. Искомый элемент с текстом "Second Text"

<td class="x-table-layout-cell" role="presentation" align="LEFT" valign="TOP" style="position: static; padding-bottom: 5px;">
	<div class="x-form-check-wrap x-form-field x-component " role="presentation" id="x-auto-1833" style="position: relative;">
		<input type="radio" name="gxt.RadioGroup.8" value="" id="x-auto-1832" class=" x-form-radio" tabindex="0" style="position: relative; left: 0px; top: 1px;">
		<label for="x-auto-1832" htmlfor="x-auto-1832" class="x-form-cb-label" style="position: relative; left: 0.78479px; top: -0.0104141px;">Second Text</label>
	</div>
</td>

JS path для элемента Label: document.querySelector("#x-auto-1833 > label")
Full xPath для элемента Label: /html/body/div[4]/div[2]/div[1]/div/div/div/div/div[2]/div[1]/form/div[1]/div[1]/div/table/tbody/tr[3]/td/div/label

[Алексей Сундуков]

Владислав, Возможно сработает на input-е:

//label[text()="First Text"]/preceding-sibling::input

[Алексей Сундуков]

Владислав, А точно внутри прямо ровно текст "First Text"? Без пробелов, без переносов и ровно прямо вот именно такой? Возможно в реальности ищется подстрока в строке?

[Владислав]

Опубликовал решение

setTimeout(function() {
  let link = document.querySelectorAll('label');  //собираем все элементы label в nodelist
  link = Array.from( link ).filter( e => (/Текст/i).test( e.textContent ) ); //переводим в массив и фильтруем по тексту
  link[0].click();  //кликаем по первому элементу массива
});