Slide 1
Slide 1 text
ίί͕εΰ͍ͥʂ
Playwright Component Test
Slide 2
Slide 2 text
গࣗ͠ݾհ
• ໊લɿ দӜ ߉ੜ
• ੜ݄ɿ1999 / 12 / 22 (24)
• ग़ɿಸྑݝ
• ॴଐɿגࣜձࣾϥΫεɹϑϩϯτΤϯυ։ൃ՝
• ͍ͬͯΔٕज़ɿ React , TypeScript
Slide 3
Slide 3 text
Playwright is Կ
• Microsoft͕࡞ͬͨNode.jsϕʔεͷE2EςετࣗಈԽϑϨʔϜϫʔΫ
• ςετϖʔδ(ը໘)୯ҐͰߦ͏
• CypressͳͲ͕ର߅അ
Slide 4
Slide 4 text
ϩάΠϯͷE2Eςετͷྫ
ϩάΠϯը໘ τοϓը໘
Slide 5
Slide 5 text
Playwright ͷऑʁ
Slide 6
Slide 6 text
Playwright Component Test is Կ
• PlaywrightͰίϯϙʔωϯτςετ·ͰͰ͖Δػೳ
• ςετΛϖʔδ୯Ґ͔Βίϯϙʔωϯτ୯Ґʹʂ
• ݱࡏExperimental (࣮ݧతػೳ)
Slide 7
Slide 7 text
Ͱɺίϯϙʔωϯτ(୯ମ)ςετͬͯ
Playwright͡Όͳͯ͘Ͱ͖ΔΑͶʁ
Jest
×
Testing Library ͱ͔
Slide 8
Slide 8 text
ͪΐͬͱͬͯʂ
Playwright Component Testͷίί͕εΰ͍ͶΜʂ
Slide 9
Slide 9 text
Playwright Component Test ͷεΰ͍
ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ
ɾը໘ͷαΠζΛࢦఆͰ͖Δ
ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
Slide 10
Slide 10 text
ίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ
JSDom
Slide 11
Slide 11 text
Playwright Component Test ͷεΰ͍
ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ
ɾը໘ͷαΠζΛࢦఆͰ͖Δ
ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
Slide 12
Slide 12 text
ը໘αΠζΛࢦఆͰ͖Δ
ϨεϙϯγϒͳαΠυόʔ
WindowͷWidthHeightɺresizeΠϕϯτͳ
ͲΛࣗ࡞͢Δඞཁ͋Γ (※ ͔ͳΓࠔ)
Slide 13
Slide 13 text
Playwright Component Test ͷεΰ͍
ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ
ɾը໘ͷαΠζΛࢦఆͰ͖Δ
ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
Slide 14
Slide 14 text
λΠϜκʔϯݴޠΛࢦఆͰ͖Δ
ຊޠ ver ӳޠ ver
ςετ͕ࠔ
खಈVRTͰ֬ೝ͢Δͷ͕ແ
Slide 15
Slide 15 text
·ͱΊ
• खಈͰ֬ೝ͍ͯͨ͠Α͏ͳίϯϙʔωϯτςετʹ͑Δʂ
• JestͳͲͱ͍͚Δ͜ͱ͕େࣄʂ
• Playwright Component Test ͷՄೳੑແݶେʂ