【Node.js】Puppeteerで文字入力する（ログインする方法も）

この記事ではNode.jsのライブラリPuppeteerを使って文字入力する方法を解説します。

固定の文字を何回もWebに入力することってめんどくさいんですよね。
特にスマホはコピーして貼り付けるのも一苦労だと思います。

使えるシーンはあまりないですが、自動化できると強力な文字入力をサンプルを交えながら説明していきます。

Contents

1 Puppeteerで文字入力する基本の書き方
2 まとめ
3 おすすめ参考記事

Puppeteerで文字入力する基本の書き方

inputタグへの文字入力はpage.type()を使う

まずは基本の文字入力のコードを解説します。

inputタグの入力フォームに対して文字入力したい場合、page.type(selector, text[, options])を利用します。

例えば以下のようなWebブラウザの入力フォームに文字入力したい場合のHTML、Node.jsコードは以下となります。

HTML
<input type="text" name="username" placeholder="username">

Node.jsコード
//「kenne」という文字をinputタグに入力
await page.type('input[name="username"]', "kenne");
// 文字入力をゆっくり実施する場合（この例では100ミリ秒ごと）
await page.type('input[name="username"]', "kenne", {delay: 100});

inputタグのtype属性にはtext、passwordがありますがどちらも同じ方法で実行できます。

※まれにinputタグの文字列が反転してしまう場合があります。
以下記事で対処法を解説しています。
【Node.js】Puppeteerのpage.type()で日本語入力が反転してしまう場合の対処法 – Node.jsで暗号資産アービトラージ

textareaタグへの文字入力もpage.type()でOK

textareaタグは複数行の文字を入力することができますが、textareaへの入力もinputタグと同様の書き方で記載することができます。

改行は「\n」で表現します。

下のサンプルでは３行の文章をbodyText変数に格納して、textareaタグに入力するサンプルです。

let bodyText = "１行目の文字を入力します。\n２行目の文字を入力します。\n３行目の文字を入力します。",
await page.type('textarea[name="Body"]', bodyText);

ログイン画面で自動ログインする

ユーザ認証が必要なログイン画面でも同様の方法でログインすることができます。

//ユーザ名「kenne」、パスワード「kenne-pass」という文字をinputタグに入力
await page.type('input[name="username"]', "kenne");
await page.type('input[name="password"]', "kenne-pass");
//ボタンを押す
await page.click('input[type="submit"]');

ボタンの押し方はPuppeteerでボタンをクリックするを参照ください。

※二段階認証など、特殊な認証処理がされているものはこの方法ではログインできません。