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
Web開発を補助する目的でPlaywrightを使っている話
Search
aoki ken
November 19, 2022
Programming
0
680
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Tweet
Share
More Decks by aoki ken
See All by aoki ken
Vue2からVue3へのアップデートをどのように行っていったかの話
aokiken
1
250
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Discover Metal 4
rei315
2
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
技術同人誌をMCP Serverにしてみた
74th
1
570
エラーって何種類あるの?
kajitack
5
340
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
Is Xcode slowly dying out in 2025?
uetyo
1
250
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
How to Ace a Technical Interview
jacobian
277
23k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Applications with DynamoDB
mza
95
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Raft: Consensus for Rubyists
vanstee
140
7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Faster Mobile Websites
deanohume
307
31k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Transcript
Web開発を補助する目的で Playwrightを使っている話 フロントエンドカンファレンス沖縄2022(2022.11.19) aokiken(@ao_kiken)
自己紹介 • BASE, inc. (2019/05~) • Product Dev / Service
Dev / Owners Marketing Dev / Shop Front • ショップデザイン関連機能の開発を担当しています aokiken @ao_kiken @aokiken
3 https://thebase.in/shopdesign
4
5 https://devblog.thebase.in/entry/2020/12/22/122200 以前、こんなブログを書きました
6 今回は、その2022年版
7 共通して伝えたいことは
8 ブラウザ操作を自動化する という発想を、身近に感じてほしい
Playwrightとは 9
10 Webテストと自動化のためのフレームワーク https://github.com/microsoft/playwright
11 幅広い条件で利用が可能
12 パワフルなツール Codegen 🤖 Trace Viewer 👣 Playwright Inspector 🔍
実例1 動作確認したい状態の テストショップを作成する 13
14 現在利用できるオフィシャルテーマは17種類 1つのショップでテーマを切り替えて確認するのは手間が多くなって大変 テーマごとにテストショップを作成したい
15 Playwrightでやってみる
16 まずはシンプルに実行環境を用意
17 codegenで実行コードを作成
18 生成したコードを元にscriptを作成
19 scriptを実行
20 1テーマあたり およそ11秒で作れました
21 GitHub Actions経由でテストショップを作成できるように 実行者が環境をローカルで構築せずとも利用出来るので、布教するのに便利
実例2 動作確認したい状態を HTML Reportに出力する 22
23 現在利用できるオフィシャルテーマは17種類 17種類のページの動作確認は多いので、 確認できる状態までをHTML Reportで出力してみる
24 Playwrightでやってみる
25 yarn create playwrightを使って実行環境を構築 https://playwright.dev/docs/intro
26 テストコードを追加、実行
27 HTML Reportを確認
28 OIDC認証でセキュアにホスティング https://aws.amazon.com/jp/blogs/networking-and-content-delivery/securing-cloudfront-distributi ons-using-openid-connect-and-aws-secrets-manager/
LTは以上になります ご清聴ありがとうございました 29