![Disclaimer
Cons
● Basic comparison
● Impact on project size
● Limited blockout options
● No dashboard
Pro’s
● Open Source
● The (module) logic is easy
● Easy cross platform/device blockout logic
driver.compareScreen(
'compareScreen-elementBlockOuts', {
elementBlockOuts: [
// block out element 1
{ element: LoginScreen.loginButton },
// block out element 2 with margin
{ element: LoginScreen.email, margin: 50},
],
}
);](https://image.slidesharecdn.com/sc-19-build-your-own-v2-190430063802/85/Building-Your-Own-Native-App-Visual-Testing-Module-with-Appium-52-320.jpg)
Building Your Own Native App Visual Testing Module with Appium
- 1. Building Your Own Native App Visual Testing Module with Appium Wim Selles, Sr. Solutions Architect @Sauce Labs
- 2. It’s not about me ! :@wswebcreation " : https://github.com/wswebcreation
- 3. Idea
- 4. Idea
- 5. Requirements • Native App support • Cross platform • Integrate WebdriverIO • Paid tools === trial first • Support blockouts • Support element screenshots/bounding box For a visual regression/testing solution
- 7. Research Visual regression / testing for Native Apps iOSSnapshotTestCase Nakal sightr.io screenshot-tests-for-android
- 8. Result Visual regression / testing for Native Apps Requirements screenshot-tests- for-android iOSSnapshot TestCase Nakal sightr.io VisWiz Applitools Native apps support Yes Yes Yes Yes Yes Yes WebdriverIO support - JS - No extra environment dependencies No No No No Yes Not for native apps Trial? Open source Open source Open source Beta Yes Yes Image diff Yes, basic Yes, basic Yes Yes Yes, basic Yes, extensive Blockouts No No Yes and no No no Yes Element screenshots No No No No No No Bounding box No No No No No Yes
- 9. Result Visual regression / testing for Native Apps Requirements screenshot-tests- for-android iOSSnapshot TestCase Nakal sightr.io VisWiz Applitools Native apps support Yes Yes Yes Yes Yes Yes WebdriverIO support - JS - No extra environment dependencies No No No No Yes Not for native apps Trial? Open source Open source Open source Beta Yes Yes Image diff Yes, basic Yes, basic Yes Yes Yes, basic Yes, extensive Blockouts No No Yes and no No no Yes Element screenshots No No No No No No Bounding box No No No No No Yes
- 10. Result Visual regression / testing for Native Apps Requirements screenshot-tests- for-android iOSSnapshot TestCase Nakal sightr.io VisWiz Applitools Native apps support Yes Yes Yes Yes Yes Yes WebdriverIO support - JS - No extra environment dependencies No No No No Yes Not for native apps Trial? Open source Open source Open source Beta Yes Yes Image diff Yes, basic Yes, basic Yes Yes Yes, basic Yes, extensive Blockouts No No Yes and no No no Yes Element screenshots No No No No No No Bounding box No No No No No Yes
- 11. Result Visual regression / testing for Native Apps Requirements screenshot-tests- for-android iOSSnapshot TestCase Nakal sightr.io VisWiz Applitools Native apps support Yes Yes Yes Yes Yes Yes WebdriverIO support - JS - No extra environment dependencies No No No No Yes Not for native apps Trial? Open source Open source Open source Beta Yes Yes Image diff Yes, basic Yes, basic Yes Yes Yes, basic Yes, extensive Blockouts No No Yes and no No no Yes Element screenshots No No No No No No Bounding box No No No No No Yes
- 12. Result Visual regression / testing for Native Apps Requirements screenshot-tests- for-android iOSSnapshot TestCase Nakal sightr.io VisWiz Applitools Native apps support Yes Yes Yes Yes Yes Yes WebdriverIO support - JS - No extra environment dependencies No No No No Yes Not for native apps Trial? Open source Open source Open source Beta Yes Yes Image diff Yes, basic Yes, basic Yes Yes Yes, basic Yes, extensive Blockouts No No Yes and no No no Yes Element screenshots No No No No No No Bounding box No No No No No Yes ?
- 14. Logic Who should do what? Requirements Module Comparison engine Actively maintained - Yes Environment dependencies No No Blockout(s) Yes, determine and provide Yes Element screenshot Yes - Create baseline Yes - Screenshots per device Yes - Support compare options (for example antialiasing) Yes Yes
- 15. Logic Who should do what? Requirements Module Comparison engine Actively maintained - Yes Environment dependencies No No Blockout(s) Yes, determine and provide Yes Element screenshot Yes - Create baseline Yes - Screenshots per device Yes - Support compare options (for example antialiasing) Yes Yes
- 21. Conclusion
- 22. Conclusion
- 23. • saveScreen What should it do
- 24. • saveScreen • compareScreen What should it do
- 25. • saveScreen • compareScreen • saveElement What should it do
- 26. • saveScreen • compareScreen • saveElement • compareElement What should it do
- 27. saveScreen What should it do?
- 28. compareScreen Where could it go wrong, where could it cause flakiness? Navigation bar Home bar indicatorStatus bar
- 29. Status bar • Android and iOS differ in height • iOS OS versions / devices differ • Android OS versions / devices differ • Cross platform / device solution
- 40. Navigation bar • Android OS versions / devices differ • Not each device has a tool/navigation bar • Cross device solution For Android
- 42. Home bar indicator ● Currently 2 sizes ● The behaviour can be adjusted iPhone X series
- 44. saveElement
- 45. saveElement
- 46. saveElement
- 47. saveElement
- 48. compareElement ● Comparing (options) the same as for compareScreen ● Element block-outs more complex
- 49. Use case React Native 0.54 React Native 0.57
- 50. Use case React Native 0.54 React Native 0.57
- 51. Use case
- 52. Disclaimer Cons ● Basic comparison ● Impact on project size ● Limited blockout options ● No dashboard Pro’s ● Open Source ● The (module) logic is easy ● Easy cross platform/device blockout logic driver.compareScreen( 'compareScreen-elementBlockOuts', { elementBlockOuts: [ // block out element 1 { element: LoginScreen.loginButton }, // block out element 2 with margin { element: LoginScreen.email, margin: 50}, ], } );
- 53. Want to use it? https://github.com/wswebcreation/wdio-native-app-compare
- 54. Want to use it?
- 55. Thank you.