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
570
Web開発を補助する目的でPlaywrightを使っている話
aoki ken
November 19, 2022
Tweet
Share
More Decks by aoki ken
See All by aoki ken
Vue2からVue3へのアップデートをどのように行っていったかの話
aokiken
0
45
Other Decks in Programming
See All in Programming
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Trial
cairolibrary720
1
130
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
小さな開発会社を作った理由
polidog
0
1.9k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Design by the Numbers
sachag
277
18k
What's in a price? How to price your products and services
michaelherold
239
11k
Speed Design
sergeychernyshev
9
270
RailsConf 2023
tenderlove
16
720
Ruby is Unlike a Banana
tanoku
96
10k
Building Your Own Lightsaber
phodgson
101
5.9k
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