web-dev-qa-db-ja.com

クラス名で要素を収集し、各要素をクリック-Puppeteer

Puppeteerを使用して、特定のクラス名を持つページ上のすべての要素を取得し、ループしてそれぞれをクリックします。

JQueryを使用すると、これを次のように実現できます。

var elements = $("a.showGoals").toArray();

for (i = 0; i < elements.length; i++) {
  $(elements[i]).click();
}

Puppeteerを使用してこれをどのように達成しますか？

更新

以下のChridamの答えを試してみましたが、うまくいくことができませんでした（答えは役に立ったので、そこに感謝します）、私は次のこととこの仕事を試しました：

 await page.evaluate(() => {
   let elements = $('a.showGoals').toArray();
   for (i = 0; i < elements.length; i++) {
     $(elements[i]).click();
   }
});
javascriptnode.jsgoogle-chrome-devtoolspuppeteerheadless-browser
16
Richlewis

page.evaluateJSを実行するには：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.evaluate(() => {
        let elements = document.getElementsByClassName('showGoals');
        for (let element of elements)
            element.click();
    });
    // browser.close();
});
13
chridam

すべての要素を取得するには、 page.$$ メソッドを使用する必要があります。これは、reqularブラウザAPIの[...document.querySelectorAll]（配列内に広がる）と同じです。

次に、それをループして（マップ、for、好きなように）、各リンクを評価します。

const getThemAll = await page.$$('a.showGoals')
getThemAll.map(link => {
  await page.evaluate(() => link.click())
})

また、取得したものでアクションを実行する必要があるため、上記と同じように動作する page.$$eval を使用して、その後に評価要素を各要素で実行することをお勧めします1行の配列。例えば：

const clickThemAll = await page.$$eval('a.showGoals', links => links.map(link => link.click())

上記の行をわかりやすく説明すると、$$evalはリンクの配列を返し、リンクを引数として関数を実行してから、mapメソッドを介してすべてのリンクを実行します。

公式ドキュメント も確認してください。そこには良い例があります。

7
bsides

page。$$（）/ elementHandle.click（）

page.$$() を使用して、指定されたセレクターに基づいて ElementHandle 配列を作成し、次に elementHandle.click() 各要素をクリックするには：

const elements = await page.$$('a.showGoals');

elements.forEach(async element => {
  await element.click();
});

注：忘れない await クリック async 関数。そうしないと、次のエラーが発生します。

SyntaxError：awaitは非同期関数でのみ有効です

1
Grant Miller