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
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
180
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
200
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
440
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
C++20 射影変換
faithandbrave
0
570
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
188
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Bash Introduction
62gerente
614
210k
The Language of Interfaces
destraynor
158
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
32
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Visualization
eitanlees
146
16k
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