👋

playwrightをdockerで動かしてみる。

2020/12/18に公開

Docker

playwrightとは

playwrightはpuppeteerなどと同じようなヘッドレスブラウザです。マイクロソフトが作成しています。ブラウザをスクリプトで動かすことができるので、スクレイピングやテストなどの用途が考えられます。

puppeteerに比べてplaywrightの良い点は、chrome以外のブラウザのエンジンにも対応しているところです。firefoxやwebkitなどでも動かせます。

マイクロソフトが中心で開発されていますが、Googleのpuppeteerの開発者がかかわっているらしく、書き方は似ています（ほぼ同じ）。

構成

/
├ app/
│　├ data/ (ここにスクショ保存する)
│　└ script.js
├ Dockerfile
└ docker-compose.yml

サンプルコード

Docker関連

Dockerfile

FROM mcr.microsoft.com/playwright

COPY ./app/ /usr/src/app/

WORKDIR /usr/src/app

# 日本語対応
RUN apt-get update && \
    apt-get -y install locales fonts-ipafont fonts-ipaexfont && \
    echo "ja_JP UTF-8" > /etc/locale.gen && locale-gen
    
# playwrightインストール
RUN npm i playwright

# script実行
CMD bash -c "node script.js"

docker-compose.yml

version: "3"
services:
  playwright:
    build:
      context: .
      dockerfile: ./Dockerfile
    # DockerfileでCOPYしているが、スクリプトを変更して試したいので上書き
    volumes:
      - ./app/:/usr/src/app/
    # コンテナを立ち上げっぱなしにするならttyをture
    # tty: true

日本語、iphone11のサイズで、スクリーンショットを撮って保存するコード

script.js

const {webkit,devices} = require('playwright');

(async () => {
  const browser = await webkit.launch(); // or 'firefox','chromium'
  const iPhone11 = devices['iPhone 11']
  const url = 'https://www.google.com'
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'ja'
  });
  const page = await context.newPage();
  await page.goto(url);
  await page.screenshot({ path: 'data/example.png' });
  await browser.close();
})().catch(error => { console.log(error) });

コンテナを立ち上げて、コードを実行

docker-compose up

プロセスが終了するので、コンテナは勝手に落ちますが、dataの中にスクリーンショットが保存されます。

以上です。

参考

公式
 Dockerイメージ
 公式github
Puppeteerで日本語文字化けを防ぐRTA
Playwrightも知らないで開発してる君たちへ

playwrightとは

構成

サンプルコード

参考

Discussion