Node.jsとPlaywrightでFirefoxを自動操縦する
これまで社内向けにPuppeteerにてChromeを自動操縦するアプリケーションを複数作成してきました。その自動化の結果として利用者の作業負担が減るとともに、ミスが減り余計なサイトの操作をする学習コストも減らすことが出来ました。
しかし、一部のPCで原因不明のPage CrashエラーやSTATUS_STACK_BUFFER_OVERRUNのエラーが出るケースがあり、それをきっかけとして、Puppeteerと同じ源流を持つMicrosoftのPlaywrightを使ってみる事にしました。今回はファイルのダウンロードをするコードを記述してます。
目次
今回使用するライブラリ等
- @playwright/test – Github もしくは playwright
- playwright-firefox – npm
Playwrightは本来Typescriptで記述するのが定石のようですが、通常のJavaScriptであっても利用は可能です。よって、今回は上記のライブラリだけをインストールして利用します。プロジェクトに対して以下のコマンドでインストールしておきます。
|
1 2 3 4 5 |
npm i -D @playwright/test もしくは npm i playwright |
また、Puppeteerと一定の互換性があるため、流儀やコードはそのまま利用可能な部分も非常に多いです。Puppeteerについては以下のエントリーを参考にしてみてください。
playwright-firefoxを入れておかないと初回起動時にエラーが出ます。Firefox Nightlyを使いたい場合は、playwright-firefoxもnpmで入れておきましょう（@playwright/testではなくplaywrightの場合、npmでインストール時に3つのコアをダウンロードしてくれますので不要です）
npmでインストールした場合、「C:\Users\ユーザ名\AppData\Local\ms-playwright」にfirefoxはダウンロードされます。
Playwrightについて
概要
PuppetterとPlaywrightはどうやら同じ作者さんが、それぞれGoogleに居たとき、Microsoftに転籍してから作ったプロダクトのようで、非常に親しい存在でありながら、かなり毛色の違う点もあります。
- Puppeteerと異なり、FirefoxやSafari（Webkit）の操縦もすることが可能
- 通常のNode.jsだけじゃなく、TypeScriptやPython, Java, .NET等でも利用する事も可能
しかし、親しいだけで完全互換ではありません。特に今回のファイルのダウンロード等に関しては、仕様が大分異なる点もあります。また、ドキュメント量に関しては正直、Playwrightは後発ということもあって、Puppeteerと比較すると少ないのが難点です。
※現在、PuppeteerでもFirefox Nightlyを操作出来ますが、Playwrightの場合Firefox Nightlyの改造版（自動ダウンロードされる）を操作することになります。
図：FireFoxの改造版を動作してる様子
図：Firefoxの別途インストールを要求
Electron等で配布するような場合
現在、exectablePathで指定出来るのは、EdgeとChromiumのみで、FirefoxやSafariはexeを指定しても動作しません。指定しても通常のFireFoxでは以下のようなエラーが出て起動できません。Nightlyをインストールしても同様のエラーで、jugglerという特殊なバージョンでなければ動作しないようです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(node:17896) UnhandledPromiseRejectionWarning: browserType.launch: Protocol error (Browser.enable): Browser closed. ==================== Browser output: ==================== <launching> C:\Users\ユーザ名\AppData\Local\Mozilla Firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\ユーザ名\AppData\Local\Temp\playwright_firefoxdev_profile-XPREVJ -juggler-pipe -silent <launched> pid=15920 [pid=15920][err] [pid=15920][err] ###!!! [Parent][PGPUParent] Error: RunMessage(msgname=PGPU::Msg_ShutdownVR) Channel closing: too late to send/recv, messages will be lost [pid=15920][err] =========================== logs =========================== <launching> C:\Users\ユーザ名\AppData\Local\Mozilla Firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\ユーザ名\AppData\Local\Temp\playwright_firefoxdev_profile-XPREVJ -juggler-pipe -silent <launched> pid=15920 [pid=15920][err] [pid=15920][err] ###!!! [Parent][PGPUParent] Error: RunMessage(msgname=PGPU::Msg_ShutdownVR) Channel closing: too late to send/recv, messages will be lost [pid=15920][err] ============================================================ at puppetrun (C:\Users\ユーザ名\Documents\tscheck-win32-x64\resources\app\index.js:11499:35) at C:\Users\ユーザ名\Documents\tscheck-win32-x64\resources\app\index.js:10699:9 (Use `electron --trace-warnings ...` to show where the warning was created) (node:17896) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2) (node:17896) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:17896) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. |
よって、Electron等にPlaywrightを組み込んで配布するようなプログラムの場合は、クライアントPCにてnpmでインストール等当然できないので、以下のような措置が必要となります。
- 「C:\Users\ユーザ名\AppData\Local\ms-playwright\firefox-1323\firefox」の場所にFirefox Jugglerがインストールされてる必要性がある
- 1.のファイル群は開発マシンの中にだけ存在するので、上記のファイル群をパッケージにして別途配布する。
- 1.のケースの場合、exectablePathにてfirefox.exeを指定しても動作します
コードと解説
ソースコード
Puppeteerと大きくことなる点がいくつかあるので、そこを注意しながら記述する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
//firefoxで起動する const { firefox } = require('@playwright/test'); //ファイルの読み書きモジュール const fs = require('fs'); //デスクトップのパスを取得 var dir_home = process.env[process.platform == "win32" ? "USERPROFILE" : "HOME"]; var dir_desktop = require("path").join(dir_home, "Desktop"); (async () => { //ブラウザオプションを指定する const browser = await firefox.launch({ acceptDownloads: true, //ダウンロードの許可 downloadsPath: dir_desktop, //ダウンロード先の指定 headless : false, slowMo:500 }); //新しいページを追加 const page = await browser.newPage(); try { //ブランクページを開く await page.goto('about:blank'); //ダウンロードイベントを定義 var event = page.waitForEvent('download'); //ファイルを開いてダウンロードする await page.goto('https://officeforest.org/wp/library/note.odg'); //ダウンロードイベントを待機 var download = await event; var downloadError = await download.failure(); if (downloadError != null) throw new Error(downloadError); //ダウンロードしたテンポラリファイルのパスを指定 await sleep(3000); var result = await download.path(); console.log('Download started to:' + result); //テンポラリファイルをリネームする fs.renameSync(result,dir_desktop+"\\test.odg"); //ブラウザを閉じる await browser.close(); } catch (e) { //エラー発生時の処理 console.error('CAUGHT JS-EXCEPTION: ' + e.name + '\n' + 'MESSAGE: ' + e.message + '\n' + 'LINE: ' + e.lineNumber + '\n' + 'STACK: ' + e.stack + '\n'); } })(); //スリープする処理 function sleep(milliSeconds) { return new Promise((resolve, reject) => { setTimeout(resolve, milliSeconds); }); } |
解説
どのブラウザを利用するか？を決めるのが1行目。変数名でfirefoxを指定するとFirefoxを利用する事が可能になります。Firefox自体は初回に自動ダウンロードされるため、ユーザが別途インストールする必要はありません（またこのときダウンロードされるのは、Firefox Nightlyになります）
webkitを指定すればSafariを、Chromiumを指定すればChromiumを操作するようになります。
次に、browserの定義でfirefox.launchにオプション指定することが可能です。ダウンロードをさせる場合には以下の２つの指定が必要です。Puppeteerの場合は、cdpsessionにてdownload先の変更をしていましたが、Playwrightの場合はオプション指定で変更が必要になっています。
|
1 2 |
acceptDownloads: true, //ダウンロードの許可 downloadsPath: dir_desktop, //ダウンロード先の指定 |
ダウンロードについても単純にボタンをクリックして終わり・・・ではなく、イベントの定義が必要となっていて、定義をしておき、その結果としてダウンロードされるファイルは通常のファイルではなくテンポラリファイルになっています。よって、fs.renameSyncにてそれを本来のファイル名にリネームする処理を追加しています。パスは変数downloadの中に格納されるので、download.path()でフルパスを取得することが可能となっています。
page.waitForEvent(‘download’)が、ダウンロード待機できるのは、デフォルトでは30秒までなので、操作が多いコードの上部でセットしてしまうと操作中にTimeoutしてしまうので、ダウンロード直前にセットすると良いでしょう。またTimeoutの指定秒数を指定する事も可能です。
|
1 2 |
//ダウンロードイベントを定義 var event = page.waitForEvent('download',{ timeout: 90000 }); |
ややこしい反面、きちんとダウンロード待機してくれるので、コード自体はPuppeteerよりもスッキリしてると思います。また、公式サイトにはPromiseでダウンロードボタンをクリックして完了するまでを括って、ダウンロード完了待ちの事例が掲載されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
(async () => { const browser = await playwright['chromium'].launch(); const context = await browser.newContext({ acceptDownloads: true }); const page = await context.newPage(); await page.goto(pageWithFiles); const [ download ] = await Promise.all([ page.waitForEvent('download'), // wait for download to start page.click('.download-button') ]); // save into the desired path await download.saveAs(reliablePath); // wait for the download and delete the temporary file await download.delete() await browser.close(); })(); |
viewportの指定
上記のコードではブラウザの画面サイズ等していせずに起動していますが、予め開くサイズを指定した状態で起動させる事も可能。以下のようにviewportを指定する事が可能です。Puppeteerとは指定方法が異なる点の１つです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const browser = await firefox.launch({ acceptDownloads: true, //ダウンロードの許可 downloadsPath: dir_desktop, //ダウンロード先の指定 headless : false, slowMo:500 }); //viewportの指定 const context = await browser.newContext({ viewport: { width : 1200, height: 800 } }); //pageの定義 const page = await context.newPage(); |
pkgでEXE化できるのか？
Puppeteerの場合、puppeteer-coreを利用していたので、pkgにて単体のEXE化するにあたって以下のコマンドで簡単にパッケージにできました。ブラウザコンポーネントを含んでいないので、node_modulesなどがパッケージにされずといったこともありませんでした。
|
1 |
pkg index.js -t win --public |
しかし、今回のplaywrightの場合、バイナリのEXEが含まれている為、@playwright/testの場合はCannot include directory %1のエラーが出て失敗。playwrightの場合はUnexpected characterのエラーが出て失敗。
playwright-coreの場合、インストール済みのブラウザは利用できるものの、firefoxはexectablePathで指定ができない為使えません。
よって現時点ではEXEでパッケージにしてどうこうはできそうにないです。
関連リンク
- Playwright を使ってみた
- Playwrightも知らないで開発してる君たちへ
- 最新自動テストツール『Playwright for Python』さわってみた
- Chromeの操作を記録してPuppeteerやPlaywrightのコードに置き換えてくれる「Headless Recorder」レビュー
- 2020年12月現在、puppeteerとplaywright どっち選んだらいいの？
- How to download a file with Playwright?
- Playwrightをインストールしてサンプルコードを動かす＆サンプルを読みながら理解する
- [BUG] Downloading fails if ‘downloadsPath’ gets set #9279
- puppeteer でファイルをダウンロードするときに、任意のパスと名前を指定して保存する
- [Question] Changing download Directory? #2492
- Chromeで「STATUS_STACK_BUFFER_OVERRUN」の表示エラーが頻発。発生した状況と対応事例
- playwright-firefoxでggrksする
- Playwright の Java 版を試してみる
- Playwright を使用してMicrosoft Edgeで自動化とテストを行う
- PlayWright を使ってE2Eテストを書いてみた
- pkg fails with Error! Unexpected character ‘�’ (1:2)
- [ERROR] Cannot include directory %1 into executable… Packaged correctly but no output, app not working #377
- playwright-coreと、PCにインストール済みのChromeやEdgeを使って自動操作する
- [BUG] Playwright-core – Timeout while waiting for event \”download\”\nNote:
