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
740
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
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Facilitating Awesome Meetings
lara
54
6.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing for Performance
lara
610
69k
Adopting Sorbet at Scale
ufuk
77
9.5k
Making Projects Easy
brettharned
116
6.3k
Side Projects
sachag
455
42k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
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 ͓͏ʂʂʂ
͓ΘΓ