<p>ブラウザの自動操作にPuppeteerを利用しているが、試しにPlaywrightを使ってみたら良いと思う点が多かったのでまとめた。正直な感想を言うと、「ほぼ上位互換では？」と思うくらいには良い点が多かったし、悪い点は見つからなかった。同じ作者の後発なだけはある。</p>
<p>なお、Puppeteer歴1年、Playwright歴1日で書いているので、変な箇所があればご指摘ください。</p>
<h1 id="%E5%88%A9%E7%94%A8%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3">
<a class="header-anchor-link" href="#%E5%88%A9%E7%94%A8%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3" aria-hidden="true"></a> 利用バージョン</h1>
<ul>
<li>Puppeteer : <s>5.5.0</s> 5.4.1</li>
<li>Playwright : 1.8.0</li>
</ul>
<h1 id="%E4%BE%BF%E5%88%A9%E3%81%A0%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%82%B9">
<a class="header-anchor-link" href="#%E4%BE%BF%E5%88%A9%E3%81%A0%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%82%B9" aria-hidden="true"></a> 便利だと思った点</h1>
<h2 id="%E3%81%A8%E3%81%A6%E3%82%82%E6%9F%94%E8%BB%9F%E3%81%AAselector">
<a class="header-anchor-link" href="#%E3%81%A8%E3%81%A6%E3%82%82%E6%9F%94%E8%BB%9F%E3%81%AAselector" aria-hidden="true"></a> とても柔軟なselector</h2>
<p>Puppeteerは<code>page.$x()</code>など一部でXPath selector が利用できるものの、<code>page.click()</code>や<code>page.$eval()</code>など多くの関数ではCSS selectorしか利用できなかった。<br>
しかし、Playwrightでは、selectorを利用するすべての関数で、CSS selectorもXPath selectorも利用できる。<br>
それだけではなく、表示上のテキストでマッチさせるselectorがあったり、CSS selectorに便利な擬似クラスが追加してあったり、複数種類のSelectorを組み合わせるなど、かなり柔軟に要素が特定できる。</p>
<p>参照 : <a href="https://playwright.dev/docs/selectors" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/selectors</a></p>
<p>なお、独自のselectorを作成／登録することは、Puppeteer(5.4以降)でもPlaywrightでも可能。これを使うと、Puppeteerでも結構柔軟なselectorが作れると思う。</p>
<p>参照 : <a href="https://playwright.dev/docs/api/class-selectors" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/api/class-selectors</a><br>
参照 : <a href="https://pptr.dev/#?product=Puppeteer&amp;version=v5.5.0&amp;show=api-interface-customqueryhandler" target="_blank" rel="nofollow noopener noreferrer">https://pptr.dev/#?product=Puppeteer&amp;version=v5.5.0&amp;show=api-interface-customqueryhandler</a></p>
<h2 id="auto-waiting">
<a class="header-anchor-link" href="#auto-waiting" aria-hidden="true"></a> Auto-waiting</h2>
<p>Puppeteerは要素が存在しない状態で<code>element.click()</code>などをするとエラーとなってしまうため、<code>page.waitForSelector()</code>などで要素の出現を待ってから要素を操作する場面が多かった。<br>
Playwrightでは、多くの操作でAuto waitingが採用されており、自動で一定時間要素の出現<sup class="footnote-ref"><a href="#fn-bd4e-1" id="fnref-bd4e-1">[1]</a></sup>を待ってくれる。これにより、<code>page.waitForSelector()</code>を使わずに簡潔に書ける場面がかなり増えた。</p>
<p>参照 : <a href="https://playwright.dev/docs/actionability" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/actionability</a></p>
<h2 id="innerhtml-%2F-ischecked%E3%81%AA%E3%81%A9%E3%80%81%E5%9C%B0%E5%91%B3%E3%81%AB%E4%BE%BF%E5%88%A9%E3%81%AA%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89">
<a class="header-anchor-link" href="#innerhtml-%2F-ischecked%E3%81%AA%E3%81%A9%E3%80%81%E5%9C%B0%E5%91%B3%E3%81%AB%E4%BE%BF%E5%88%A9%E3%81%AA%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89" aria-hidden="true"></a> innerHTML / isCheckedなど、地味に便利なメソッド</h2>
<p>内部テキストの取得や、チェックボックスにチェックが入っているか、など状態の取得は、Puppeteerでは<code>page.$eval()</code>などでブラウザ上でJavaScriptを走らせて取得していたが、Playwrightでは、<code>element.innerText()</code>や<code>element.isChecked()</code>などの関数がデフォルトで用意されているため、書くときに時短になる。</p>
<h2 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> ファイルダウンロード</h2>
<p>Puppeteerはファイルのダウンロード処理に特化した処理がなく、ダウンロード完了を検知することができなかった。<sup class="footnote-ref"><a href="#fn-bd4e-2" id="fnref-bd4e-2">[2]</a></sup></p>
<p>Playwrightでは、ダウンロードの開始をイベントとして知ることができ、完了までawaitすることもできるため、簡潔に書くことができる。</p>
<p>参照 : <a href="https://playwright.dev/docs/downloads" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/downloads</a></p>
<h2 id="1%E8%A1%8C%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#1%E8%A1%8C%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 1行でファイル選択</h2>
<p>&lt;input type="file"&gt;でファイルを選択する際に、<code>page.setInputFiles()</code>や<code>element.setInputFiles()</code>を利用すると、1行でファイルアップロード処理が可能<br>
(Puppeteerと似たように書ける、<code>FileChooser</code>クラスも用意されている。)</p>
<p>参照 : <a href="https://playwright.dev/docs/input#upload-files" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/input#upload-files</a></p>
<h2 id="fill()%E3%81%A7input%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E4%B8%8A%E6%9B%B8%E3%81%8D">
<a class="header-anchor-link" href="#fill()%E3%81%A7input%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E4%B8%8A%E6%9B%B8%E3%81%8D" aria-hidden="true"></a> fill()でinputのテキストを上書き</h2>
<p>&lt;input type="text"&gt;や&lt;textarea&gt;にテキストがすでに入っている場合、PuppeteerやPlaywrightの<code>element.type()</code>は、既存のテキストに追記する。<br>
Playwrigtは、<code>element.type()</code>とは別に<code>element.fill()</code>が用意されており、簡単にテキストの上書きができる。<sup class="footnote-ref"><a href="#fn-bd4e-3" id="fnref-bd4e-3">[3]</a></sup> Puppeteerでこれをやろうとすると、<code>element.$eval()</code>を使う(changeイベントが発火しない)、トリプルクリックや<code>Ctrl+a</code>の後<code>Delete</code>ボタン(何やっているのかわかりにくい)などイマイチだった。</p>
<p>参照 : <a href="https://playwright.dev/docs/input#text-input" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/input#text-input</a><br>
参照 : <a href="https://playwright.dev/docs/api/class-elementhandle#elementhandlefillvalue-options" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/api/class-elementhandle#elementhandlefillvalue-options</a></p>
<h2 id="select%E3%81%AEoption%E6%8C%87%E5%AE%9A%E3%81%ABlabel%E3%82%84elemenhandle%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B">
<a class="header-anchor-link" href="#select%E3%81%AEoption%E6%8C%87%E5%AE%9A%E3%81%ABlabel%E3%82%84elemenhandle%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B" aria-hidden="true"></a> selectのoption指定にlabelやElemenHandleが使える</h2>
<p>puppeteerでは、&lt;select&gt;の&lt;option&gt;指定は<code>page.select()</code>などでvalueを指定する必要があるが、value指定は結構面倒なことも多い。<br>
playwrightでは、valueのほか、labelやindex(何番目のオプションか)も使えるし、なんならElementHandleの指定もできる。</p>
<p>参照 : <a href="https://playwright.dev/docs/api/class-elementhandle#elementhandleselectoptionvalues-options" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/api/class-elementhandle#elementhandleselectoptionvalues-options</a></p>
<h2 id="%E3%82%B3%E3%83%BC%E3%83%89%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90" aria-hidden="true"></a> コード自動生成</h2>
<p>Puppeteerには、Puppeteer RecorderというChrome拡張のコードジェネレータがあるが、使ってみれば分かるが正直出来はあまりよろしくない。(イマイチの部分の多くは、ツール自体というよりはselectorの柔軟さのなさだが、それ以外の部分のコードも結構変。)<sup class="footnote-ref"><a href="#fn-bd4e-4" id="fnref-bd4e-4">[4]</a></sup><br>
Playwrightはコードジェネレータが付属しており、CLIからブラウザを起動して記録できるが、こちらはselectorの柔軟さも相まってそこそこ使えるコードを吐いてくれる。</p>
<p>参照 : <a href="https://playwright.dev/docs/intro#record-scripts" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/intro#record-scripts</a></p>
<h2 id="%E9%8C%B2%E7%94%BB">
<a class="header-anchor-link" href="#%E9%8C%B2%E7%94%BB" aria-hidden="true"></a> 録画</h2>
<p><code>browser.newPage()</code>などの引数に、<code>recordVideo</code> オプションをつけることで録画が可能。<br>
適当なページで試してみたら2分程のwebm動画(1280x720)で7MB程度<sup class="footnote-ref"><a href="#fn-bd4e-5" id="fnref-bd4e-5">[5]</a></sup>だった。</p>
<p>参照 : <a href="https://playwright.dev/docs/videos" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/videos</a></p>
<h2 id="%E5%A4%9A%E8%A8%80%E8%AA%9E%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#%E5%A4%9A%E8%A8%80%E8%AA%9E%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> 多言語対応</h2>
<p>PupetterはPythonバインディングであるPypetterがあるが、Playwrightは多言語対応が簡単になるような仕組みが用意されているようで、公式にPython/C#(Preview)/Java(Preview)に対応していほか、Rubyも<a href="https://playwright.dev/docs/why-playwright#limitations" target="_blank" rel="nofollow noopener noreferrer">そのうち対応するような書き方をしている</a>し、<a href="https://yusukeiwaki.hatenablog.com/entry/2021/01/13/how-to-create-playwright-ruby-client" target="_blank" rel="nofollow noopener noreferrer">独自に作っている人もいる</a>ようだ。<br>
公式のRuby版が出たら試してみよう。</p>
<p>参照 : <a href="https://playwright.dev/docs/languages" target="_blank" rel="nofollow noopener noreferrer">https://playwright.dev/docs/languages</a></p>
<h2 id="%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> クロスブラウザ対応</h2>
<p>Playwrightのウリなので、一応触れておくと、Puppeteerよりも多くのブラウザに対応している。ただ、状況は少し複雑で単純な利点というわけではない。</p>
<table>
<thead>
<tr>
<th>ブラウザ</th>
<th style="text-align:center">Puppeteer</th>
<th style="text-align:center">Playwright</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome/Chromium</td>
<td style="text-align:center">○</td>
<td style="text-align:center">○</td>
</tr>
<tr>
<td>Edge(Blink)</td>
<td style="text-align:center">○</td>
<td style="text-align:center">○</td>
</tr>
<tr>
<td>Firefox</td>
<td style="text-align:center">△(Nightly)</td>
<td style="text-align:center">△(独自改造版)</td>
</tr>
<tr>
<td>Webkit</td>
<td style="text-align:center">×</td>
<td style="text-align:center">△(独自改造版)</td>
</tr>
<tr>
<td>Edge(EdgeHTML)</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
</tr>
<tr>
<td>IE</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
</tr>
</tbody>
</table>
<p>Playwrightをインストールするときに、ブラウザを3つもダウンロードしてきて時間がかかると思っていたが、<a href="https://playwright.dev/docs/installation?_highlight=playwright_chromium_download_host#download-single-browser-binary" target="_blank" rel="nofollow noopener noreferrer">ブラウザを1つだけダウンロードするnpmパッケージが用意されている</a>ため、普段はこっちを使うと良さそう。<br>
<a href="https://playwright.dev/docs/installation?_highlight=playwright_chromium_download_host#skip-browser-downloads" target="_blank" rel="nofollow noopener noreferrer">環境変数を設定することで、ブラウザのダウンロードをスキップする</a>ことも可能(<a href="https://pptr.dev/#?product=Puppeteer&amp;version=v5.5.0&amp;show=api-environment-variables" target="_blank" rel="nofollow noopener noreferrer">Puppeteerでも可能</a>)。</p>
<h1 id="%E3%81%9D%E3%81%AE%E4%BB%96">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h1>
<p>ざっくりとしか使えていないので、あまり調査ができていない部分やマニュアルを見ただけで試していないものについて、ひとまずココにまとめる。<br>
気になる機能をここに追記したり、試したものは別項目にしたりします。</p>
<ul>
<li>ViewPortを設定しなくてもブラウザいっぱいに表示される？</li>
<li>
<code>keyboard.press()</code>がPuppeteerよりも高機能なのでは？</li>
<li>ドキュメントのNight Mode が目に優しい</li>
<li>
<code>page.waitForLoadState()</code>はどういうとき使うのかよく分かっていない</li>
</ul>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-bd4e-1" class="footnote-item">
<p>何を持って「出現」とするかは、操作により異なる。<a href="https://playwright.dev/docs/actionability" target="_blank" rel="nofollow noopener noreferrer">ドキュメント</a>参照。 <a href="#fnref-bd4e-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-bd4e-2" class="footnote-item">
<p>ダウンロードフォルダに<code>.crdownload</code>ファイルがなくなるのを定期的にチェックする、などしていた。 <a href="#fnref-bd4e-2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-bd4e-3" class="footnote-item">
<p>ドキュメントを読む限り、<code>keydown</code>など一部イベントが発火しないようなので、状況によっては利用できない。 <s><code>change</code>イベントは発火すると思っているが未確認。</s> <a href="https://github.com/microsoft/playwright/blob/d78d337e2973d3ea51e6bc7411fe40ceb3d8ad67/src/server/injected/injectedScript.ts#L366-L370" target="_blank" rel="nofollow noopener noreferrer">ソース</a>を見たら、ブラウザ側でJS走らせて、valueに入れている模様。<code>change</code>と<code>input</code>イベントはdispatchEventで発火させている。やはり<code>keydown</code>などは発火しない。 <a href="#fnref-bd4e-3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-bd4e-4" class="footnote-item">
<p><a href="https://umaar.com/dev-tips/241-puppeteer-recorder/" target="_blank" rel="nofollow noopener noreferrer">Chrome Canaryではrecorderを使える</a>らしいが試していない。 <a href="#fnref-bd4e-4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-bd4e-5" class="footnote-item">
<p>当然だが、録画内容に大きく依存する <a href="#fnref-bd4e-5" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Puppeteer使いがPlaywrightを使ってみて感じた利点

innerHTML / isCheckedなど、地味に便利なメソッド

fill()でinputのテキストを上書き

selectのoption指定にlabelやElemenHandleが使える

Yusuke Iwaki

<blockquote>
<p>Rubyもそのうち対応するような書き方をしているし、独自に作っている人もいるようだ。<br>
公式のRuby版が出たら試してみよう。</p>
</blockquote>
<p>独自に作っている人ですｗ</p>
<p>半月くらいまえに、公式ページから、</p>
<blockquote>
<p>The Playwright API cannot be used in Java or Ruby today. This is a temporary limitation as Playwright is built to support bindings for any language.</p>
</blockquote>
<p>この文章が消されてしまいました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8cd120d0078f2" src="https://embed.zenn.studio/card#zenn-embedded__8cd120d0078f2" data-content="https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fplaywright%2Fpull%2F5086" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/microsoft/playwright/pull/5086" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/microsoft/playwright/pull/5086</a></p>
<p>PlaywrightのSlackで「Ruby作らんの？」って聞いてみたんですが、いまのところ公式に作る予定は無いそうです...。</p>


<p>Ruby版、予定なくなったんですねー。残念です。</p>
<p>独自版の存在価値が高くなったということだと思うので、期待していますw</p>


Discussion