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

文字入力

この記事では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でボタンをクリックするを参照ください。

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

まとめ

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

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

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

https://kennejs.com/entry/2019/02/05/012907

https://kennejs.com/entry/puppeteer-transit-screen

おすすめ参考記事

Puppeteerを自作したらVPSで稼働させてみよう。

https://kennejs.com/entry/vps-ranking

外部サーバで稼働させるにはさくらVPSが手軽でおすすめです。

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

https://kennejs.com/entry/2019/04/07/091457

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUT US

ケネ
はじめまして、ケネです。

Node.jsの技術情報を書いています。

一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。
技術で自分の世界を広げましょう。

不明点や質問があればお気軽にコメントください。