使用 puppeteer 获取卡片的链接答案

【问题标题】：Get links for a card with puppetear使用 puppeteer 获取卡片的链接
【发布时间】：2019-09-10 12:34:06
【问题描述】：

我想用 puppeteear 将元素 a 从类卡片动作中取出，它是一个带有 col s12 m6 列表的 div 我该怎么做？

<div class="row post-row">
<div class="col s12 m6">
    <div class="card large xp-post" id="p29710684">
        <div class="card-image waves-effect waves-block waves-light">
            <img class="activator lazyloaded" src="/xp_data/105255/29710684/thumb.jpg"
                data-src="/105255/29710684/thumb.jpg" alt="plap">
        </div>
        <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">plap <i
                    class="material-icons right">more_vert</i></span>
            <br><span style="font-size: 85%;" class="grey-text post-time">2019-09-04 18:15</span>
        </div>
        <div class="card-action">
            <a href="105255/29710684/08-29-2019_0955PM_756_531.png" target="_blank">Post file</a>
            <i class="material-icons right xp-flag" title="Flag this post" data-pid="29710684">flag</i>
        </div>
    </div>
    <div class="col s12 m6"></div>
    <div class="col s12 m6"></div>
</div>   
</div>

【问题讨论】：

可以使用page.evaluate函数来完成

标签： javascript node.js web-scraping puppeteer

【解决方案1】：

使用下面的puppeteer 导入后，它应该打印出控制台中的所有href。

const puppeteer = require('puppeteer');

 puppeteer.launch().then(async browser => { 
const page = await browser.newPage();
await page.goto('<url_here>'); 
let selector= "element_id_or_selector"; 
await page.evaluate((sel) => { 
var elements = document.querySelectorAll(sel); 
for(var i=0; i< elements.length; i++){ console.log(elements[i].href); }, selector);
});

【讨论】：

【解决方案2】：

使用 puppeteer，您可以使用在浏览器/页面上使用的常用 javascript。脚本必须在 page.evaluate 方法内运行，并且必须在 return 它找到的内容：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();

  await page.goto('https://example.com');

  const href = await page.evaluate(function(){
      // if there is only one link of the its kind
      return document.querySelector(".card-action a").href
  });

  await browser.close();
});

如果有很多行包含您所追求的链接：

  const hrefs = await page.evaluate(function(){
      return Array.from(document.querySelectorAll(".card-action a")).map(function(link){
          return link.href;
      });
  });

【讨论】：