CODEWITHSUNDEEP
javascripthtmlnode.jspuppeteer
mstrong
mstrong

Reputation: 11

How can I get <a> objects inside <div> when using puppeteer?

Using puppeteer, I tried getting two objects in but failed. My test code is like this

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

How can I solve this problem? This is my example codes for the test.

<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>

Upvotes: 0

Views: 90

Answers (1)

kidney
kidney

Reputation: 3083

Try the selectors without the >. It would require the <a> elements to be direct children of the <div> (see for example W3Schools). Like so:

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

And, maybe instead of using nth-child, why not try the btn-up and btn-down classes?

Upvotes: 1

Related Questions