Puppeteer で Headless Chromeを操ってE2Eテストする(予定) - 入力・操作編
前回の内容で簡単なインストールと実行まで確認した。
軽いおさらいも込みでpuppeteerで入力や基本的な操作をするやり方を書いておく。(多分忘れて毎度調べる羽目になるので)
input
selectorで指定した要素に対してvalueで指定した値を入力する。textareaも同様。
page.type('input[name="inputname"]', 'value'); page.type('#inputid', 'value');
checkbox
要素に対してクリックすればよい。radioボタンも同様。
page.click('#checkboxid');
selectbox
selectboxを選択するAPIが存在する。
<select id="lang"> <option value="">----</option> <option value="js">JavaScript</option> <option value="rb">Ruby</option> <option value="py">Python</option> <option value="php">PHP</option> </select>
↑こういうのを↓こう操作する。
page.select('select#lang', 'js');
複数選択可能な場合は選択する値を列挙すれば良い。
page.select('select#colors', 'red', 'green', 'blue');
要素をクリックする。
セレクタ指定してクリック。
page.click('#elem');
要素をタップする
ontapイベントの発火。clickを無効化している場合。試してない。
page.tap('#elem');
要素にカーソルを重ねる。
hoverのことね。
page.hover('#elem');
hoverで現れる要素とかある場合に使う。ハンバーガーメニューとか。試してない。
basic認証を突破する。
const page = await browser.newPage(); await page.authenticate({username: 'user', password: 'password'}); await page.goto('targeturl');
PuppeteerでBasic認証されてるページにアクセス - Qiita のようにHTTPHeaderを作る方法でもイケる。
const page = await browser.newPage(); await page.setExtraHTTPHeaders({ Authorization: `Basic ${new Buffer('user:password').toString('base64')}` }); await page.goto('targeturl');
ダイアログを操作する。
alertとかpromptとかconfirmとか。 dialogイベントがあるのでイベント処理をする?みたい。試してない。
page.on('dialog', dialog => { console.log(dialog.message()); dialog.accept(); })
Dialogクラスにはaccept, dismiss, message, type等のメソッドがある。 このあたりはあとでためす。
その他
apiドキュメントを見ろ(酷
KeyboardのエミュレートとかMouseのエミュレートとかある。(座標指定してクリックとか出来る)