Automate, Automate, Automate - Bridging the Gap Between Capture and Process
An easy way to automate complex UI
-
Upload
ivan-pashko -
Category
Presentations & Public Speaking
-
view
91 -
download
2
Transcript of An easy way to automate complex UI
![Page 1: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/1.jpg)
An easy way to automate complex UI
Test automation practices and tips
![Page 2: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/2.jpg)
About me
7+ years in IT Automation Engineer Scrum Master Betsson project, Ciklum
![Page 3: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/3.jpg)
What we have
Payments Solution for online casino 20+ brands 7+ countries 40+ payment methods Payment Pages UI (Desktop, mobile,
adaptive) Brand specific features
![Page 4: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/4.jpg)
Complex UI?*
*from automation perspective
![Page 5: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/5.jpg)
Complex UI? Complex fronted:
Dynamic Async Adaptive
Complex backend: Hardly configurable Overflown Slow Unstable
![Page 6: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/6.jpg)
Complex tests
Complex behavior Complex architecture Slow Fragile Overflown with scenario's «Test smells» *
*http://xunitpatterns.com/TestSmells.html
![Page 7: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/7.jpg)
What automation we want?
Easy to writeClear to understandSimple to work with
![Page 8: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/8.jpg)
Agenda
Fakes & test doubles Test & Patterns Tips and tricks (test sugar & screenshots)
![Page 9: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/9.jpg)
Fakes & test doubles
![Page 10: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/10.jpg)
Test doubles
We replace a component on which the SUT depends with a "test-specific equivalent.“
Test Stub Mock Object Fake Object
![Page 11: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/11.jpg)
Test doubles
Web partWebApiCore SystemDB3rd systems
![Page 12: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/12.jpg)
Test doubles
Web partWebApi / FakeCore SystemDB3rd systems
![Page 13: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/13.jpg)
What can we solve with Fake
Test without dependent components … without Backend… without 3rd Party services… without DB
Test unavailable component Simplify scenarios precondition Fix Slow/ Fragile / Heavyweight tests
![Page 14: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/14.jpg)
Static Fake
Static Fake – hardcoded behavior of dependent component.
![Page 15: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/15.jpg)
Static Fake. Pros
Have all specific behaviorsAny language for implementation*Use for prototyping & local testingSpeedup tests
*Sometimes it very hard to mock backend on JavaScript
![Page 16: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/16.jpg)
Static Fake. Cons
It is not easy to implementTest scenarios are not clearSupport
![Page 17: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/17.jpg)
Dynamic Fake
Configurable Fake Object - a reusable Test Double with the configurable values to be returned or verified during the fixture setup phase of a test.
![Page 18: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/18.jpg)
Dynamic Fake. Pros
Have all specific behaviorsConfigured from testScenarios are clear & readable
![Page 19: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/19.jpg)
Dynamic Fake. Cons
Much harder for developmentCan’t/hard to used for prototyping or local
testing
![Page 20: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/20.jpg)
Pitfalls
Fake – not a silver bulletAdditional test layer:
Contract tests on fake/depended component
Do not test Fake, test SUT
![Page 21: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/21.jpg)
Tests and Patterns
![Page 22: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/22.jpg)
Tests & Patterns. Problems
Scenarios duplicates Overflown locators / base classes /behavior Tones of code Inheritance hell
![Page 23: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/23.jpg)
PageFactory
PageFactory + [Attributes] Factory return needed page based on SiteName, PaymentMethod,
IsMobile No new for Page Object creation Fallback (from brand to common)
Result: ~ -55% duplicates in test scenarios. Test request needed page from Factory (same method for all
brands) Test prepares and transmits data to PageObject
![Page 24: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/24.jpg)
PageFactory
![Page 25: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/25.jpg)
Common Naming
XPath and component @data-name attribute
Result: ~ -35% PageObject duplicates. Similar payment method pages are not duplicated
![Page 26: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/26.jpg)
Template Method
Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses.
Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure
![Page 27: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/27.jpg)
Template Method
Behavioral interfaces for each componentIReceiptPage BankReceiptPage|
WizardMobileReceiptPage|..ReceiptPageBase – with complex step definition
Result: Logic encapsulated from base class to each
component implementation
![Page 28: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/28.jpg)
Strategy Pattern
Strategy pattern - enables an algorithm's behavior to be selected at runtime.
![Page 29: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/29.jpg)
Strategy Pattern
![Page 30: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/30.jpg)
Strategy Pattern
Strategy pattern on element-component: IMonthYearComponent
Select2MonthYearComponent| SelectMonthYearComponent | InlineMonthYearComponent
PageFactory init strategy context
Result: ~ -60% duplicates in PageObjects All Brand-specific features overrides were
removed
![Page 31: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/31.jpg)
Tests & Patterns
Scenarios duplicates
Overflown locators / base classes /behavior
Tones of code Inheritance hell
Factories Common naming Patterns
Template methodStrategy
![Page 32: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/32.jpg)
Tests sugar. Screenshots
![Page 33: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/33.jpg)
Test sugar
SpecFlow & Given-When-Then structure Given - only preconditions When - all actions Then - only asserts
![Page 34: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/34.jpg)
Screenshots on each test step
![Page 35: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/35.jpg)
Screenshots in tests
SpecFlow [AfterStep] Screenshot all steps Keep history
![Page 36: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/36.jpg)
Screenshots. Visual testing
Use extra step Continue on failure Use emulations Hardcode/Ignore dynamic values
![Page 37: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/37.jpg)
How to make your life easier?
Fake complex backend Simplify your architecture
apply patterns use best practices
Improve test feedback – use text, visual information
![Page 38: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/38.jpg)
What automation we get?
Easy to writeClear to understandSimple to work with
![Page 39: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/39.jpg)
That's all folks! Questions?
![Page 40: An easy way to automate complex UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/58ce5b0f1a28ab2f268b49a1/html5/thumbnails/40.jpg)
LinksTest Doubles:• http://xunitpatterns.com/Test%20Double.html• https://www.martinfowler.com/bliki/TestDouble.htmlPatterns:• https://sourcemaking.com/design_patterns/behavioral_patternsMe (Ivan Pashko):• https://www.facebook.com/groups/1180099188730673/Pictures:• https://pixabay.com | https://unsplash.com