Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jest-puppeteerで e2eテストをやったら こうなった
Search
Tyankatsu
August 17, 2018
Technology
2
1.2k
jest-puppeteerで e2eテストをやったら こうなった
ベガコーポレーション
チャンカツ
https://vega-tech.connpass.com/event/96784/
Tyankatsu
August 17, 2018
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
320
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
710
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
610
転職初っ端終了しました
tyankatsu
2
800
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
660
npmパッケージ製作に関するあれこれ
tyankatsu
1
960
commit message 絶対統一させるマン
tyankatsu
1
220
Other Decks in Technology
See All in Technology
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.8k
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
110
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
120
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
困難を「一般解」で解く
fujiwara3
7
1.6k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
150
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Practical Orchestrator
shlominoach
186
10k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Documentation Writing (for coders)
carmenintech
68
4.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
BBQ
matthewcrist
87
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Building Adaptive Systems
keathley
40
2.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
jest-puppeteerͰ e2eςετΛͬͨΒ ͜͏ͳͬͨ
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • 7݄͔ΒϕΨʹ • લɿXFCσβΠφʔ ࠓɿϑϩϯτΤϯυΤϯδχΞ • ۀͰWVF৮ͬͯΔ
݁ʂ
Puppeteer ͠ΜͲ͍ʂʂʂ
ͷͰʂʂʂ
Cypress ͓͏ʂʂʂ
࣍ • ݁ɹˡ͏ऴΘͬͨ • e2eςετΛΔҙຯ • PuppeteerͬͯͳΜ͚ͩͬʁ • JestͬͯͳΜ͚ͩͬʁ •
JestͷPuppeteerϓϦηοτΛ༻͢Δ • Θ͔ͬͨ͜ͱ • CypressΛ༻͢Δ • Θ͔ͬͨ͜ͱ • ࢥͬͨ͜ͱ • ͏Ұճ
e2eςετΛΔҙຯ
– E2Eςετʹ͍ͭͯߟ͑ͯΈͨ | MMMϒϩά “ҰൠతʹɺϑϨʔϜϫʔΫΛར༻ͯ͠ ࣮ࡍͷϒϥβͰͷಈ͖ΛγϛϡϨʔγϣ ϯ͢ΔΑ͏ͳςετʢதུʣϢʔβ͕࣮ ࡍʹͲ͏ૢ࡞͢Δ͔ɺͱ͍͏ࢹ”
ίϯϙʔωϯτͷػೳΛ อূ͢ΔͨΊʹ Ϣχοτςετॻ͘ import { shallowMount } from '@vue/test-utils'; import
HelloWorld from '@/components/HelloWorld.vue'; describe('HelloWorld.vue', () => { it('renders props.msg when passed', () => { const msg = 'new message'; const wrapper = shallowMount(HelloWorld, { propsData: { msg } }); expect(wrapper.text()).toMatch(msg); }); });
ͦͷίϯϙʔωϯτΛ ϒϥβͰ࣮ࡍʹૢ࡞ͯ͠ɺ Ϣʔβʔ͕։ൃऀͷظ௨Γͷ ૢ࡞͕Մೳͳͷ͔ςετ͢Δ
PuppeteerͬͯͳΜ͚ͩͬʁ
What’s Puppeteer •Node.jsͰHeadless ChromeΛ؆୯ʹѻ͑Δ ʢchromium͕Ұॹʹ͍ͭͯ͘Δʣ •chromiumΛDev Tools ProtocolͰ੍ޚ͢ΔAPI͕๛ •Chrome
Dev Tools։ൃνʔϜϝϯόʔ͕ϝϯςφϯ εͯ͠Δ https://github.com/GoogleChrome/puppeteer#q-who-maintains- puppeteer •εΫϨΠϐϯά͕ՄೳʢͦͷԆͰςετՄೳʣ
Ұݟʹ͔ͣ https://try-puppeteer.appspot.com/
JestͬͯͳΜ͚ͩͬʁ
What’s Jest Delightful JavaScript Testing •ΦʔϧΠϯϫϯͰςετڥ༻ҙͯ͘͠ΕΔ͍͢͝ ͭhttps://postd.cc/a-complete-guide-to-testing-javascript-in-2017/ •Facebook •vue-cli@3ͷϢχοτςετͷબࢶʹೖͬͯΔ
PASS ./sum.test.js ✓ adds 1 + 2 to equal 3
(5ms) // sum.js function sum(a, b) { return a + b; } module.exports = sum; // sum.test.js const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });
JestͷPuppeteerϓϦηοτ Λ༻͢Δ
JestʹͰ͖ͳ͍͜ͱ •ϒϥβɺ·ͨٙࣅϒϥβͷڥ͕༻ҙͰ͖ͳ͍ •ނʹ+FTU͚ͩͰFFςετͰ͖ͳ͍
ެࣜͰϓϦηοτग़ͯ͠Δ Using with puppeteer
vue-cli@3※Ͱ jest-puppeteerͬͯ e2eςετͬͯΈ͍ͨ ※vue-cli@3ͰNightwatch.js,CypressΛαϙʔτ͍ͯ͠Δ
ͬͨ ࣮ફλΠϜ
None
Θ͔ͬͨ͜ͱ
͕͜͜ •ςετಉ࣮࣌ߦڧ͍ʢૣ͍ʣ •ϔουϨεϞʔυͷΓସ͕͑Ͱ͖ͯศར
͕͜͜ •ςετҰॠ͗ͯ͢Θ͔ΒΜʢ࣮ߦม͑ΒΕΔ͚Ͳ ͦ͏͡Όͳ͍ʣ •ςετॻ͍ͯΔ్தͷσόοάͮ͠Β͍ •ઃఆΊΜͲ͗͘͢͞ʢΘ͔Γʹ͍͘ʣ •εΫϨΠϐϯάπʔϧΛແཧΓςετπʔϧʹঢ՚ ͤ͞Α͏ͱͨ͠ҹ •ͬͱৄࡉͳใཉ͍͠
None
͞Α͏ͳΒͨ͠
CypressΛ༻͢Δ
What’s Cypress Fast, easy and reliable testing for anything that
runs in a browser. •Cypress.io͕։ൃ •جຊແྉʢศརͳػೳ༗ྉʣ •ڈͷ݄͔Β044 •ςετʹಛԽͨ͠πʔϧ
ͬͨ ࣮ફλΠϜ
None
Θ͔ͬͨ͜ͱ
͕͜͜ •GUI͕͍͍͢ •ઃఆ͕؆୯ʢWVFDMJ͕ઃఆͯ͘͠ΕͯΔͱ͍͑ͦΕΛൈ͔ͯ͠؆୯ʣ •݁Ռ͕Θ͔Γ͍͢ •σόοά͍͢͠ •CUIͰΒͤΔͱvideoࡱͬͯ͘ΕΔʢΦϑՄೳʣ
͕͜͜ •͍ʢJGSBNFͬͯΔ͔Βෳ࣮ߦͰ͖ͳ͍ʣ
ࢥͬͨ͜ͱ
ςετͬͯ ࣮֬ʹόάͷݩΛΩϟονͯ͠ ௵ͨ͢Ίʹ͏ͷͰʁ
ͬͯ͜ͱৄࡉͳςετ݁Ռ ͕େࣄͳͷͰʁ
͏Ұճ
Puppeteer ͠ΜͲ͍ʂʂʂ
ͷͰʂʂʂ
Cypress ͓͏ʂʂʂ
͓ΘΓ