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

※このページは2019/7/14に更新されました。

こんにちは、ケネです。

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

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

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

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」で表現します。

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

let bodyText = "1行目の文字を入力します。\n2行目の文字を入力します。\n3行目の文字を入力します。",
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でボタンをクリックするを参照ください。

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

まとめ

この記事ではブラウザの入力フォームに文字を自動で入力する方法を解説しました。

別記事のボタンやリンクをクリックする方法を組み合わせることで、スクレイピングが実践できるようになるように書いています。

ぜひチャレンジしてみてください。

www.kennejs.com


www.kennejs.com


おすすめ参考記事

Puppeteerで作ったプログラムを自動実行させるライブラリの紹介です。
www.kennejs.com

Puppeteerを学習できる数少ない書籍です。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング