Puppeteer：按顺序操作页面的 DIV/html 元素？

Question

学习如何使用Puppeteer 抓取网站，作为 javascript 新手，我想到使用某些动态生成的网站的最简单方法是创建一个循环来循环浏览一些 Div 的一个一，并根据其特定属性触发操作（例如，单击循环中的所有Div `class= Clickable）

大多数在线Puppeteer 示例都介绍了如何通过某些名称/类来选择页面元素，例如在here 中，但没有介绍如何创建这样一个循环通过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

我理解正确吗？你有一些嵌套的隐藏层divs；要显示下一层，您需要单击一些可见元素；然后隐藏的元素变得可见，您也需要单击它才能继续等等？

如果是这样，可能有两种情况。

1. 如果扩展始终是同步的。那么所有的遍历都可以在浏览器上下文中完成：

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

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

1. 如果扩展可能是异步的（例如，在 XHR/fetch 调用上 fepends）。然后我们需要在 Node.js 上下文中进行异步检查：

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