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 e...
Search
pep299
July 31, 2021
Technology
0
1.1k
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
86
シークレットを漏らしてしまった話 / secret-key-exposed
pep299
0
59
プレイングマネージャーの葛藤 / The Conflict of a Playing Manager
pep299
1
3.1k
will・canマトリクスで自己分析してみた / Self-analysis with will-can matrix
pep299
0
470
そうだ Firebase Remote Config、使おう / let use Firebase Remote Config
pep299
0
91
Other Decks in Technology
See All in Technology
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
230
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
870
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
450
Operating Operator
shhnjk
1
650
TableauLangchainとは何か?
cielo1985
1
150
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
1.6k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
220
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
話題の MCP と巡る OCI RAG ソリューションの旅 - Select AI with RAG と Generative AI Agents ディープダイブ
oracle4engineer
PRO
5
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
GitHub's CSS Performance
jonrohan
1031
460k
Rails Girls Zürich Keynote
gr2m
95
14k
Done Done
chrislema
184
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
KATA
mclloyd
30
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Thoughts on Productivity
jonyablonski
69
4.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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