Puppeteer 動的サイトでのクリック操作

Puppeteerにて動的なサイトでのクリック操作

PuppeteerにてWeb操作（クリック）をする際に、毎回動的に要素が作成される場合についてご教授ください。
サンプルコードの「<li id="xxxx-xxx"class="">」 xxxx-xxx部分が毎回動的に作成される場合直接指定してクリックすることが出来ませんでした。
このような場合、文字（例えば、メンズ）部分を指定してクリックすることは可能でしょうか？
またどのように記述するかサンプルコードを例にご教授ください。
宜しくお願い致します。

サンプルコード
          <li id="c3903c1a-8a3e-4b53-bf4e-1c504b5fb90d" class="">
        <input type="button">
        <span>メンズ</span>
      </li>
    
      <li id="e482adc5-7e55-40fb-bd8c-3ecbaf9bfb55" class="">
        <input type="button">
        <span>ウィメンズ</span>
      </li>
    </ul>![イメージ説明](dea1a568c1ec77805068c219f2aac277.jpeg)
```![イメージ説明](d22687eb9ad4f872094d4b0537d3aa28.png)

行動規範の内容に同意します

回答1件

Puppeteerのドキュメントに全部載っていますから参照してください。
特にPageをよく参照することになると思います。
英語が分からなければChromeの翻訳機能も駆使してがんばってみてください。
使用するAPIの組み合わせ方はいろいろ考えられると思いますが、以下一例です。

JavaScript
1const puppeteer = require('puppeteer');
2(async () => {
3    const browser = await puppeteer.launch();
4    const page = await browser.newPage();
5
6    // 確認のため、.goto(URL)ではなく.setContent(HTML文字列)を使っています
7    await page.setContent(`
8<ul>
9    <li id="c3903c1a-8a3e-4b53-bf4e-1c504b5fb90d" class="">
10        <input type="button">
11        <span onclick="kakunin.innerText='確かに狙いの要素がクリックされました'">メンズ</span>
12    </li>
13
14    <li id="e482adc5-7e55-40fb-bd8c-3ecbaf9bfb55" class="">
15        <input type="button">
16        <span>ウィメンズ</span>
17    </li>
18</ul>
19<p id="kakunin"></p>
20    `);
21
22    // メイン処理。ul下のspanすべてについて、そのinnerTextが'メンズ'と等しいかどうか判定し、等しければクリックします
23    await page.$$eval('ul span', spans => {
24        spans.forEach(span => {
25            if (span.innerText === 'メンズ') span.click();
26        });
27    });
28
29    // 確認のため、クリック後のHTMLをコンソールに表示しています
30    // 狙い通りクリックされていれば最後のp要素の中身が「確かに狙いの要素がクリックされました」になっているはずです
31    console.log(await page.content());
32
33    await browser.close();
34})();

出力結果：

bash
1$ node index.js
2<html><head></head><body><ul>
3    <li id="c3903c1a-8a3e-4b53-bf4e-1c504b5fb90d" class="">
4        <input type="button">
5        <span onclick="kakunin.innerText='確かに狙いの要素がクリックされました'">メンズ</span>
6    </li>
7
8    <li id="e482adc5-7e55-40fb-bd8c-3ecbaf9bfb55" class="">
9        <input type="button">
10        <span>ウィメンズ</span>
11    </li>
12</ul>
13<p id="kakunin">確かに狙いの要素がクリックされました</p>
14    </body></html>