Как я могу получить <a>объектов внутри <div>при использовании кукловода?

Question

Используя кукловода, я попытался вставить два объекта, но потерпел неудачу. Мой тестовый код выглядит следующим образом

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>

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