I have an HTML containing a series of DOM elements, called boards, all similar:

<li class="gridElem">
    <div element-data-type="board">
        <div class="clearfix>
            <div class="btnGroup">
                <button type="button" class="btn">X</button>
            </div>
        </div>
    </div>
</li>

<li class="gridElem">
[...]
</li>

Let’s say we have 4 elements, all equals.

I’m using Playwright with Typescript since a couple of weeks, so I’m not an expert, but I’m trying to click on all of those “X” buttons. Code has been semplified for clarity.

Since I used to use Cypress, I thought I could retrieve an array of elements called elemArray, then do a
for (el in elemArray) {}

and then finally click on it. But in PW is not that simple!

So, to retrieve an array of elements I tried to do something like

let boards = await this.page.$$eval('div[element-data-type="board"]', elems => elems);

or

const elementHandles = await this.page.$$('div[element-data-type="board"]');

for (let elemH of elementHandles) {
  await elemH.evaluate(domElement => {
    console.log(domElement);
  });
}

or

const elems = await this.page.locator('div[element-data-type="board"]').all()

but none of these worked.

Moreover, when I get the array, I want to click() on each of those buttons.

Any help on how can I retrieve the array?
I know in Playwright usually we don’t handle HTML Elements, so if there’s another way to do it, I’m here to learn.