🍉

playwright-coreと、PCにインストール済みのChromeやEdgeを使って自動操作する

2021/06/24に公開

Playwright

tech

まえおき

playwright は、何も考えずに npm install playwright すると、Chromiumブラウザなどがダウンロードされ、自動操作ではそれが使われる。

PuppeteerではexecutablePathを指定することで、自分のChromeを使うことができた。

これをPlaywrightではどうやるの？という話。

executablePathを指定する？

Puppeteerと同じく、 playwright.chromium.launch() のパラメータでexecutablePathを指定すればいけます。

ただ、もっと簡単な方法があります。

channelを指定するだけ！

公式ドキュメントにはしれっと書いてあるんですが、

playwright.chromium.launch({channel: 'chrome'}) って書けば、PCにインストールされているChromeが起動します。 .launch({channel: 'msedge'}) って書けば、PCにインストールされているChromiumベースのEdgeが起動します。

実際にやってみる

npm init --yes
npm install playwright-core

ggrks.js

const playwright = require('playwright-core');

playwright.chromium.launch({channel: 'chrome', headless: false}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.type('input[name="q"]', 'playwright');
  await Promise.all([
  	page.waitForNavigation(),
  	page.keyboard.press('Enter'),
  ]);
  await page.waitForTimeout(3000);
  await browser.close();
});

まとめ

公式ドキュメントには書いてあるんですが、zennやQiitaでそれを書いた記事がなさそうだったので、とりあえず書き残してみました。

自分はmacOS使いなんですが、Windowsを使ってる人にPuppeteerを教えるときに割と苦労していました。「executablePathに、Microsoft Edgeのパスを指定してください」と言っても自分でできる人がほとんどいないのです。

その点、Playwrightは「channel: msedgeって指定してください」というだけで、Playwrightが自動でMicrosoft Edgeの居場所を指定してくれるので、本当に楽です。おすすめです。

補足情報

ソースコードの解説などを少しだけ。

channelパラメータはどうやってブラウザの居場所を指定しているのか？

macOS, Linuxについては、パスを固定で指定しています。
Windowsについては、環境変数からChromeがインストールされたドライブを取得して、パスをくっつけています。

channelに指定可能な値は？

WindowsとmacOSでは以下の８つ

chrome, chrome-beta, chrome-dev, chrome-canary, msedge, msedge-beta, msedge-dev, msedge-canary

Linuxでは以下の4つ

chrome, chrome-beta, chrome-dev, msedge-dev

今後変わる可能性はありますが、2021/6/24現在、以上のとおりです。

(2021.08.05 追記) Puppeteerでもchannelパラメータが使えるようになった

channelパラメータで、chrome, chrome-beta, chrome-canary あたりはPuppeteerでも使えるようになりました。（実は私がコントリビューションした）