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
350
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
750
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
830
アニメーションは どうやってできているのか
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
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
250
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
800
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
420
実運用で考える PGO
kworkdev
PRO
0
130
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
490
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
220
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
100
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
1
290
TypeScript入門
recruitengineers
PRO
33
11k
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
970
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Fireside Chat
paigeccino
39
3.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Docker and Python
trallard
45
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1032
460k
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 ͓͏ʂʂʂ
͓ΘΓ