How to extract textContent from a list of classes in Puppeteer - css-selectors

Question

In Puppeteer how can I extract the date and list of items purchased on that date? I can extract each class separately with a querySelectorAll([class='date or item']) but don't know how to do it all at one time.
I wish to extract Jan 1, 2022, item-1, item-2, item-3, Feb 1, 2022, item-4, Mar 1, 2022, item-5, item-6.
<ul>
<li>
<div class=”date”>Jan 1, 2022</div>
<div class=”item”>item-1</div>
<div class=”item”>item-2</div>
<div class=”item”>item-3</div>
</li>
<li>
<div class=”date”>Feb 1, 2022</div>
<div class=”item”>item-4</div>
</li>
<li>
<div class=”date”>Mar 1, 2022</div>
<div class=”item”>item-5</div>
<div class=”item”>item-6</div>
</li>
</ul>

Answer 1

I'm not 100% sure if you want a flat array or an array organized by date (the second option seems much clearer to me), but here's both:
// flat array of both classes
console.log(
[...document.querySelectorAll(".date, .item")]
.map(e => e.textContent)
);
// date array of objects
console.log(
[...document.querySelectorAll(".date")].map(e => ({
date: e.textContent,
// or e.parentNode
items: [...e.closest("li").querySelectorAll(".item")]
.map(e => e.textContent)
}))
);
// object keyed by dates, if they're unique
console.log(
[...document.querySelectorAll(".date")].reduce((a, e) => {
a[e.textContent] =
[...e.closest("li").querySelectorAll(".item")]
.map(e => e.textContent)
;
return a;
}, {})
);
<ul>
<li>
<div class="date">Jan 1, 2022</div>
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
</li>
<li>
<div class="date">Feb 1, 2022</div>
<div class="item">item-4</div>
</li>
<li>
<div class="date">Mar 1, 2022</div>
<div class="item">item-5</div>
<div class="item">item-6</div>
</li>
</ul>
Here's how to scrape the alternate HTML structure with nested image tags based on your new requirements from the comments and this follow-up question:
console.log(
[...document.querySelectorAll(".date, .item")]
.flatMap(e =>
e.classList.contains("item")
? [...e.querySelectorAll("img")]
.map(e => e.getAttribute("alt"))
: e.textContent
)
);
<ul>
<li>
<div class="date">Mar 1, 2022</div>
<div class="item">
<img src="http://image.com/img3.jpg" alt="item-3">
<img src="http://image.com/img5.jpg" alt="item-5">
</div>
</li>
<li>
<div class="date">Mar 3, 2022</div>
<div class="item">
<img src="http://image.com/img2.jpg" alt="item-2">
</div>
</li>
</ul>