twMVC#44 如何測試與保護你的 web application with playwright
0 likes549 views
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 with Playwright 阿砮 Cheng-Ju Wu
- 2. https://mvc.tw 2 End-to-End Test ? 開始前…如果我是測試工程師
- 5. https://mvc.tw End-to-End Test 5 ▪ 繁瑣又缺乏創造力 ▪ 時間成本 ▪ 開發維護成本 ▪ 執行慢 ▪ 測試覆蓋率低 ▪ 可靠性 如何改善 提升效率
- 7. https://mvc.tw Agenda ▪ What is Playwright ▪ Why choose Playwright ▪ How to use Playwright ▪ Use cases 7
- 9. https://mvc.tw What is Playwright 9 github.com/microsoft/playwright Playwright Playwright Test
- 10. https://mvc.tw Playwright is ▪ Bowser Automation 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
- 20. https://mvc.tw Playwright Test ▪ Test Runner ▪ Reporters ▪ Parallelism ▪ Test Retries ▪ … 20
- 22. https://mvc.tw 22 Playwright: Browser Contexts ▪ Not Restart a Browser ▪ 完整隔離的環境 ▪ 快速實例化 ▪ 較低的資源開銷
- 24. https://mvc.tw 24 Playwright: Auto-waiting ▪ 簡化測試程式，有助於聚焦實際任務 ▪ 不太需要手動寫下 wait 來確保前端收到回應 ▪ 提高測試可靠性 ▪ 因應現今網站，頻繁存取後端 API 的特性 ▪ 執行操作前對 Element 可操作性檢查
- 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
- 31. https://mvc.tw Playwright Install ▪ Node.js ▪ .NET 31
- 32. https://mvc.tw Playwright ▪ Download browsers 32
- 33. https://mvc.tw Playwright ▪ Record videos ▪ Screenshots 33
- 34. https://mvc.tw Playwright ▪ Code generator and debugger ▪ Intercept network 34
- 36. https://mvc.tw 36 CSS Selectors w3schools CSS Selectors
- 37. https://mvc.tw Playwright ▪ Inspector ▪ Debugging Playwright scripts 37
- 39. https://mvc.tw 是否發生過，一句話惹怒… 39 網站反應很慢 怎麼慢法 ? 大約回應多久
- 40. https://mvc.tw Playwright ▪ Trace Viewer ▪ Recording trace ▪ Viewing trace ▪ Action ▪ Screenshots ▪ Snapshots 40
- 49. https://mvc.tw 49 Network – Abort Requests ▪ Ads-blocker
- 52. https://mvc.tw 52 Network – Abort Request ▪ 網站新手提示 novice-guide-demo From 黑暗執行緒
- 56. https://mvc.tw Authentication 56 測試執行時間 總計執行時間 登入次數
- 60. https://mvc.tw 總結 End-to-End Test ( RD & QA ) ▪ 提升開發效率 => 透過現代化工具 ▪ 提升溝通效率 => 透過 Trace Log ▪ 提升測試效率 => 透過 Network Abort Requests ▪ 目標關注在真正需要測試的內容: Ads-blocker / 網站新手提示 ▪ 降低重複性過多的步驟: Authentication 60
- 65. 65 天瓏資訊圖書