Download as PDF, PPTX
Uploaded bytwMVC
twMVC#44 如何測試與保護你的 web application with playwright
This document summarizes a presentation on using Playwright to test and protect web applications. It discusses what Playwright is, why it was chosen, how to use it, and some use cases. Playwright is an open source test automation framework created by Microsoft that allows testing web applications across browsers and platforms. It is faster and more reliable than traditional end-to-end testing. The presentation provides demonstrations of using Playwright to test network requests, handle authentication, and more.
twMVC#44 如何測試與保護你的 web application with playwright
- 1. https://mvc.tw 歡迎參加我們的每週四固定聚會 1 如何測試與保護你的 Web Application withPlaywright 阿砮 Cheng-Ju Wu
- 2.
- 3.
- 4.
- 5. https://mvc.tw End-to-End Test 5 ▪ 繁瑣又缺乏創造力 ▪時間成本 ▪ 開發維護成本 ▪ 執行慢 ▪ 測試覆蓋率低 ▪ 可靠性 如何改善 提升效率
- 6.
- 7. https://mvc.tw Agenda ▪ What isPlaywright ▪ Why choose Playwright ▪ How to use Playwright ▪ Use cases 7
- 8.
- 9.
- 10. https://mvc.tw Playwright is ▪ BowserAutomation Framework ▪ Node.js Library ▪ Open Source ▪ Puppeteer ▪ By Microsoft 10 github.com/microsoft/playwright
- 11. https://mvc.tw Playwright is ▪ Cross-platform( Windows, Linux, macOS ) ▪ Cross-browser testing with single API ▪ Supports 3 browser engines ▪ Chromium：Google Chrome / Microsoft Edge / Opera ▪ Firefox ▪ WebKit：Apple Safari 11 playwright.dev github.com/microsoft/playwright
- 12. https://mvc.tw Playwright can't ▪ 與實際落差 ▪無法操作手機，只能開啟手機瀏覽器模擬模式 ▪ WebKit 與 Safari 差異 12 github.com/microsoft/playwright
- 13. https://mvc.tw Playwright is ▪ Cross-language ▪TypeScript / JavaScript ▪ .NET ▪ Python ▪ Java 13 playwright.dev
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. https://mvc.tw Playwright Test ▪ TestRunner ▪ Reporters ▪ Parallelism ▪ Test Retries ▪ … 20
- 21.
- 22. https://mvc.tw 22 Playwright: Browser Contexts ▪Not Restart a Browser ▪ 完整隔離的環境 ▪ 快速實例化 ▪ 較低的資源開銷
- 23.
- 24. https://mvc.tw 24 Playwright: Auto-waiting ▪ 簡化測試程式，有助於聚焦實際任務 ▪不太需要手動寫下 wait 來確保前端收到回應 ▪ 提高測試可靠性 ▪ 因應現今網站，頻繁存取後端 API 的特性 ▪ 執行操作前對 Element 可操作性檢查
- 25.
- 26.
- 27.
- 28. https://mvc.tw 28 Playwright Selenium Browsers Chromium,Firefox, and WebKit Chrome, Firefox, IE, Edge, Opera, Safari, and more Language Java, Python, C# JavaScript, Typescript Java, Python, C# JavaScript, Ruby, Perl, PHP Installation Easy to Install Easy to Install Prerequisites NodeJS Java, Browser Drivers OS Supported Windows, Linux, and Mac OS Windows, Linux, Solaris, and Mac OS Open Source Open Source and Free Open Source and Free Architecture Headless Browser with event-driven architecture Layered Architecture based on JSON Wire Protocol Real Devices Support Does not support real devices but supports emulators Supports real device clouds and remote servers
- 29.
- 30. https://mvc.tw 30 How to usePlaywright
- 31.
- 32.
- 33. https://mvc.tw Playwright ▪ Record videos ▪Screenshots 33
- 34. https://mvc.tw Playwright ▪ Code generatorand debugger ▪ Intercept network 34
- 35.
- 36.
- 37. https://mvc.tw Playwright ▪ Inspector ▪ DebuggingPlaywright scripts 37
- 38.
- 39.
- 40. https://mvc.tw Playwright ▪ Trace Viewer ▪Recording trace ▪ Viewing trace ▪ Action ▪ Screenshots ▪ Snapshots 40
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. https://mvc.tw 49 Network – AbortRequests ▪ Ads-blocker
- 50.
- 51.
- 52. https://mvc.tw 52 Network – AbortRequest ▪ 網站新手提示 novice-guide-demo From 黑暗執行緒
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. https://mvc.tw 總結 End-to-End Test( RD & QA ) ▪ 提升開發效率 => 透過現代化工具 ▪ 提升溝通效率 => 透過 Trace Log ▪ 提升測試效率 => 透過 Network Abort Requests ▪ 目標關注在真正需要測試的內容: Ads-blocker / 網站新手提示 ▪ 降低重複性過多的步驟: Authentication 60
- 61.
- 62.
- 63.
- 64.
- 65.