Очистите текст в массиве SPAN для идентификатора div с помощью Puppeteer

Question

У меня есть это HTML:

<div id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV" class="modules-wrapper">
  <table>
    <tr>
      <td><div>  <span> -Master Scuba Diver </span> </div></td>
      <td><div>  <span> -Fish Identification </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Underwater Navigator </span> </div></td>
      <td><div>  <span> -EFR Primary Care with AED </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Search & Recovery Diver </span> </div></td>
      <td><div>  <span> -Deep Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Wreck Diver </span> </div></td>
      <td><div>  <span> -Divemaster </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -AWARE Coral Reef Conservation </span> </div></td>
      <td><div>  <span> -PADI Seal Team </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Bubblemaker </span> </div></td>
      <td><div>  <span> -Advanced Open Water Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Peak Performance Buoyancy Diver </span> </div></td>
      <td><div>  <span> -Scuba Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Rescue Diver </span> </div></td>
      <td><div>  <span> -Discover Scuba Diving </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -PADI Master Seal Team </span> </div></td>
      <td><div>  <span> -Project Aware </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Open Water Diver </span> </div></td>
      <td><div>  <span> -Adventure Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Skin Diver </span> </div></td>
    </tr>
  </table>
</div>

Я хочу получить текст внутри каждого SPAN для DIV с этим идентификатором и вернуть каждый текстовый элемент в виде массива, как мне этого добиться? Все перепробовал ...

Answer 1

Простейшее однострочное решение - использовать page.$$eval для сбора всех <span> элементов в контексте страницы - он запускает Array.from(document.querySelectorAll(selector)) в фоновом режиме. Поскольку он возвращает массив элементов, вы можете перебирать их с помощью Array.map, чтобы получить innerText каждого в конце.

const spanTexts = await page.$$eval('span', elements => elements.map(el => el.innerText))
console.log(spanTexts)

В пределах указанного c <div> вы можете создать подстановочный знак между элементами #id-name и span с помощью универсального селектора (*). Вы можете узнать больше о том, как создавать селекторы CSS самостоятельно здесь, на MDN .

const spanTexts = await page.$$eval('#ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV * span', elements => elements.map(el => el.innerText))
console.log(spanTexts)

Answer 2

Я нашел решение, чтобы получить указанный c ID, а затем получить текст в промежутках

const spanTexts = await page.$$eval('#ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV span', elements => elements.map(el => el.innerText))

Большое спасибо @ thedavidbarton