Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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)

    View full-size slide

  2. 自己紹介
    ● BASE, inc. (2019/05~)
    ● Product Dev / Service Dev /
    Owners Marketing Dev / Shop Front
    ● ショップデザイン関連機能の開発を担当しています
    aokiken
    @ao_kiken
    @aokiken

    View full-size slide

  3. 3
    https://thebase.in/shopdesign

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Playwrightとは
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 15
    Playwrightでやってみる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 19
    scriptを実行

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 24
    Playwrightでやってみる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 27
    HTML Reportを確認

    View full-size slide

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

    View full-size slide

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

    View full-size slide