puppeteer向けのタスクランナーみたいなの書いたので紹介します🐸
pastak.iconPasta-K @ KyotoJS 14
こんにちは
https://gyazo.com/422954eb4591d345c7d507cae73748ae
誰
京都大学工学部情報学科5回生
Nota Inc Gyazo開発チーム アルバイト
JavaScript / React / Ruby on Rails / Browser Extension
株式会社はてな アルバイト
TypeScript
今日のトークテーマ
E2Eテストの話題
kaerukun🐸というツール作ったので良かったら使ってください
WebアプリケーションのE2Eテストやってますか
人間
PhantomJS
Selenium
Puppeteer
今日はこれの話をします
R.I.P PhantomJS ⚰️
https://gyazo.com/3594ce4718c416d45c0bb8abd4f538bc
Puppeteer
https://github.com/GoogleChrome/puppeteer
Chrom(e|ium)をdevtool protocol経由で操作するためのNode向けのライブラリ
今の最新版は1.2.0
Puppeteerこういう感じです
code:js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
E2E困りごと
マルチブラウザ動作環境構築
E2Eテスト用アプリケーション動作環境構築
タスクとURLの紐付け
タスクとURLの紐付け
一般的なウェブアプリケーションの場合、1つのテストに1つのURL(Path)が紐付けば良い
テストを書いていく中でどんどんURLを書いていけばテストできる
同じアプリケーションが複数のURLで動作している && それぞれをE2Eテストで担保したい場合
stagingとproductionをそれぞれ見たい
デザインなどは異なるが主となるHTML/JSやそれらの振る舞いは同じものを提供していてテストしたい
kaerukun🐸
https://www.npmjs.com/package/kaerukun
Puppeteerをラップして使うタスクランナーみたいなもの
URLとテストタスクファイルをそれぞれグループに紐付けて実行できる
URLのグループ分けは設定ファイルにシュッと書く
タスクファイルのグループ分けはディレクトリ構造でやる
設定こういう感じです
code: kaerukun.config.js
module.exports = () => {
return {
tasks: './tasks',
urls: {
'foo': [
'https://example.com/foo',
{
'piyo': ['https://example.com/piyo'],
'hoge': ['https://example.com/hoge', 'https://example.com/piyo'],
'huga': ['https://example.com/huga']
}
],
'bar': [
'https://example.com/bar'
]}},
puppeteer: launchOption,
concurrent: 10
}
タスクファイルの様子です
puppeteerのPageクラスを受け取る
code: task/example.js
module.exports = async (page) => {
const titleAndUrl = await page.evaluate(() => document.title, location.href)
console.log(...titleAndUrl)
}
URLグループ分けの図
https://gyazo.com/25fdc919b04b7c94516e2860c0751e77
タスク適応の図
https://gyazo.com/a12cca2887f752a8967fa0f2a864f682
タスク適応の図
https://gyazo.com/27f41f99cf30005fb0e5350897867d40
タスク適応の図
https://gyazo.com/d5c4bf1bace0df48bcc26c867314e358
タスク適応の図
https://gyazo.com/d9d358e80bffc21595a8a634500c7636
実行の様子
https://gyazo.com/879186e2de1d0a5d7ea3d00b04367301
まとめ
PuppeteerにタスクとURLを流し込むツールを作ったので是非ご利用ください
同じE2Eテストを複数のURLに流し込みたいとか一括でURLに対してアクセスしてなんかメトリックを計測したいとかで便利だと想います
NotaIncではJavaScript大好き人間を募集しています
1000万人を超えて成長中！ GyazoのRails/JSエンジニア募集 - Wantedly
関西の学生必見！Gyazoのエンジニアアルバイトを募集！ - Wantedly
よろしくお願いします🐸