Web開発を補助する目的でPlaywrightを使っている話

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

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

Web開発を補助する目的でPlaywrightを使っている話

Web開発を補助する目的でPlaywrightを使っている話

aoki ken

More Decks by aoki ken

Other Decks in Programming

Featured

Transcript