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
520
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Git Rebase
bkuhlmann
11
1.6k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
120
"config" ってなんだ? / What is "config"?
okashoi
0
220
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
760
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Scaling GitHub
holman
457
140k
Producing Creativity
orderedlist
PRO
336
39k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Designing with Data
zakiwarfel
95
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
RailsConf 2023
tenderlove
2
530
Code Review Best Practice
trishagee
54
15k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Code Reviewing Like a Champion
maltzj
513
39k
Practical Orchestrator
shlominoach
181
9.7k
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