0

На странице есть блоки с такими селекторами:

div[jsname="Cpkphb"]

Просто кликнуть на первый получается вот таким образом:

await page.click('div[jsname="Cpkphb"]');

Но не понимаю как поочередно кликнуть на каждый элемент с таким селектором... Буду благодарен за информацию!

2 ответа 2

0

Приблизительно так:

const elems = await page.$$('div[jsname="Cpkphb"]');
for (const item of elems) {
 await item.click();
.... some code
}
0

Необходимо создать событие и вызвать его для узла node:

const event = new Event('click');
node.dispatchEvent(event);

const elementNodes = document.querySelectorAll('.element');

addEventListeners(elementNodes); // ставим слушатели событий клика на все элементы
clickOnAllElements(elementNodes); // вызываем событие клик на всех элементах

function addEventListeners(elementNodes) {
  for (const elementNode of elementNodes) {
    elementNode.addEventListener('click', () => elementNode.classList.toggle('element_active'));
  } 
}

function dispatchEventClick(node) {
  const event = new Event('click');
  node.dispatchEvent(event);
}

function clickOnAllElements(nodes) {
  for (const node of nodes) {
    dispatchEventClick(node);
  } 
}
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --transitionTimingFunction: ease;
  --transitionDuration: 0.3s;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.element-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50%;
  gap: 20px;
}

.element {
  position: relative;
  font-size: 1.2em;
  color: white;
  cursor: pointer;
  background-color: red;
  transition: background-color var(--transitionDuration) var(--transitionTimingFunction);
}

.element_active {
  background-color: green;
}

.element::before,
.element::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.element::before {
  content: 'неактивный элемент';
  opacity: 1;
  visibility: hidden;
}

.element::after {
  content: 'активный элемент';
  opacity: 0;
  visibility: hidden;
}

.element:not(.element_active)::before {
  opacity: 1;
  visibility: visible;
}

.element_active::after {
  opacity: 1;
  visibility: visible;
}
<div class="element-container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

5
  • В вопросе речь о клике, во время парсинга страницы
    – Dmytro
    15 фев 2022 в 13:19
  • @Дмытрык, а, ну, ладно 😂 15 фев 2022 в 13:20
  • @Дмытрык, стой, если есть click, значит есть и всё остальное джаваскриптовское, click() использует dispatchEvent внутри себя 15 фев 2022 в 13:22
  • Да, предложенный вариант тоже можно применить, но, в контексте парсинга, правильнее использовать специальные методы, т.к. после клика может отправляться запрос, который тоже надо обработать
    – Dmytro
    15 фев 2022 в 13:24
  • @Дмытрык click и node.dispatchEvent(new Event('click')) работают одинаково, просто ещё в клик нельзя передавать информацию о том, как произошло событие 15 фев 2022 в 15:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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