🍉

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

2 min read

まえおき

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

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

https://qiita.com/YusukeIwaki/items/e8e197ddcdf7f7f3013b

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

executablePathを指定する?

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

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

channelを指定するだけ!

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

https://playwright.dev/docs/browsers#google-chrome--microsoft-edge

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();
});

image

まとめ

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

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

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

補足情報

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

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

https://github.com/microsoft/playwright/blob/ea4eebeb2d1f5984e9dee504aa7501349ad762cc/src/server/chromium/findChromiumChannel.ts#L62
  • macOS, Linuxについては、パスを固定で指定しています。
  • Windowsについては、環境変数からChromeがインストールされたドライブを取得して、パスをくっつけています。

channelに指定可能な値は?

WindowsとmacOSでは以下の8つ

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パラメータが使えるようになった

https://github.com/puppeteer/puppeteer/releases/tag/v10.2.0

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

Discussion

ログインするとコメントできます