Embrace Innovation: Designing A Protractor Framework For Angular2 Applications
summary
Built a modular Protractor framework for Angular2 using TypeScript, mocked services (Express/static JSON) and component-aligned page modules, swapping XPath for CSS selectors over XPath and moving locators next to the matching component so devs can update tests. Solves canvas drag‑and‑drop with vector math and WebDriver mouse actions (became reliable), uses async/await and Protractor expected conditions, shards tests for parallel CI runs (shard test files for parallel runs), and deliberately trashes flaky designs to iterate quickly with feedback. Tools: Protractor + Angular2 + TypeScript.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 0:22What is innovation
- 1:08Meet Meredith
- 1:51Agenda
- 2:29First Framework
- 3:01Components
- 4:10Angular2 Components
- 7:05Framework isnt working
- 8:19Face the unknown
- 9:18James Baldwin
- 9:29Embrace the unknown
- 11:20Innovation definition
- 12:17Creating new approaches
- 12:49Merediths innovation process
- 15:20Merediths approach to innovation
- 16:05Forming a cohesive team
- 19:08Example Framework
- 19:27Project Structure
- 25:28Navigating
- 26:24Questions
- 27:08Vector Math
- 28:35Relationship with Developers
- 30:13Why did you choose Protractor
- 32:28Selectors
- 34:12Services
- 35:44implicit or explicit weights
related talks
42mProtractor Framework – Making Stable e2e Tests for Angular Applications
48mModern capabilities for organizing a ProtractorJS framework
49mProtractor: creating your first script
59mTechniques and practices for testing Angular 2
29mProtractor: The Hacker Way
23mProtractor: A New Hope
52mAngular Testing: Do I Really Have to Do It?!
32mTesting Angular apps