Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Programming
0
240
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
tidy_rpart
bk_18
0
390
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
150
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
AWSにおける標的型Bot対策
hacomono
0
390
Git Rebase
bkuhlmann
10
1.2k
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
110
状態ってなに?🙃
taro28
0
260
kakutanitalk2022_opening_act
shirotamaki
0
100
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
160
How to Fight Production Incidents?
asatarin
0
140
Writing Greener Java Applications
hollycummins
0
330
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
210
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
38
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Web Components: a chance to create the future
zenorocha
304
40k
Unsuck your backbone
ammeep
659
56k
Infographics Made Easy
chrislema
235
17k
Gamification - CAS2011
davidbonilla
75
4.1k
Making Projects Easy
brettharned
102
4.8k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Into the Great Unknown - MozCon
thekraken
2
280
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
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