2

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

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 и прочим стандартным параметрам не вариант, так как они периодически меняются

3 ответа 3

3

let link = document.querySelector("//*[text()='Search FragmentX']");

Методы querySelector и querySelectorAll понимают только CSS-селекторы.
Для поиска по XPath, нужно использовать document.evaluate.


Вот маленькое расширение прототипа элемента, для регистронезависимого поиска по тексту:

HTMLElement.prototype.getNodesByText = function (text) {
  const expr = `.//*[text()[contains(
    translate(.,
      'ABCDEFGHIJKLMNOPQRSTUVWXYZАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ',
      'abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя'
    ),
    '${text.toLowerCase()}'
  )]]`;    /* коммент-костыль */
  const nodeSet = document.evaluate(expr, this, null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null);
  return Array.from({ length: nodeSet.snapshotLength },
    (v, i) => nodeSet.snapshotItem(i)
  );
};

// использование
document.body.getNodesByText('fragment').forEach(
  el => el.style.backgroundColor = '#7f7'
);
<label>Foo</label>
<label>Search FragmentX</label>
<label>Bar</label>

Возвращает массив нодов (или пустой массив, в случае когда ничего не найдено).

Вызывать этот метод можно только от элементов - вызов от document не сработает, так как последний не наследует HTMLElement.

1
  • Первый коммент в коде нужен для того чтобы подсветка синтаксиса в сниппете не сходила с ума, видя /* (считает это началом комментария).
    – yar85
    22 ноя 2019 в 8:06
2

Не существует прямого селектора по тексту. Нужно придумывать костыль.

Поиск тупо среди всех элементов на странице запускается через селектор *document.querySelectorAll('*'); — Плохая идея, как минимум потому что если какой-то элемент содержит нужный текст, то и все его родители его включают. Помимо * - нужно будет искать конкретно textNode (nodeType == 3) среди всех childNodes каждого элемента.

Но хорошо, что примерно известно, где может попадаться искомый текст - можно взять все элементы с этим классом (или тегом - тег же не меняется) и отфильтровать по тексту:

let lab = document.querySelectorAll('label');
[...lab].forEach( e => e.onclick = () => e.classList.add('bg') ); // Демо клика

/******************************************/

runAutoClicks();

function runAutoClicks(){
  let x = document.querySelectorAll('.x-form-cb-label');
          // или  .querySelectorAll('label');

  x = Array.from( x ).filter( e => (/[mt]ake red/i).test( e.textContent ) );
  // Взяли все элементы с этим классом, отфильтровали по textContent

  let i = 0;  
  bubu();
  
  function bubu(){
    x[i].click();
    
    if( x[++i] ){ // - существует ли следующий элемент, заодно сразу увеличивает `i`
      setTimeout( bubu, 1000 );
      // Будет не хорошо, если пойдет одновременный клик по 10+ элементам.
    }
  }
}
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  cursor: pointer;
  border: 1px solid red;
  margin: 5px;
}

label.bg { background-color: #c00; color: white; }
<label class="x-form-cb-label">make red</label>
<label class="x-form-cb-label">take red</label>
<label class="x-form-cb-label">fake red</label>
<label class="x-form-cb-label">make red</label>
<label class="x-form-cb-label">take red</label>
<label class="x-form-cb-label">fake red</label>
<label class="x-form-cb-label">make red</label>
<label class="x-form-cb-label">take red</label>
<label class="x-form-cb-label">fake red</label>
<label class="x-form-cb-label">make red</label>
<label class="x-form-cb-label">take red</label>
<label class="x-form-cb-label">fake red</label>
<label class="x-form-cb-label">make red</label>
<label class="x-form-cb-label">take red</label>
<label class="x-form-cb-label">fake red</label>

См. «Регулярные Выражения» → http://learn.javascript.ru/

Но у событий существует свойство isTrusted. Если создатель сайта захочет - может защищаться от кликов через скрипт, запущенный в браузере:

let test = document.querySelectorAll('.test');

[...test].forEach( (test, i) => {
  test.addEventListener('click', function(event){
    test.style.backgroundColor = "red";
    
    setTimeout(function(){
      if( event.isTrusted ){
        test.style.backgroundColor = "green";
      } else {
        console.log(`Элемент номер ${i}, кликнул скрипт.`);
      }
    }, 500);
  });
});

test[0].click();
test[1].click();
.test {
  width: 80px;
  height: 80px;
  border: 1px solid red;
  display: inline-block;
  margin: 5px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

3
  • Попробовал адаптировать свой скрипт с вашим фильтром setTimeout(function() { let link = document.querySelectorAll('label'); link = Array.from( link ).filter( e => (/Search FragmentX/i).test( e.textContent ) ); link.click(); }); Не сработало, в чем ошибка? А вот такой вариант прекрасно кликает на нужный мне элемент setTimeout(function() { let link = document.querySelector("#x-auto-691"); link.click(); });
    – Vladislav
    22 ноя 2019 в 16:05
  • 1
    @Vladislav link.click(); — ошибка вот тут) link - это же не один конкретный элемент, а массив (даже если там один элемент - массив с одним элементом). Оттуда сначала нужно достать элемент, потом кликнуть... link[1].click(); link[2].click(); — поэтому нужен какой-то цикл) 22 ноя 2019 в 16:09
  • Сработало с link[0].click() Спасибо)
    – Vladislav
    22 ноя 2019 в 16:13
1

Решение

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.