Как кликнуть на все элементы по очереди?

Question

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

div[jsname="Cpkphb"]

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

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

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

Answer 1

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

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

Answer 2

Необходимо создать событие и вызвать его для узла 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>

БЛОГ НА HUSL

Как кликнуть на все элементы по очереди?

Ответы (2 шт):