$30 off During Our Annual Pro Sale. View Details »

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

aoki ken
November 19, 2022

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

aoki ken

November 19, 2022
Tweet

Other Decks in Programming

Transcript

  1. Web開発を補助する目的で Playwrightを使っている話 フロントエンドカンファレンス沖縄2022(2022.11.19) aokiken(@ao_kiken)

  2. 自己紹介 • BASE, inc. (2019/05~) • Product Dev / Service

    Dev / Owners Marketing Dev / Shop Front • ショップデザイン関連機能の開発を担当しています aokiken @ao_kiken @aokiken
  3. 3 https://thebase.in/shopdesign

  4. 4

  5. 5 https://devblog.thebase.in/entry/2020/12/22/122200 以前、こんなブログを書きました

  6. 6 今回は、その2022年版

  7. 7 共通して伝えたいことは

  8. 8 ブラウザ操作を自動化する という発想を、身近に感じてほしい

  9. Playwrightとは 9

  10. 10 Webテストと自動化のためのフレームワーク https://github.com/microsoft/playwright

  11. 11 幅広い条件で利用が可能

  12. 12 パワフルなツール Codegen 🤖 Trace Viewer 👣 Playwright Inspector 🔍

  13. 実例1 動作確認したい状態の テストショップを作成する 13

  14. 14 現在利用できるオフィシャルテーマは17種類 1つのショップでテーマを切り替えて確認するのは手間が多くなって大変 テーマごとにテストショップを作成したい

  15. 15 Playwrightでやってみる

  16. 16 まずはシンプルに実行環境を用意

  17. 17 codegenで実行コードを作成

  18. 18 生成したコードを元にscriptを作成

  19. 19 scriptを実行

  20. 20 1テーマあたり およそ11秒で作れました

  21. 21 GitHub Actions経由でテストショップを作成できるように 実行者が環境をローカルで構築せずとも利用出来るので、布教するのに便利

  22. 実例2 動作確認したい状態を HTML Reportに出力する 22

  23. 23 現在利用できるオフィシャルテーマは17種類 17種類のページの動作確認は多いので、 確認できる状態までをHTML Reportで出力してみる

  24. 24 Playwrightでやってみる

  25. 25 yarn create playwrightを使って実行環境を構築 https://playwright.dev/docs/intro

  26. 26 テストコードを追加、実行

  27. 27 HTML Reportを確認

  28. 28 OIDC認証でセキュアにホスティング https://aws.amazon.com/jp/blogs/networking-and-content-delivery/securing-cloudfront-distributi ons-using-openid-connect-and-aws-secrets-manager/

  29. LTは以上になります ご清聴ありがとうございました 29