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
300
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
680
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
600
転職初っ端終了しました
tyankatsu
2
780
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
630
npmパッケージ製作に関するあれこれ
tyankatsu
1
940
commit message 絶対統一させるマン
tyankatsu
1
210
Other Decks in Technology
See All in Technology
SSMRunbook作成の勘所_20241120
koichiotomo
2
150
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
540
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
590
強いチームと開発生産性
onk
PRO
34
11k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
130
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
110
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
170
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Facilitating Awesome Meetings
lara
50
6.1k
Happy Clients
brianwarren
98
6.7k
Documentation Writing (for coders)
carmenintech
65
4.4k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Gamification - CAS2011
davidbonilla
80
5k
Done Done
chrislema
181
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
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 ͓͏ʂʂʂ
͓ΘΓ