puppeteerでフォームのinput要素の値をクリア・リセット

puppeteerはChromiumブラウザをAPIで制御するnode.jsのライブラリです。
デフォルトでheadlessモードで動作し、Cloud Functionsなどのサーバレス環境で動作させることもでき、簡単にクローラAPIの開発が可能です。

ブラウザ操作の自動化では、しばしばフォームの値を入力するシーンがあります。
puppeteerでは、下記のように値の入力を行うためのAPIが提供されています。

await page.type(selector, value);

しかし、すでに入力値が入っているフォームのクリアやリセットを行うためのAPIは提供されていません。
2018年に下記のようにissueが出されましたが、コントリビュータによって却下されています。

フォームの値クリアには、デフォルト値や動的な変更処理など様々なケースがアプリケーションの要件で存在するため、APIとしての提供は難しいとのこと。

開発者の提案する値クリアの方法は下記になります。

await page.$eval(selector, element => element.value = '');

evaluateを使って下記のように書くこともできます。

await page.evaluate(selector => document.querySelector(selector).value = '', selector);

$evalが短くてわかりやすいですね。

FFFT