使用 Puppeteer 获取正确的选择器

Question

这是 HTML 代码。

<div class="list-row">
    <div class="list-item">
        <div class="imgframe">
            <div class="img-wrap">
                <div class="img-item">
                    <a href="">
                        <img src="img1">
                    </a>
                    <div class="in-lable">
                        <a href="link1">
                            <span class="title">title1</span>
                        </a>
                    </div>
                </div>
                <div class="img-item">
                    <a href="">
                        <img src="img2">
                    </a>
                    <div class="in-lable">
                        <a href="link2">
                            <span class="title">title2</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的木偶代码。

var url = 'https://booktoki348.com/novel/15670582';
await page.goto(url, {'timeout': 50000, 'waitUntil':'load'});
await page.waitForSelector('#viewcomment');
const titlesAndImage = await page.evaluate(() => {
  const listItems = Array.from(document.querySelectorAll('.list-item'));
  return listItems.map((list) => {
     const img = list.querySelector('img').src;
     const link = list.querySelector('.in-lable').getAttribute('href');
     const title = list.querySelector('.in-lable').textContent;

     return { title, img, link };
  })
});

这是我的 console.log 测试。

Array.from(document.querySelectorAll('.img-item')).map((itemlist) => itemlist.querySelector('img').src);

Array.from(document.querySelectorAll('.img-item span.title')).map((itemlist) => itemlist.textContent);

两者都可以工作，但我想将它们放在 1 个地图内，该地图位于 img-item 内，或者可以基于示例 HTML 使用任何选择器。

我期待这样的输出。

[ { 标题：'标题1'， img: 'img1', 链接：'链接1' }, { 标题：'标题2'， img: 'img2', 链接：'链接2' }, ]

Answer 1

以下解决方案使用 puppeteer 的“多重选择器”

$$

通过一个异步操作检索具有类

img-item

的所有元素。然后，它开始每个

elem

的并行异步操作，计算 DOM 表示

e

并通过同步 DOM 操作

querySelector

访问其所需的属性。

const titlesAndImage = await Promise.all(
  (await page.$$(".img-item")).map((elem) =>
    elem.evaluate(function (e) {
      return {
        title: e.querySelector(".in-lable span").textContent,
        img: e.querySelector("img").src,
        link: e.querySelector(".in-lable a").href
      };
    })
  )
);