2023.09.01 2023.09.15

【Node】スクレイピング

kurumin

Contents

PlaywrightでHTML取得
Locatorで特定の要素を抽出
画面上のUIイベントをスクリプトで行う
- 文字入力
- クリック

PlaywrightでHTML取得

下記コマンドでplaywrightをインストール。

npx init playwright

下記ソースでHTMLを取得する。

import { chromium } from "@playwright/test";

(async () => {
  // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
  // ブラウザのタブ
  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  // ページ
  const page = await browser.newPage();

  await page.goto("http://localhost:3000");

  // HTML取得
  const htmlStr = await page.content();

  console.log(htmlStr);

  await browser.close();
})();

awaitについて

awaitは非同期処理（promiseを返す関数・順番を待たないで次の処理が実行される関数）に付けて、処理が終わるまで待機させる。
オブジェクトのprototypeの中身を確認し、asyncが先頭についている関数はawaitを付けると覚えたらOK。

Locatorで特定の要素を抽出

CSSセレクタで要素を取得

import { chromium } from "@playwright/test";

(async () => {
  // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');

  // CSSセレクタで要素を取得
  const pageTitleLocaor = await page.locator('.navbar-brand');
  const pageTitle = await pageTitleLocaor.innerText();
  console.log(pageTitle);

  await browser.close();
})();

文字列で要素を取得

const textLocaor = await page.locator('text=名刺管理アプリ');
const PageText = await textLocaor.innerText();
console.log(PageText);

xpathで要素を取得（目印がない場合に使用）

const xpathLocaor = await page.locator(`xpath=//*[@id="__next"]/nav/div/a`);
const xpathText = await textLocaor.innerText();
console.log(xpathText);

xpath=//*[@id=”__next”]/nav/div/a

xpath=： XPathセレクタを指定することを示す接頭辞。
//: ドキュメント内のどの階層でもマッチすることを示します。
[@id="__next"]： id 属性が "__next" という値を持つ要素を指定します。この部分は要素を特定するための属性条件です。
/nav： id 属性が "__next" の要素の中にある nav 要素を指定します。この部分は階層内の要素を特定するための要素名です。
/div/a： nav 要素の中にある div 要素の中にある a 要素を指定します。これにより、指定された条件の要素が特定されます。

HTMLドキュメント内の id 属性が "__next" の要素の下にある nav 要素内の div 要素の下にある a 要素という意味になる。

開発ツールから要素を選択しコピー→xpathで簡単に取得することもできる。

その他

●番目の要素を取得

const pageItemLocaor = await page.locator('.cards.list-group-item > a >> nth=2');
const pageItem = await pageItemLocaor.innerText();
console.log(pageItem);

nth=2

同じ要素が並んでるときに、何番目を取得するかを指定する。
0からスタートするので、2にした場合は3番目の要素が取得されることになる。
nth=-1とすると、最後の要素を取得できる。
.cards.list-group-item:nth-child(3) > a の書き方も可能。

特定の要素の親要素を取得

const pageItemLocaor = await page.locator('.cards.list-group-item >> ..');
const pageItem = await pageItemLocaor.innerText();
console.log(pageItem);

>> ..

.cards.list-group-itemの親要素という意味になる。

要素の数を取得

const cardLocator = page.locator('.cards.list-group-item');
const cardCount = await cardLocator.count();
console.log(cardCount);

画面上のUIイベントをスクリプトで行う

文字入力

下記のソースで、input要素に文字入力を行える。

import { chromium } from "@playwright/test";

(async () => {
  // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
  await page.waitForTimeout(2000);
  
  // input要素に文字列を入力
  const inputLocator = page.locator(`xpath=//*[@id="__next"]/div/div[1]/label/input`);
  await inputLocator.type('美穂');

  await browser.close();
})();

クリック

ページャーを取得し、クリックする。

const pager3Locator = page.locator('.page-link.page-number >> nth=2');
await pager3Locator.click();

ABOUT ME