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.3k
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
360
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
750
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
840
アニメーションは どうやってできているのか
tyankatsu
0
130
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
680
npmパッケージ製作に関するあれこれ
tyankatsu
1
1k
commit message 絶対統一させるマン
tyankatsu
1
230
Other Decks in Technology
See All in Technology
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.2k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
940
Green Tea Garbage Collector の今
zchee
PRO
2
380
20250929_QaaS_vol20
mura_shin
0
110
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
190
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
250
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
480
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
o11yで育てる、強い内製開発組織
_awache
3
110
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Automating Front-end Workflow
addyosmani
1371
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Scaling GitHub
holman
463
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Side Projects
sachag
455
43k
Thoughts on Productivity
jonyablonski
70
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
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 ͓͏ʂʂʂ
͓ΘΓ