PlaywrightをDockerで動かしてScreenshotをとってみた
Oct 30, 2022 17:40 · 1756 words · 4 minute read
最近、Webアプリのテストに使うツールを試しています。
今回はPlaywrightを試したので、メモを残しておきます。
- Docker ContainerにChromeをインストールする · kapieciiのブログ
- Node.js+axios+cheerioでWebスクレイピングをしてみた · kapieciiのブログ
目次
Playwrightとは
Microsoftが開発している、Webブラウザの操作を自動化するツールです。 Webアプリの操作をしたりスクリーンショットを残したりできるので、E2Eテストで利用できます。 同種のツールにSeleniumやPuppeteerがあります。
私は以前Puppeteer＋Codecept.jsを使っていました。
CodeceptJS + PuppeteerでWebアプリの動作テストを自動化した - kapieciiのブログ (hatenablog.com)
Playwright公式ドキュメントと解説動画
ドキュメント
Fast and reliable end-to-end testing for modern web apps | Playwright
PlaywrightのPMによる解説動画
動かしてみる
まずはDockerでPlaywrightを動かし、スクリーンショットを残すところまで試します。
環境
- node:18-bullseye( node - Official Image | Docker Hub )
下記のコマンドでコンテナを起動します。
docker container run -it --name playwright-sample1 --mount type=bind,source="$(pwd)"/src/,target=/mnt --rm node:18-bullseye bash
必要なパッケージをインストール
cd /mnt/
yarn init -y
yarn add ts-node playwright typescript
touch index.ts
package.json
{
"name": "sample",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "ts-node index.ts"
},
"dependencies": {
"playwright": "^1.27.1",
"ts-node": "^10.9.1",
"typescript": "^4.8.4"
}
}
index.ts
import { chromium } from "playwright";
const options = {
headless: true,
};
const URL = "https://www.ugtop.com/spill.shtml";
(async() => {
const browser = await chromium.launch(options);
const page = await browser.newPage();
await page.goto(URL);
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
実行すると、追加でインストールが必要と言われました。
yarn start
yarn run v1.22.19
$ ts-node index.ts
/mnt/index.ts:15
})();
^
browserType.launch:
╔══════════════════════════════════════════════════════╗
║ Host system is missing dependencies to run browsers. ║
║ Please install them with the following command: ║
║ ║
║ npx playwright install-deps ║
║ ║
║ Alternatively, use apt: ║
║ apt-get install libnss3\ ║
║ libnspr4\ ║
║ libatk1.0-0\ ║
║ libatk-bridge2.0-0\ ║
║ libcups2\ ║
║ libdrm2\ ║
║ libdbus-1-3\ ║
║ libatspi2.0-0\ ║
║ libxcomposite1\ ║
║ libxdamage1\ ║
║ libxfixes3\ ║
║ libxrandr2\ ║
║ libgbm1\ ║
║ libxkbcommon0\ ║
║ libasound2\ ║
║ libwayland-client0 ║
║ ║
║ <3 Playwright Team ║
╚══════════════════════════════════════════════════════╝
追加インストールして、再度実行
apt install libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libdbus-1-3 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libxkbcommon0 libasound2 libwayland-client0
yarn start
yarn run v1.22.19
$ ts-node index.ts
Done in 5.92s.
無事にスクリーンショットが取得できました。User AgentはHeadless Chromeでした。
UserAgentを変える
Playwrightでは、クライアントとして様々なデバイスを選択できます。
選択できるデバイスはこちら
playwright/deviceDescriptorsSource.json at main · microsoft/playwright (github.com)
今回はHeadless ChromeではなくDesktopのChromeを選択してみます。
index.ts
import pw from "playwright";
const options = {
headless: true,
};
const URL = "https://www.ugtop.com/spill.shtml";
const chrome = pw.devices["Desktop Chrome HiDPI"];
(async() => {
const browser = await pw.webkit.launch();
const context = await browser.newContext({
viewport: chrome.viewport,
userAgent: chrome.userAgent,
});
const page = await context.newPage();
await page.goto(URL);
await page.screenshot({ path: 'example2.png' });
await browser.close();
})();
選択したデバイスによっては、更に追加のインストールが必要らしいので、インストールします。
yarn start
yarn run v1.22.19
$ ts-node index.ts
/mnt/index.ts:22
})();
^
browserType.launch:
╔══════════════════════════════════════════════════════╗
║ Host system is missing dependencies to run browsers. ║
║ Please install them with the following command: ║
║ ║
║ npx playwright install-deps ║
║ ║
║ Alternatively, use apt: ║
║ apt-get install libgstreamer1.0-0\ ║
║ libgtk-3-0\ ║
║ libegl1\ ║
║ libopus0\ ║
║ libopengl0\ ║
║ libglx0\ ║
║ libwoff1\ ║
║ libharfbuzz-icu0\ ║
║ libgstreamer-plugins-base1.0-0\ ║
║ libgstreamer-gl1.0-0\ ║
║ libenchant-2-2\ ║
║ libsecret-1-0\ ║
║ libhyphen0\ ║
║ libwayland-egl1\ ║
║ libmanette-0.2-0\ ║
║ libepoxy0\ ║
║ libgles2\ ║
║ gstreamer1.0-libav ║
║ ║
║ <3 Playwright Team ║
╚══════════════════════════════════════════════════════╝
apt install libsoup2.4-1 libgstreamer1.0-0 libgtk-3-0 libegl1 libopus0 libopengl0 libglx0 libwoff1 libharfbuzz-icu0 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libenchant-2-2 libsecret-1-0 libhyphen0 libwayland-egl1 libmanette-0.2-0 libepoxy0 libgles2 gstreamer1.0-libav
再度実行すると、無事にスクリーンショットをとることができました。
yarn start
yarn run v1.22.19
$ ts-node index.ts
Done in 6.55s.
User AgentがHeadless Chromeから変わっていることがわかります。
最後に
Playwrightを試してみました。 今回はTypeScriptで試しましたが、Pythonや他の言語でも使えるのはありがたいですね。
Playwright for Python: ブラウザ操作を自動化しよう！ - kakakakakku blog (hatenablog.com)
Seleniumと違って、ドライバー周りのトラブルが無かったのも好印象です。
文字を入力したりボタンをクリックしたりといった操作も自由自在らしいので、そちらも試してみようと思います。