Copy inner text of elements with same classes but in order (puppeteer)

There is a wrapper and each have a container with title, description, and other info but all of the titles, descriptions, and other details have the same class name. I have tried querySelectorAll that I found here How to select all child div with same class using Puppeteer?

but it can’t get the elements. I need to get them each in order so they stay organized. Here is what one of the containers looks like

<
div class = "cms-article-list__content--container" >
    <
    div class = "cms-article-list__title-number-panel" >
    <
    span class = "cms-article-list__title-number" > 1 < /span> <
    /div>

    <
    div class = "cms-article-list__content--group" >
    <
    div class = "cms-article-list__content--group-title" > BARBELL BENCH PRESS(WARM - UP SETS) < /div>

    <
    div class = "cms-article-list__content--group-description" > Use light weight and perform 2 sets of 5 - 10 reps, stopping each set short of failure. < /div>





    <
    div class = "cms-article-list__content" >
    <
    div class = "cms-article-list__content--container-left" >
    <
    div class = "cms-article-workout__exercise--info" >
    <
    a target = "_blank"
href = "//www.bodybuilding.com/exercises/detail/view/name/barbell-bench-press-medium-grip"
class = "cms-article-workout__exercise--title" > Barbell Bench Press - Medium Grip < /a> <
    div class = "cms-article-workout__exercise--description" > < /div> <
    /div>

    <
    div class = "cms-article-workout__sets--definition" >
    <
    span > 2 sets, 5 - 10 reps(rest 1 min.) < /span> <
    /div>

    <
    /div> <
    a target = "_blank"
href = "//www.bodybuilding.com/exercises/detail/view/name/barbell-bench-press-medium-grip"
class = "cms-article-list__content--container-right" >
    <
    img class = "cms-article-workout__exercise--img cms-article-workout__exercise--img-left"
src = "https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m1-square-130x130.jpg"
srcset = "https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m1-square-130x130.jpg 1x, https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m1-square-200x200.jpg 2x" >
    <img class = "cms-article-workout__exercise--img cms-article-workout__exercise--img-right"
src = "https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m2-square-130x130.jpg"
srcset = "https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m2-square-130x130.jpg 1x, https://www.bodybuilding.com/images/2020/xdb/cropped/xdb-81e-bench-press-m2-square-200x200.jpg 2x" >
    </a> </div>
    </div>
    </div>

My code with loop

    const nodes = element.querySelectorAll('.cms-article-list__content--container')
    
    for (let i = 1; i < nodes + 1; i++) {

        const ExerciseGroupTitle = await page.$eval(
            `.cms-article-list__content--group-title`,
            (el) => el.innerText
        );
        console.log(ExerciseGroupTitle)

        const ExerciseGroupDescription = await page.$eval(
            `.cms-article-list__content--group-description`,
            (el) => el.innerText
        );
        console.log(ExerciseGroupDescription)

        const ExerciseName = await page.$eval(
            `.cms-article-workout__exercise--info`,
            (el) => el.innerText
        );
        console.log(ExerciseName)

        const ExerciseSets = await page.$eval(
            `.cms-article-workout__sets--definition > span`,
            (el) => el.innerText
        );
        console.log(ExerciseSets)

    }

Edit
this is the result it gave me after updating the element that is wrapping the table. It is not going through list of all the items.

[
  [
    'BARBELL BENCH PRESS (WARM-UP SETS)',
    'Use light weight and perform 2 sets of 5-10 reps, stopping each set short of failure.',
    'Barbell Bench Press - Medium Grip',
    '2 sets, 5-10 reps (rest 1 min.)'
  ]
]

60 thoughts on “Copy inner text of elements with same classes but in order (puppeteer)”

Leave a Comment