Playwright のミニマムなテスト。

https://rentry.co/c53xn

Playwright とはなにか。

Microsoft Playwright とは？

Selenium みたいなもの。
https://www.selenium.dev/

Puppeteer みたいなもの。
https://pptr.dev/
https://youtu.be/ARt3zDHSsd4?t=70

簡単に言うと、ブラウザを使って、javascript が動作することでページがちゃんと見えるうなうなサイトをスクレイピングしたりするのに使うプログラムのセットのようなもの。
ブラウザのプログラムが別に必要だが、パッケージマネージャーでインストールするタイプのものだと、セットでインストールすることもできる。

https://github.com/microsoft/playwright

Node.js と npm

前準備として node.js をインストールして、npm パッケージマネージャ―が使える状態にする。
以降は、 node.js のインストールが完了されている状態での操作になる。

node.js インストールの手順は省略
https://nodejs.org/ja/download/

Node.js をインストールすると npm パッケージマネージャーが使えます。
Node.js 向けのモジュールは npm パッケージマネージャーのコマンドでインストールします。
npm を使って、別のパッケージマネージャーをインストールすることができます。ですが、この記事では使用しません。

npm と node.js のバージョン。

npm -v
9.3.1

node -v
v19.5.0

ブラウザを立ち上げて手動で操作して、その過程をコードで記録する。 test & codegen

手動でページ移動などの操作をして、コードとして記録する。

https://youtu.be/wGr5rz8WGCE?t=130

前準備として node.js をインストールして、npm パッケージマネージャ―が使える状態にする。
https://nodejs.org/ja/download/

Playwright のインストール。chromium ブラウザーも同時にインストールされる。

npm i -D playwright

https://www.youtube.com/ を chromium ブラウザーで開いて、操作する。

 npx playwright codegen https://www.youtube.com/

chromium ブラウザーのウィンドウが２つ開いて、

ブラウザ上の操作が記録されていく。

手動でブラウザでテキスト入力したり、ボタンを押したりしたりしたことがコードとして記録されるので、このことを利用して、記録されたコードをコピーして自動処理のプログラムコードにペーストして編集すれば期待する動作のプログラムのコーディングに役立つ。

node.js での実行

javascript のプログラムファイルをつくり、Node.js で js ファイルを実行する。

https://www.youtube.com/watch?v=2_BPIA5RgXU&list=PLkiSKDHzztLAChyWRdYyFcIM-_yJTjrsR

まず、これから作るプログラムのプロジェクト用のディレクトリをつくる。

mkdir playw_test
cd playw_test

package.json

package.json というファイルを作って、そこにインストールしたいパッケージとバージョンを JSON 書式で書く。
https://www.startup-cloud.co.jp/liberty-technology/PublicItems/npm/package.json.html

package.json
https://rentry.co/5gm25u

{
    "devDependencies": {
        "playwright": "1.30.0"
    }

}

npm パッケージマネージャーで install コマンドを実行すると、package.json に記載されたパッケージがインストールされる。

npm install

playtest.js

https://rentry.co/zga9c

/**
* node.js から playwright での chrome ブラウザ操作テスト
**/

const playwright = require('playwright');

const url = "https://www.youtube.com/";

(async () => {
  const browser = await playwright.chromium.launch({
    channel: 'chrome',headless : false,
  });

  //context
  const context = await browser.newContext();
  //page
  const page = await context.newPage();
  //navigate
  await page.goto(url);
  var date = Date.now();
  //screenshot
  await page.screenshot({path: `${date}.png`});

  await browser.close();

  })();

気をつけないといけないのは、メソッド全てに awaitキーワードをつけないと、そんなメソッドはないですというそっけないエラーになるので、await を忘れるとあるはずのメソッドが無いということでどこで何がおかしいのかわからなくなる。

Node.js での実行。

playtw_test> node ./playtest.js

コマンドを実行して playtest.js が実行されると、ブラウザが立ちあがり、サイトに移動して、スクリーンキャプチャを保存して、ブラウザが閉じる。

test

playtw_test> playtest_2.js
https://rentry.co/2iui8

const playwright = require('playwright');

let url = ``; 
for( i = 2;i < process.argv.length; i++) {
  url = process.argv[i] ;
}

(async () => {
  const browser = await playwright.chromium.launch({
    channel: 'chrome',headless : false,
  });

  //context
  const context = await browser.newContext();
  //page
  const page = await context.newPage();
  //navigate
  await page.goto(url);

  await page.getByPlaceholder('検索').click();
  await page.getByPlaceholder('検索').fill('鳥インフルエンザ');
  await page.getByPlaceholder('検索').press('Enter');
  await page.waitForTimeout(1000);
  //screenshot
  var date = Date.now();
  await page.screenshot({path: `${date}.png`});

  await browser.close();

  })();

playtest_2.js を node.js で実行。

playtw_test> node ./playtest_2.js http://www.youtube.com/