Slide 1

Slide 1 text

jest-puppeteerͰ e2eςετΛ΍ͬͨΒ ͜͏ͳͬͨ

Slide 2

Slide 2 text

ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • 7݄͔ΒϕΨʹ • લɿXFCσβΠφʔ
 ࠓɿϑϩϯτΤϯυΤϯδχΞ • ۀ຿Ͱ͸WVF৮ͬͯΔ

Slide 3

Slide 3 text

݁࿦ʂ

Slide 4

Slide 4 text

Puppeteer ͠ΜͲ͍ʂʂʂ

Slide 5

Slide 5 text

ͷͰʂʂʂ

Slide 6

Slide 6 text

Cypress ࢖͓͏ʂʂʂ

Slide 7

Slide 7 text

໨࣍ • ݁࿦ɹˡ΋͏ऴΘͬͨ • e2eςετΛ΍Δҙຯ • PuppeteerͬͯͳΜ͚ͩͬʁ • JestͬͯͳΜ͚ͩͬʁ • JestͷPuppeteerϓϦηοτΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • CypressΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • ࢥͬͨ͜ͱ • ΋͏Ұճ

Slide 8

Slide 8 text

e2eςετΛ΍Δҙຯ

Slide 9

Slide 9 text

– E2Eςετʹ͍ͭͯߟ͑ͯΈͨ | MMMϒϩά “Ұൠతʹ͸ɺϑϨʔϜϫʔΫΛར༻ͯ͠ ࣮ࡍͷϒϥ΢βͰͷಈ͖ΛγϛϡϨʔγϣ ϯ͢ΔΑ͏ͳςετʢதུʣϢʔβ͕࣮ ࡍʹͲ͏ૢ࡞͢Δ͔ɺͱ͍͏ࢹ఺”

Slide 10

Slide 10 text

ίϯϙʔωϯτͷػೳΛ อূ͢ΔͨΊʹ Ϣχοτςετॻ͘ 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); }); });

Slide 11

Slide 11 text

ͦͷίϯϙʔωϯτΛ ϒϥ΢βͰ࣮ࡍʹૢ࡞ͯ͠ɺ Ϣʔβʔ͕։ൃऀͷظ଴௨Γͷ ૢ࡞͕Մೳͳͷ͔ςετ͢Δ

Slide 12

Slide 12 text

PuppeteerͬͯͳΜ͚ͩͬʁ

Slide 13

Slide 13 text

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 •εΫϨΠϐϯά͕ՄೳʢͦͷԆ௕Ͱςετ΋Մೳʣ

Slide 14

Slide 14 text

Ұݟʹ೗͔ͣ https://try-puppeteer.appspot.com/

Slide 15

Slide 15 text

JestͬͯͳΜ͚ͩͬʁ

Slide 16

Slide 16 text

What’s Jest Delightful JavaScript Testing •ΦʔϧΠϯϫϯͰςετ؀ڥ༻ҙͯ͘͠ΕΔ͍͢͝΍ ͭhttps://postd.cc/a-complete-guide-to-testing-javascript-in-2017/ •Facebook੡ •vue-cli@3ͷϢχοτςετͷબ୒ࢶʹೖͬͯΔ

Slide 17

Slide 17 text

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); });

Slide 18

Slide 18 text

JestͷPuppeteerϓϦηοτ Λ࢖༻͢Δ

Slide 19

Slide 19 text

JestʹͰ͖ͳ͍͜ͱ •ϒϥ΢βɺ·ͨ͸ٙࣅϒϥ΢βͷ؀ڥ͕༻ҙͰ͖ͳ͍ •ނʹ+FTU͚ͩͰ͸FFςετͰ͖ͳ͍

Slide 20

Slide 20 text

ެࣜͰϓϦηοτग़ͯ͠Δ Using with puppeteer

Slide 21

Slide 21 text

vue-cli@3※Ͱ jest-puppeteer࢖ͬͯ e2eςετ΍ͬͯΈ͍ͨ ※vue-cli@3Ͱ͸Nightwatch.js,CypressΛαϙʔτ͍ͯ͠Δ

Slide 22

Slide 22 text

΍ͬͨ ࣮ફλΠϜ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Θ͔ͬͨ͜ͱ

Slide 25

Slide 25 text

͕͜͜ •ςετಉ࣮࣌ߦڧ͍ʢૣ͍ʣ •ϔουϨεϞʔυͷ੾Γସ͕͑Ͱ͖ͯศར

Slide 26

Slide 26 text

͕͜͜ •ςετҰॠ͗ͯ͢Θ͔ΒΜʢ࣮ߦ଎౓ม͑ΒΕΔ͚Ͳ ͦ͏͡Όͳ͍ʣ •ςετॻ͍ͯΔ్தͷσόοάͮ͠Β͍ •ઃఆΊΜͲ͗͘͢͞ʢΘ͔Γʹ͍͘ʣ •εΫϨΠϐϯάπʔϧΛແཧ΍Γςετπʔϧʹঢ՚ ͤ͞Α͏ͱͨ͠ҹ৅ •΋ͬͱৄࡉͳ৘ใཉ͍͠

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

͞Α͏ͳΒͨ͠

Slide 29

Slide 29 text

CypressΛ࢖༻͢Δ

Slide 30

Slide 30 text

What’s Cypress Fast, easy and reliable testing for anything that runs in a browser. •Cypress.io͕։ൃ •جຊແྉʢศརͳػೳ͸༗ྉʣ •ڈ೥ͷ݄͔Β044 •ςετʹಛԽͨ͠πʔϧ

Slide 31

Slide 31 text

΍ͬͨ ࣮ફλΠϜ

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Θ͔ͬͨ͜ͱ

Slide 34

Slide 34 text

͕͜͜ •GUI͕࢖͍΍͍͢ •ઃఆ͕؆୯ʢWVFDMJ͕ઃఆͯ͘͠ΕͯΔͱ͸͍͑ͦΕΛൈ͔ͯ͠΋؆୯ʣ •݁Ռ͕Θ͔Γ΍͍͢ •σόοά͠΍͍͢ •CUIͰ૸ΒͤΔͱvideoࡱͬͯ͘ΕΔʢΦϑ΋Մೳʣ

Slide 35

Slide 35 text

͕͜͜ •஗͍ʢJGSBNF࢖ͬͯΔ͔Βෳ਺࣮ߦͰ͖ͳ͍ʣ

Slide 36

Slide 36 text

ࢥͬͨ͜ͱ

Slide 37

Slide 37 text

ςετͬͯ
 ࣮֬ʹόάͷݩΛΩϟονͯ͠ ௵ͨ͢Ίʹ࢖͏΋ͷͰ͸ʁ

Slide 38

Slide 38 text

ͬͯ͜ͱ͸ৄࡉͳςετ݁Ռ ͕େࣄͳͷͰ͸ʁ

Slide 39

Slide 39 text

΋͏Ұճ

Slide 40

Slide 40 text

Puppeteer ͠ΜͲ͍ʂʂʂ

Slide 41

Slide 41 text

ͷͰʂʂʂ

Slide 42

Slide 42 text

Cypress ࢖͓͏ʂʂʂ

Slide 43

Slide 43 text

͓ΘΓ