📚
Puppeteer備忘録（Nuxt.js, ElementUI対応？）
環境
- Nuxt.js 2.15
- puppeteer 13.1.1
書かないこと
- 環境構築方法
- Circle CIでE2Eテストを実行する方法
テンプレート
下記コードに書き込む想定です
const puppeteer = require('puppeteer')
let browser
let page
describe('ほげほげ', () => {
beforeAll(async () => {
browser = await puppeteer.launch({
args: ['--window-size=1920,1080']
})
page = await browser.newPage()
})
afterAll(async () => {
await browser.close()
})
it('ここに書く', async () => {
/////////////
})
})
故障かな？と思ったら デバッグ方法
`await page.screenshot({ path: 'sample.png' })が便利です。スクショが保存されます。gitに変なの載せないように気をつけてね
ページ遷移
await page.goto('http://localhost:8080')
nuxt.config.jsなどでauthしてないとsignInページなどに飛ばす設定をしている場合
// リダイレクト処理が走っているので最後のネットワーク通信が終わってから500ms待ちます
await page.goto('http://localhost:8080', {
waitUntil: 'networkidle2'
})
// サインインページにリダイレクトしています
expect(page.url()).toBe('http://localhost:8080/signIn')
または
await page.goto('http://localhost:8080')
// ネットワーク通信に関わらず、ページ遷移を待ちます
await page.waitForNavigation()
expect(page.url()).toBe('http://localhost:8080/signIn')
操作系
ElementUIのel-buttonは、普通にclickができなかったので、フォーカスしてEnterを押すというゴリ押しをした
// ボタンにフォーカス
await page.focus('ELEMENT')
// Enterを押下
await page.keyboard.press('Enter')
動的に生成する要素で出るタイミングが掴めないときはセレクタを待つというのも手
await page.waitForSelector('#hoge')
// 入力
await page.type('#hoge', 'foo')
取得した要素の中身などを正規表現で抽出し、次以降のテストに利用したりした
const content = await page.evaluate(function() {
return document.getElementById('.includeUrlArea').value
})
// 正規表現でURLを抽出
const re = `https?://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+`
const url = content.match(re)[0]
wait系まとめ
waitForTimeout
指定したミリ秒待つ
waitForSelector
指定したセレクタが現れるまで待つ
waitUntil
page.gotoなどの第二引数のオブジェクトに入れる。種類は以下
| 文字列 | 内容 |
|---|---|
| load | ローディングが終わった時 |
| domcontentloaded | DOMContentLoadedが終わったとき |
| networkidle0 | 500ms待ってネットワーク通信が発生していないとき |
| networkidle2 | 500ms待ってネットワーク通信が２つ以上発生していないとき |
Discussion