Playwright のミニマムなテスト。

2023-02-04T02:06:05+09:00

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/

PlaywrightでBrowser has been closedというProtocol errorが出る場合

2020-04-07T21:21:42+09:00

PlaywrightはPuppetterチームだった方が作っているヘッドレス対応且つクロスブラウザのプロジェクト。Chromium、WebKit、Firefoxが使える。

WebKitで利用していたのだが、どうもサーバー上で実行させてみると下記のようなエラーが出て止まってしまった。

Protocol error (Playwright.createContext): Browser has been closed.

エラーメッセージもこれだけで、なにも分からない。

仕方がないのでPlaywrightのソースコードを見てみたところ、どうもいたるところでdebug関数を使用していることがわかった。これはnpmのdebugパッケージが使用されているもの。通常は何も出力されないが、DEBUG環境変数を指定することにより、指定されたデバッグメッセージを表示してくれるというもの。例えば下記のような感じで環境変数を指定すれば全てのメッセージを見ることができる。

DEBUG=* yarn dev

これでデバッグメッセージを見てみたところ、どうもLinux上の色んなシェアドライブラリが不足していた。とにかくエラーがなくなるまでライブラリをインストールしまくったら動くようになった。

ちなみに、かなりの数。しかもAmazon Linuxだとそもそもインストールできるのか謎のライブラリもあった。そのためUbuntuに切り替えて試したところ、数も減り、インストールもaptで全てでき改善できた。

ちなみに最初にchromium-browserをインストールしたことでだいぶ減らせたのではないかな……という気がしている。

「Playwright」の記事 - Crieit