使用 puppeteer 时如何在 <div> 中获取 <a> 对象？答案

【问题标题】：How can I get <a> objects inside <div> when using puppeteer?使用 puppeteer 时如何在 <div> 中获取 <a> 对象？
【发布时间】：2020-05-27 02:22:12
【问题描述】：

使用 puppeteer，我尝试放入两个对象但失败了。我的测试代码是这样的

const btnUp = await page.$('div#ember322 > a:nth-child(0)');
const btnDown = await page.$('div#ember322 > a:nth-child(1)');

我该如何解决这个问题？这是我的测试示例代码。

<div id="ember322" class="ember-view">
  <div class="order-btn-group">
    <div class="order-value"><span>0.8</span></div>
    <div class="row">
      <div class="col-xs-6">
        <a class="btn-order btn-down txt-left" data-ember-action="" data-ember-action-323="323">
          <span class="btn-order-text">down</span>
          <span class="btn-order-value txt-center">
            <small>300</small>
          </span>
          <i class="btn-order-status"></i>
        </a>
      </div>

      <div class="col-xs-6">
        <a class="btn-order btn-up txt-right" data-ember-action="" data-ember-action-324="324">
          <span class="btn-order-text">up</span>
          <span class="btn-order-value txt-center">
            <small>500</small>
          </span>
          <i class="btn-order-status"></i>
        </a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html node.js puppeteer

【解决方案1】：

试试不带> 的选择器。它要求<a> 元素是<div> 的直接子元素（例如参见W3Schools）。像这样：

const btnUp = await page.$('div#ember322 a:nth-child(0)');
const btnDown = await page.$('div#ember322 a:nth-child(1)');

而且，也许不使用nth-child，为什么不试试btn-up 和btn-down 类？

【讨论】：

我完全赞成page.$('btn-down')/page.$('btn-up')