javascript - puppeteer get number of rows

Question

I'm trying to get a number of rows with a list of these class names for some reason I keep getting a null as a return. How can I get a list of rows with this chain list of classes?

My code

        const alternativeRowsCounts = await page.$$eval(
            '.ExResult-row > .ExResult-row--relatedExercises > .flexo-container > .flexo-between',
            element => element.innerText //i've also tried rows instead of elements but still got null
//            (rows) => rows.length 
        );
        console.log(`Number of rows = ${alternativeRowsCounts}`)

Bigger section of the DOM I'm trying to ge the ExHeading ExResult-resultsHeading that is in h3 tag. ex: Barbell Bench Press - Medium Grip

<section class="ExDetail-section ExDetail-related">
      <h3 class="ExHeading ExHeading--h3">
        Alternative Exercises for Dumbbell Bench Press
      </h3>
        <div class="ExResult-row ExResult-row--relatedExercises flexo-container flexo-between" itemscope="" itemtype="http://schema.org/ExerciseAction">
          <div class="ExResult-cell ExResult-cell--imgs ">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Barbell Bench Press - Medium Grip thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m1-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m1-square-600x600.jpg" itemprop="image">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Barbell Bench Press - Medium Grip thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m2-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m2-square-600x600.jpg" itemprop="image">
          </div>
          <div class="ExResult-cell ExResult-cell--nameEtc">
            <h3 class="ExHeading ExResult-resultsHeading">
              <a href="/exercises/barbell-bench-press-medium-grip" itemprop="name">
                Barbell Bench Press - Medium Grip
              </a>
            </h3>
            <div class="ExResult-details ExResult-muscleTargeted">
              Muscle Targeted:
              <a href="/exercises/muscle/chest">
                Chest
              </a>
            </div>
            <div class="ExResult-details ExResult-equipmentType">
              Equipment Type:
              <a href="/exercises/equipment/barbell">
                Barbell
              </a>
            </div>
          </div>
          <div class="ExResult-cell ExResult-cell--rating">
            <div class="ExRating">
              <div class="ExRating-badge">
                9
              </div>
              <div class="ExRating-description ExRating-description--Average">
                Average
              </div>
            </div>
          </div>
        </div>        <div class="ExResult-row ExResult-row--relatedExercises flexo-container flexo-between" itemscope="" itemtype="http://schema.org/ExerciseAction">
          <div class="ExResult-cell ExResult-cell--imgs ">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Incline dumbbell bench press thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-3n-incline-dumbbell-bench-press-m1-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-3n-incline-dumbbell-bench-press-m1-square-600x600.jpg" itemprop="image">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Incline dumbbell bench press thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-3n-incline-dumbbell-bench-press-m2-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-3n-incline-dumbbell-bench-press-m2-square-600x600.jpg" itemprop="image">
          </div>
          <div class="ExResult-cell ExResult-cell--nameEtc">
            <h3 class="ExHeading ExResult-resultsHeading">
              <a href="/exercises/incline-dumbbell-press" itemprop="name">
                Incline dumbbell bench press
              </a>
            </h3>
            <div class="ExResult-details ExResult-muscleTargeted">
              Muscle Targeted:
              <a href="/exercises/muscle/chest">
                Chest
              </a>
            </div>
            <div class="ExResult-details ExResult-equipmentType">
              Equipment Type:
              <a href="/exercises/equipment/dumbbell">
                Dumbbell
              </a>
            </div>
          </div>
          <div class="ExResult-cell ExResult-cell--rating">
            <div class="ExRating">
              <div class="ExRating-badge">
                9.1
              </div>
              <div class="ExRating-description ExRating-description--Average">
                Average
              </div>
            </div>
          </div>
        </div>        <div class="ExResult-row ExResult-row--relatedExercises flexo-container flexo-between" itemscope="" itemtype="http://schema.org/ExerciseAction">
          <div class="ExResult-cell ExResult-cell--imgs ">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Kettlebell alternating floor press thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-6k-kettlebell-alternating-floor-press-m1-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-6k-kettlebell-alternating-floor-press-m1-square-600x600.jpg" itemprop="image">
                <!-- using male photos -->
                <img class="ExImg ExResult-img  ls-is-cached lazyloaded" width="70" height="70" onerror="if (window._E_) _E_(this)" alt="Kettlebell alternating floor press thumbnail image" src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-6k-kettlebell-alternating-floor-press-m2-square-600x600.jpg" data-src="https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-6k-kettlebell-alternating-floor-press-m2-square-600x600.jpg" itemprop="image">
          </div>
          <div class="ExResult-cell ExResult-cell--nameEtc">
            <h3 class="ExHeading ExResult-resultsHeading">
              <a href="/exercises/alternating-floor-press" itemprop="name">
                Kettlebell alternating floor press
              </a>
            </h3>
            <div class="ExResult-details ExResult-muscleTargeted">
              Muscle Targeted:
              <a href="/exercises/muscle/chest">
                Chest
              </a>
            </div>
            <div class="ExResult-details ExResult-equipmentType">
              Equipment Type:
              <a href="/exercises/equipment/kettlebells">
                Kettlebells
              </a>
            </div>
          </div>
          <div class="ExResult-cell ExResult-cell--rating">
            <div class="ExRating">
              <div class="ExRating-badge">
                6
              </div>
              <div class="ExRating-description ExRating-description--Average">
                Average
              </div>
            </div>
          </div>
        </div>    </section>

Edit 2:

I can get one of them but I need to get all of them. Each page goes between one to three of these per page. How can I get all of the texts that have these html elements with classes?

const alternativeExerciseNames = await page.$$(
    'h3.ExResult-resultsHeading > a',
    (el) => el.innerText
);

question from:https://stackoverflow.com/questions/65926921/puppeteer-get-number-of-rows

Answer 1

You need to use length property, not innerText property:

const alternativeRowsCounts = await page.$$eval(
    '.ExResult-row > .ExResult-row--relatedExercises > .flexo-container > .flexo-between',
    elements => elements.length
);
console.log(`Number of rows = ${alternativeRowsCounts}`);

You can refer to the example in Puppeteer documentation.

And I'm not sure about the selector, it might be wrong as well, but I can't tell since I don't see more from the DOM. But you might try this:

const alternativeRowsCounts = await page.$$eval(
    'div.flexo-between',
    elements => elements.length
);
console.log(`Number of rows = ${alternativeRowsCounts}`);

Child combinator > gets you direct children of an element.