あくまで個人的なメモ

あくまで個人的なメモ

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のエミュレートとかある。(座標指定してクリックとか出来る)

が、まあ上記書いた程度があればざっくり操作するスクリプトは書けるはず。 ページのassertionはまた今度。