Кукольник: манипулировать элементами DIV / html страницы по порядку?

Question

Узнав, как обрабатывать веб-сайты с помощью Puppeteer, мне, как новичку в javascript, пришло в голову, что самый простой способ работы с некоторыми динамически генерируемыми сайтами состоит в создании цикла для циклического прохождения некоторых Div по одному.один, и запускать действия на основе их определенных атрибутов (например, щелкнуть по всем элементам Div в цикле с помощью `class = Clickable)

Большинство Puppeteer примеров в Интернете показывают, как выбирать элементы страницы по определенным именам /классы, как в здесь , но не как создать такой цикл, который проходит через часть Div и выполнять действия на их основе.

Так как я новичок вJavascript, если кто-то даст мне совет или указание о том, как это сделать, я был бы чрезвычайно признателен.

Пример: я хочу очистить данные от самых нижних слоев некоторых Div, в этомв случае с section= какой-то вариант буквы C, поэтому я открываю следующий фрагмент Div следующим образом, в конце планируя извлечь некоторые данные,

<div class="Table" section="A">
<div class="Columns" id style="display: none;">
<div class="Table" section="B">
<div class="Columns" id style="display: none;">

## section "C" has been clicked by Puppeteer, 
## and so indented part is what is expanded from class=Columns
<div class="Table" section="C">
<div class="Columns" id style>

    ## Next sub-section that needs to be gone through
    <div class="Column" section="a">
    <div class="Rows" id style="display: none;">
    <div class="Column" section="b">
    <div class="Rows" id style="display: none;">

    ## Repeating same process one layer deeper now
    <div class="Column" section="c">
    <div class="Rows" id style>

        <div class="Subsection" section="i">
        <div class="data" id style>
        ............
        ............
        *loop keeps going*

Надеюсь, теперь мой вариант использования понятнее.

Answer 1

Я правильно понимаю?У вас есть несколько вложенных слоев скрытых div s;чтобы открыть следующий слой, вам нужно нажать на какой-то видимый элемент;тогда скрытый элемент становится видимым, и вам нужно нажать на него, чтобы продолжить и т. д.?

Если это так, может быть два случая.,Тогда все обходы можно выполнить в контексте браузера:

await page.evaluate(() => {
  const sections = ['C', 'c', 'i'];

  for (let section of sections) {
    const element = document.querySelector(`[section=${section}]`);
    element.click();
  }
});

Если расширение может быть асинхронным (например, зависит от XHR / вызова выборки).Затем нам нужны асинхронные проверки в контексте Node.js:

const sections = ['C', 'c', 'i'];
for (let section of sections) {
  const element = await page.waitForSelector(`[section=${section}]`, { visible: true });
  await element.click();
}