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
Playwright for PythonではじめるE2Eテスト / Lets start e2e-test with playwright for python
Search
pep299
July 31, 2021
Technology
0
770
Playwright for PythonではじめるE2Eテスト / Lets start e2e-test with playwright for python
Playwright for PythonではじめるE2Eテスト
・OSC 2021 Kyoto
pep299
July 31, 2021
Tweet
Share
More Decks by pep299
See All by pep299
なるべく自動化頑張ったLINE BOT on AWS
pep299
0
78
シークレットを漏らしてしまった話 / secret-key-exposed
pep299
0
43
プレイングマネージャーの葛藤 / The Conflict of a Playing Manager
pep299
1
2.7k
will・canマトリクスで自己分析してみた / Self-analysis with will-can matrix
pep299
0
300
そうだ Firebase Remote Config、使おう / let use Firebase Remote Config
pep299
0
56
Other Decks in Technology
See All in Technology
使われないダッシュボードを生まないためのプロジェクトマネジメント / Project management to avoid creating unused dashboards
sansan_randd
4
1.2k
多すぎる!! 気づくと増えてるAmazon CloudWatch大家族、クラウド初心者にも分かりやすく整理しました
minorun365
PRO
3
460
【Oracle Cloud ウェビナー】OCIでコンテナを活用しコスト約65%削減!ユーザー数30万人超のスライドシェアサービス「ドクセル」の移行
oracle4engineer
PRO
1
130
SRE NEXT 2024 スライドみただけの感想 / Just a quick look at the slides for SRE NEXT 2024
kyonmm
PRO
2
230
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
21
10k
新たな顧客課題に挑む17年目の進化とモダナイゼーション / RAKUSTechCon2024_Haihaimail
rakus_dev
0
150
わたしの業務の中に住み着いたCacoo/Cacoo has taken up residence in my work routine
yukihirochiba
0
610
法律に準拠した本人確認システムを0から作った話 〜家計簿プリカB/43でのeKYC開発実例〜
shoheimitani
2
660
クロージングトーク / RAKUSTechCon2024_Closingtalk
rakus_dev
0
140
2024/08/19 PEK Recap | データで振り返るPEK2024
rynsuke
1
130
T2D3超えのBill Oneで学んだ組織運営:400名超えエンジニアリング組織のVPoEに挑む
sansantech
PRO
1
190
実践オブジェクト指向設計サブ資料:③ドメインモデル中心設計
recruitengineers
PRO
2
530
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Docker and Python
trallard
39
2.9k
GitHub's CSS Performance
jonrohan
1027
450k
Designing Experiences People Love
moore
137
23k
GraphQLの誤解/rethinking-graphql
sonatard
64
9.7k
Designing for Performance
lara
604
68k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Learning to Love Humans: Emotional Interface Design
aarron
270
39k
It's Worth the Effort
3n
181
27k
GraphQLとの向き合い方2022年版
quramy
42
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Building Adaptive Systems
keathley
35
2.1k
Transcript
「Playwright for PythonではじめるE2Eテスト」 ぺぺ@Pep299 1
目次 自己紹介 用語の確認 PlaywrightではじめるE2Eテスト Playwright Tips CI デバッグ・レポーティング ブラウザ対応 まとめ
自動テスト Tips 2
自己紹介 ぺぺ@Pep299 https://twitter.com/Pep299 情報系学士卒 エンジニア歴6年目 SES(金融系)-> フリーランス -> Web系受託 ->
Web系自社サ Python・TypeScript・Nuxt・AWS 東京都 新型コロナウイルス感染症対策サイトのコントリビュート経験 PyCon JP 2021 スタッフ 開催日:10/15(金),16(土) ゲーム(Dead By Daylight、Among Us、ボードゲーム)・ブレイクダンス 3
用語の確認 自動テストとは E2Eテストとは Playwrightとは 4
自動テストとは テスト実行や結果チェックに際し、ソフトウェアを利用して自動制御すること 背景 開発したアプリケーションが要件を満たしていることを確認する必要がある アプリケーションは作り切りではなく、長期的にかつ継続的に開発される 繰り返し行うテストを自動化できれば、開発サイクルの短縮化が見込める 5
E2Eテストとは テストの種類の一つ ユーザーに提供している機能の内、UIを通じて実行できる機能をテストすること 例) ECサイトでのE2Eテスト ログイン画面にアクセスし、idとpwを入力してログインできること TOP画面にて商品を検索して商品詳細ページに遷移できること 商品をカートに入れ、カート内の商品を購入・決済できること キャンセル画面にて決済のキャンセルができること →
ネットワーク接続やデータベース、外部アプリケーションとの通信をテストする 6
Playwrightとは モダンなwebブラウザを対象に、ブラウザ操作の自動化のためのライブラリ 概要 モダンなWebブラウザ:Chrome/Edge/Firefox/Safari Microsoft製 操作可能な言語 JavaScript/TypeScript Python Java C#
7
PlaywrightではじめるE2Eテスト インストール コード作成 実行 テスト環境構築 テストコード化 テスト実施 8
PlaywrightではじめるE2Eテスト ~インストール~ $ pip install playwright $ playwright install playwright公式のインストール手順:https://playwright.dev/python/docs/intro
9
PlaywrightではじめるE2Eテスト ~コード作成~ $ playwright codegen wikipedia.org -o test.py Playwright公式のコード生成手順:https://playwright.dev/python/docs/cli/#generate- code
10
PlaywrightではじめるE2Eテスト ~コード作成~ 11
PlaywrightではじめるE2Eテスト ~コード作成~ 12
PlaywrightではじめるE2Eテスト ~コード作成~ 13
PlaywrightではじめるE2Eテスト ~実行~ $ python ./test.py 14
PlaywrightではじめるE2Eテスト ~テスト環境構築~ pythonのテスト実行ライブラリは、Playwright公式がサポートするPytestを利用 $ pip install pytest $ pip install
pytest-playwright Playwright公式のPytest連携:https://playwright.dev/python/docs/test-runners 15
PlaywrightではじめるE2Eテスト ~テストコード化~ 先ほど生成したスクリプトをPytest実行用に修正 from playwright.sync_api import Page def test_wiki(page: Page):
page.goto("https://www.wikipedia.org/") page.click("input[name=\"search\"]") page.fill("input[name=\"search\"]", "python") page.press("input[name=\"search\"]", "Enter") assert page.url == "https://en.wikipedia.org/wiki/Python" 16
PlaywrightではじめるE2Eテスト ~テスト実施~ $ pytest test.py 実行結果 ========================== test session starts
========================== platform darwin -- Python 3.8.10, pytest-6.2.4, py-1.10.0, pluggy-0.13.1 rootdir: /Users/xxx/ plugins: base-url-1.4.2, playwright-0.1.2 collected 1 item test.py . [100%] =========================== 1 passed in 4.47s =========================== 17
PlaywrightではじめるE2Eテスト ~まとめ~ 環境構築がお手軽 画面操作 → コード作成機能によるテストコード作成の補助 テスト実行ライブラリの連携までサポート 18
Playwright Tips CI デバッグ・レポーティング ブラウザ対応 19
CI 各種CIプロバイダの導入手順の記載 GitHub Actions/Azure Pipeline/Travis CI/Circle CI/Jenkins/Bitbucket Pipeline/GitLab CI 公式Dockerイメージの提供
マルチプラットフォームで実行可能なので、GitHub Actionsであれば、 Linux/Mac/Windows × Chrome/Edge/Firefox/Safariのマトリクス実行が可能 Playwright公式:https://playwright.dev/python/docs/ci 20
デバッグ・レポーティング E2Eテストを運用していくと、必ずではないが失敗するテストが発生する 失敗の原因を素早く掴むためにデバッグ・レポーティングの機能は重要 デバッグ:Trace Viewer レポーティング:Allure 21
デバッグ:Trace Viewer Playwright公式:https://playwright.dev/python/docs/trace-viewer 22
レポーティング:Allure(アリュアー) Allure公式:https://docs.qameta.io/allure/#_pytest 失敗時の動画保存:https://qiita.com/YusukeIwaki/items/0ec10c5ae6dd2edcb581 23
ブラウザ対応 モダンなブラウザのみのサポートになり、レガシーなブラウザは確認できない IE11やEdge legacy(chromiumベースになる前)は非対応 AndroidやiOSなど実機ブラウザは非対応 こちらは後々対応していく予定の様子。Androidはテスト実装中 モバイルはviewportを操作する事である程度は確認可能 Playwright公式サポートのデバイス一覧: https://github.com/microsoft/playwright/blob/master/src/server/deviceDescripto rsSource.json
24
まとめ 環境構築が自動化しやすいため、CIなど環境構築を繰り返す場面にも強い 画面操作 → コード作成機能によるテストコード作成の補助 実行OSを選択できるCIを利用する事でOS×ブラウザのマトリクス実行が可能 Trace Viewerの情報可視化によるデバッグ体験 モダンなブラウザ対応 25
自動テスト Tips E2Eテスト以外のテストの概要:BrowserStackのガイド https://www.browserstack.com/guide/types-of-testing Webブラウザ関連の自動テストのベストプラクティス:Cypressのガイド https://docs.cypress.io/guides/references/best-practices awesome 〇〇:関連ライブラリや記事、参考リポジトリのまとめ https://project-awesome.org/mxschmitt/awesome-playwright 26