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
530
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
180
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
560
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
860
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
400
Netty Chicago Java User Group 2024-04-17
sullis
0
200
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
ゆるい個人開発のススメ
kuroppe1819
10
1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Designing with Data
zakiwarfel
96
4.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Optimizing for Happiness
mojombo
370
69k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
Writing Fast Ruby
sferik
622
60k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Navigating Team Friction
lara
179
13k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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