javascript - puppeteer can not select within css grid

Question

Edit: instead of using .grid-3 is there a way to use .grid-8-m? I replaced it in my code but it still couldn't find it. If you look at the html they are multiple .grid-3 but only one .grid-8-m at the top grid. Also I fixed the spacing my code.

I need to be able to grab content from these 2 grids and for some reason I can get to link inside of them. I have shortened the html codes so there is less junk to filter through.

The error that I keep getting is that puppeteer can not find '.ExDetail-section > .grid-3 > .bb-list--plain > li: nth - child(${i}) > a', and I've even used puppeteer chrome plugin to find links to the elements.

**My Code: **

   let allData = [];
    for (let i = 2; i < rowsCounts + 1; i++) {
        const exerciseName = await page.$eval(
            `.ExCategory-results > .ExResult-row:nth-child(${i}) > .ExResult-cell > .ExHeading > a`,
            (el) => el.innerText
        );

        await page.click(`.ExCategory-results > .ExResult-row:nth-child(${i}) > .ExResult-cell > .ExHeading > a`,);
        await page.waitForSelector('#js-ex-content');

    // This is where it starts for the grids...
        for (let i = 1; i < rowsCounts + 1; i++) {
            console.log(i)
            const exerciseType = await page.$eval(
                '.ExDetail-section > .grid-3 > .bb-list--plain > li:nth-child(${i}) > a',
                (el) => el.innerHTML
            );
            console.log(exerciseType)
        }

        let obj = {
            exerciseType: exerciseType,
        };
        allData.push(obj);
    }
    console.log(allData);

Top Grid

<section class="ExDetail-section ExDetail-meta flexo-container flexo-start paywall__video">
    
      <div class="grid-6 grid-12-s grid-12-m">
            <div id="js-ex-jwplayer-video" class="jwplayer jw-reset jw-state-idle jw-stretch-uniform jw-flag-aspect-mode jw-skin-stormtrooper jw-breakpoint-2 jw-floating-dismissible jw-flag-cast-available jw-flag-user-inactive" tabindex="0" ....
      </div>
    
    <div class="grid-3 grid-12-s grid-8-m">
      <ul class="bb-list--plain">
        <li>
          Type:
          <a href="/exercises/exercise-type/strongman" itemprop="exerciseType">
            Strongman
          </a>
        </li>
        <li>
          Main Muscle Worked:
          <a href="/exercises/muscle/forearms">
            Forearms
          </a>
        </li>
          <li>
            Equipment:
            <a href="/exercises/equipment/other">
              Other
            </a>
          </li>
        <li>
          Level:
          Beginner
        </li>
      </ul>
    </div>
    <div class="grid-3 grid-12-s grid-4-m">
      <div class="ExRating">
        <div class="ExRating-badge">
          9.6
        </div>
          <div class="ExRating-description ExRating-description--Average">
            Average
          </div>
      </div>
    </div>
  </section>

Bottom Grid

<div class="flexo-container">
  <div class="grid-4 grid-12-s grid-12-m">
    <img class="ExImg" alt="Rickshaw Carry muscle diagram" src="https://artifacts.bbcomcdn.com/@bbcom/exercises-app/2.1.2/img/guide-2.gif">
  </div>
  <div class="grid-8 grid-12-s grid-12-m" itemprop="description">
    <ol>
   <li>Position ....</li>
   </ol>

  </div>
</div>

question from:https://stackoverflow.com/questions/65913875/puppeteer-can-not-select-within-css-grid

Answer 1

Waitting for answers