SlideShare a Scribd company logo
Enabling continuous deployment
of pixel-perfect user interfaces
Stefano Rago
Stefano Rago
DevOps Engineer at
@helmoltz
Topics
• The importance of UX / UI

• Issues and challenges

• An approach based on TDD

• Integrating automated tests into CI/CD
UX / UI
• UX Design encompasses any and all
interactions between a potential or active
customer and a company.

• UI Design is responsible for the transference
of a brand’s strengths and visual assets to a
product’s interface as to best enhance the
user’s experience.
source: careerfoundry.com
UI/UX in the industry
• 88% of online consumers are less likely to return
to a site after a bad experience. – Econsultancy

• 48% of people cited a website’s design as the
number one factor in deciding the credibility of a
business. – Ironpaper Inc.

• A site with a well-designed user interface can have
up to 200% higher conversion rates than one that
was poorly designed. – Naturalinteraction

• “Every dollar invested in UX generates around
$100 dollars return” – IBM.
UI Defects
Challenges
i18n
dynamic content
icons by Pixel perfect
A simple website…
•10 pages

•3 supported desktop browsers

•2 mobile browsers

•2 orientations

•3 responsive breakpoints
… 360 variations
Manual testing
+ Can better explore cases previously unthought of

+ Can be more flexible

- Tedious and error prone

- Unfeasible to take into account all possible scenarios

- Tends to be executed only in specific development stages

- Introduces delays in delivery and high costs
Automated testing
+ Can be easily integrated in CI/CD pipelines

+ Fast feedback loop

+ Reduces time, effort and costs required to fix issues

+ Confidence and safety nets for developers

+ Tests can be replicated and run at different development stages

- Tests maintenance

- Time required to run tests
Support for automated tests
• Approach

• Languages

• Test frameworks and reporting

• Tolerance and false positive detection

• Coverage

• Aid for code reviews

• SaaS
Our approach
• Targeting web apps and websites

• Screenshot-based

• Test Driven, outside-in

• Python, pytest, needle

• Selenium grid
Our approach
GitLab runner
GitLab job runner #1

…

GitLab job runner #n
GitLab server
git repository
CI/CD
Selenium grid
Selenium Hub
Selenium Node
Google Chrome
dev
Production
web server
nginx
flask
end user
1
2
3
4 5
uwsgi
Demo
Considerations, trade-offs and
improvements
• Test duration / feedback loop

• Maintenance costs

• Time needed to reach the testable
state

• False positive detection

• Continuous testing/monitoring of
production environments
Thanks

More Related Content

What's hot

Web benefits
Web benefitsWeb benefits
Web benefits
steggles28
 
Test Early, Test Often, Test Left
Test Early, Test Often, Test LeftTest Early, Test Often, Test Left
Test Early, Test Often, Test Left
SmartBear
 
7 mobile app usability testing best practices by UserTesting
7 mobile app usability testing best practices by UserTesting7 mobile app usability testing best practices by UserTesting
7 mobile app usability testing best practices by UserTesting
UserTesting
 
Applitools Framework
Applitools  FrameworkApplitools  Framework
Applitools Framework
Applitools
 
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in MindSauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
Sauce Labs
 
Testing for Inclusive Web: Accessibility
Testing for Inclusive Web: AccessibilityTesting for Inclusive Web: Accessibility
Testing for Inclusive Web: Accessibility
Manoj Kumar Kumar
 
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFTAdvanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
adamcarmi
 
How we work
How we workHow we work
How we work
Ryanne Goodman
 
Quality in dev ops east 2017
Quality in dev ops east 2017Quality in dev ops east 2017
Quality in dev ops east 2017
Amir Rozenberg
 
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
Theo Jungeblut
 
SauceCon 2017: test.allTheThings(): Digital Edition
SauceCon 2017: test.allTheThings(): Digital EditionSauceCon 2017: test.allTheThings(): Digital Edition
SauceCon 2017: test.allTheThings(): Digital Edition
Sauce Labs
 
Performance Warrior Tales: Cloud Load Testing the Retail Giants
Performance Warrior Tales: Cloud Load Testing the Retail Giants Performance Warrior Tales: Cloud Load Testing the Retail Giants
Performance Warrior Tales: Cloud Load Testing the Retail Giants
SOASTA
 
How to Make Sure Developers Never Use Your API
How to Make Sure Developers Never Use Your APIHow to Make Sure Developers Never Use Your API
How to Make Sure Developers Never Use Your API
Carlo Longino
 
Key note Manish and Deepa
Key note Manish and DeepaKey note Manish and Deepa
Key note Manish and Deepa
vodQA
 
Usability247 business overview
Usability247 business overviewUsability247 business overview
Usability247 business overview
UX247
 
Kirill Korobov - How to Work with Non-Functional Requirements
Kirill Korobov - How to Work with Non-Functional RequirementsKirill Korobov - How to Work with Non-Functional Requirements
Kirill Korobov - How to Work with Non-Functional Requirements
Lviv Startup Club
 
DevOps Challenges and Mitigation
DevOps Challenges and MitigationDevOps Challenges and Mitigation
DevOps Challenges and Mitigation
Narayanan Subramaniam
 
UI Integrations Test
UI Integrations TestUI Integrations Test
UI Integrations Test
Herwidodo kusumobroto
 
Why a Mobile Test Strategy is just Test Strategy
Why a Mobile Test Strategy is just Test StrategyWhy a Mobile Test Strategy is just Test Strategy
Why a Mobile Test Strategy is just Test Strategy
Ho Chi Minh City Software Testing Club
 
How to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
How to Ensure Developers Never Ever Use Your API: A Study of Worst PracticesHow to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
How to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
Carlo Longino
 

What's hot (20)

Web benefits
Web benefitsWeb benefits
Web benefits
 
Test Early, Test Often, Test Left
Test Early, Test Often, Test LeftTest Early, Test Often, Test Left
Test Early, Test Often, Test Left
 
7 mobile app usability testing best practices by UserTesting
7 mobile app usability testing best practices by UserTesting7 mobile app usability testing best practices by UserTesting
7 mobile app usability testing best practices by UserTesting
 
Applitools Framework
Applitools  FrameworkApplitools  Framework
Applitools Framework
 
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in MindSauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
SauceCon 2017: Building a Continuous Delivery Pipeline with Testing in Mind
 
Testing for Inclusive Web: Accessibility
Testing for Inclusive Web: AccessibilityTesting for Inclusive Web: Accessibility
Testing for Inclusive Web: Accessibility
 
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFTAdvanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
Advanced Cross-Browser Visual Testing with Applitools Eyes and HP LeanFT
 
How we work
How we workHow we work
How we work
 
Quality in dev ops east 2017
Quality in dev ops east 2017Quality in dev ops east 2017
Quality in dev ops east 2017
 
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
Debugging,Troubleshooting & Monitoring Distributed Web & Cloud Applications a...
 
SauceCon 2017: test.allTheThings(): Digital Edition
SauceCon 2017: test.allTheThings(): Digital EditionSauceCon 2017: test.allTheThings(): Digital Edition
SauceCon 2017: test.allTheThings(): Digital Edition
 
Performance Warrior Tales: Cloud Load Testing the Retail Giants
Performance Warrior Tales: Cloud Load Testing the Retail Giants Performance Warrior Tales: Cloud Load Testing the Retail Giants
Performance Warrior Tales: Cloud Load Testing the Retail Giants
 
How to Make Sure Developers Never Use Your API
How to Make Sure Developers Never Use Your APIHow to Make Sure Developers Never Use Your API
How to Make Sure Developers Never Use Your API
 
Key note Manish and Deepa
Key note Manish and DeepaKey note Manish and Deepa
Key note Manish and Deepa
 
Usability247 business overview
Usability247 business overviewUsability247 business overview
Usability247 business overview
 
Kirill Korobov - How to Work with Non-Functional Requirements
Kirill Korobov - How to Work with Non-Functional RequirementsKirill Korobov - How to Work with Non-Functional Requirements
Kirill Korobov - How to Work with Non-Functional Requirements
 
DevOps Challenges and Mitigation
DevOps Challenges and MitigationDevOps Challenges and Mitigation
DevOps Challenges and Mitigation
 
UI Integrations Test
UI Integrations TestUI Integrations Test
UI Integrations Test
 
Why a Mobile Test Strategy is just Test Strategy
Why a Mobile Test Strategy is just Test StrategyWhy a Mobile Test Strategy is just Test Strategy
Why a Mobile Test Strategy is just Test Strategy
 
How to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
How to Ensure Developers Never Ever Use Your API: A Study of Worst PracticesHow to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
How to Ensure Developers Never Ever Use Your API: A Study of Worst Practices
 

Similar to Enabling continuous deployment of pixel-perfect user interfaces

How to Manage Digital User Experience for Web Applications
How to Manage Digital User Experience for Web ApplicationsHow to Manage Digital User Experience for Web Applications
How to Manage Digital User Experience for Web Applications
eG Innovations
 
Continuous Delivery at Wix, Yaniv Even Haim
Continuous Delivery at Wix, Yaniv Even HaimContinuous Delivery at Wix, Yaniv Even Haim
Continuous Delivery at Wix, Yaniv Even Haim
DevOpsDays Tel Aviv
 
Ady beleanu automate-theprocessdelivery
Ady beleanu   automate-theprocessdeliveryAdy beleanu   automate-theprocessdelivery
Ady beleanu automate-theprocessdelivery
Romania Testing
 
Rtc2014 automate the_process_deliver_quality_ady_beleanu
Rtc2014 automate the_process_deliver_quality_ady_beleanuRtc2014 automate the_process_deliver_quality_ady_beleanu
Rtc2014 automate the_process_deliver_quality_ady_beleanu
Ady Beleanu
 
Aligning Software Testing With Modern Age Development Practices
Aligning Software Testing With Modern Age Development PracticesAligning Software Testing With Modern Age Development Practices
Aligning Software Testing With Modern Age Development Practices
Aspire Systems
 
Measure and increase developer productivity with help of Severless by Kazulki...
Measure and increase developer productivity with help of Severless by Kazulki...Measure and increase developer productivity with help of Severless by Kazulki...
Measure and increase developer productivity with help of Severless by Kazulki...
Vadym Kazulkin
 
vidyullathasree_pera_resume
vidyullathasree_pera_resumevidyullathasree_pera_resume
vidyullathasree_pera_resume
Vidyullathasree Pera
 
Continuous Deployment - Case Study at WIX
Continuous Deployment - Case Study at WIXContinuous Deployment - Case Study at WIX
Continuous Deployment - Case Study at WIX
AgileSparks
 
A Roadmap to Enterprise Quality
A Roadmap to Enterprise QualityA Roadmap to Enterprise Quality
A Roadmap to Enterprise Quality
Jeff Bramwell
 
Anil_kumar_Resume
Anil_kumar_ResumeAnil_kumar_Resume
Anil_kumar_Resume
kotekal anil
 
Software development in the modern age
Software development in the modern ageSoftware development in the modern age
Software development in the modern age
Roy Wasse
 
How to Avoid Continuously Delivering Faulty Software
How to Avoid Continuously Delivering Faulty SoftwareHow to Avoid Continuously Delivering Faulty Software
How to Avoid Continuously Delivering Faulty Software
Perforce
 
Udvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load testUdvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load test
Peter Lindberg
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
UserZoom
 
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
WSO2
 
Agile and Lean Software Development
Agile and Lean Software DevelopmentAgile and Lean Software Development
Agile and Lean Software Development
Tathagat Varma
 
Model-Based Testing for ALM Octane: Better tests, built faster
Model-Based Testing for ALM Octane: Better tests, built faster Model-Based Testing for ALM Octane: Better tests, built faster
Model-Based Testing for ALM Octane: Better tests, built faster
Curiosity Software Ireland
 
Technical stories v1.2
Technical stories v1.2Technical stories v1.2
Technical stories v1.2
Jim Brisson
 
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
Vadym Kazulkin
 
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
dennisn129
 

Similar to Enabling continuous deployment of pixel-perfect user interfaces (20)

How to Manage Digital User Experience for Web Applications
How to Manage Digital User Experience for Web ApplicationsHow to Manage Digital User Experience for Web Applications
How to Manage Digital User Experience for Web Applications
 
Continuous Delivery at Wix, Yaniv Even Haim
Continuous Delivery at Wix, Yaniv Even HaimContinuous Delivery at Wix, Yaniv Even Haim
Continuous Delivery at Wix, Yaniv Even Haim
 
Ady beleanu automate-theprocessdelivery
Ady beleanu   automate-theprocessdeliveryAdy beleanu   automate-theprocessdelivery
Ady beleanu automate-theprocessdelivery
 
Rtc2014 automate the_process_deliver_quality_ady_beleanu
Rtc2014 automate the_process_deliver_quality_ady_beleanuRtc2014 automate the_process_deliver_quality_ady_beleanu
Rtc2014 automate the_process_deliver_quality_ady_beleanu
 
Aligning Software Testing With Modern Age Development Practices
Aligning Software Testing With Modern Age Development PracticesAligning Software Testing With Modern Age Development Practices
Aligning Software Testing With Modern Age Development Practices
 
Measure and increase developer productivity with help of Severless by Kazulki...
Measure and increase developer productivity with help of Severless by Kazulki...Measure and increase developer productivity with help of Severless by Kazulki...
Measure and increase developer productivity with help of Severless by Kazulki...
 
vidyullathasree_pera_resume
vidyullathasree_pera_resumevidyullathasree_pera_resume
vidyullathasree_pera_resume
 
Continuous Deployment - Case Study at WIX
Continuous Deployment - Case Study at WIXContinuous Deployment - Case Study at WIX
Continuous Deployment - Case Study at WIX
 
A Roadmap to Enterprise Quality
A Roadmap to Enterprise QualityA Roadmap to Enterprise Quality
A Roadmap to Enterprise Quality
 
Anil_kumar_Resume
Anil_kumar_ResumeAnil_kumar_Resume
Anil_kumar_Resume
 
Software development in the modern age
Software development in the modern ageSoftware development in the modern age
Software development in the modern age
 
How to Avoid Continuously Delivering Faulty Software
How to Avoid Continuously Delivering Faulty SoftwareHow to Avoid Continuously Delivering Faulty Software
How to Avoid Continuously Delivering Faulty Software
 
Udvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load testUdvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load test
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
 
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
 
Agile and Lean Software Development
Agile and Lean Software DevelopmentAgile and Lean Software Development
Agile and Lean Software Development
 
Model-Based Testing for ALM Octane: Better tests, built faster
Model-Based Testing for ALM Octane: Better tests, built faster Model-Based Testing for ALM Octane: Better tests, built faster
Model-Based Testing for ALM Octane: Better tests, built faster
 
Technical stories v1.2
Technical stories v1.2Technical stories v1.2
Technical stories v1.2
 
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
Measure and Increase Developer Productivity with Help of Serverless AWS Commu...
 
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
10.15.2014 dallas ws_brian_d_dn_live workshop enterpise agility_cust
 

Recently uploaded

Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball playEric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
enizeyimana36
 
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Harnessing WebAssembly for Real-time Stateless Streaming PipelinesHarnessing WebAssembly for Real-time Stateless Streaming Pipelines
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Christina Lin
 
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
insn4465
 
Computational Engineering IITH Presentation
Computational Engineering IITH PresentationComputational Engineering IITH Presentation
Computational Engineering IITH Presentation
co23btech11018
 
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have oneISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
Las Vegas Warehouse
 
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdfBPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
MIGUELANGEL966976
 
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
IJECEIAES
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
MDSABBIROJJAMANPAYEL
 
Casting-Defect-inSlab continuous casting.pdf
Casting-Defect-inSlab continuous casting.pdfCasting-Defect-inSlab continuous casting.pdf
Casting-Defect-inSlab continuous casting.pdf
zubairahmad848137
 
Manufacturing Process of molasses based distillery ppt.pptx
Manufacturing Process of molasses based distillery ppt.pptxManufacturing Process of molasses based distillery ppt.pptx
Manufacturing Process of molasses based distillery ppt.pptx
Madan Karki
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
Hitesh Mohapatra
 
Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...
bijceesjournal
 
Engineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdfEngineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdf
abbyasa1014
 
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEMTIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
HODECEDSIET
 
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
IJECEIAES
 
Heat Resistant Concrete Presentation ppt
Heat Resistant Concrete Presentation pptHeat Resistant Concrete Presentation ppt
Heat Resistant Concrete Presentation ppt
mamunhossenbd75
 
The Python for beginners. This is an advance computer language.
The Python for beginners. This is an advance computer language.The Python for beginners. This is an advance computer language.
The Python for beginners. This is an advance computer language.
sachin chaurasia
 
Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...
IJECEIAES
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
Aditya Rajan Patra
 
A review on techniques and modelling methodologies used for checking electrom...
A review on techniques and modelling methodologies used for checking electrom...A review on techniques and modelling methodologies used for checking electrom...
A review on techniques and modelling methodologies used for checking electrom...
nooriasukmaningtyas
 

Recently uploaded (20)

Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball playEric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
Eric Nizeyimana's document 2006 from gicumbi to ttc nyamata handball play
 
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
Harnessing WebAssembly for Real-time Stateless Streaming PipelinesHarnessing WebAssembly for Real-time Stateless Streaming Pipelines
Harnessing WebAssembly for Real-time Stateless Streaming Pipelines
 
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
 
Computational Engineering IITH Presentation
Computational Engineering IITH PresentationComputational Engineering IITH Presentation
Computational Engineering IITH Presentation
 
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have oneISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
 
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdfBPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
 
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
 
Casting-Defect-inSlab continuous casting.pdf
Casting-Defect-inSlab continuous casting.pdfCasting-Defect-inSlab continuous casting.pdf
Casting-Defect-inSlab continuous casting.pdf
 
Manufacturing Process of molasses based distillery ppt.pptx
Manufacturing Process of molasses based distillery ppt.pptxManufacturing Process of molasses based distillery ppt.pptx
Manufacturing Process of molasses based distillery ppt.pptx
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
 
Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...
 
Engineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdfEngineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdf
 
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEMTIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
TIME DIVISION MULTIPLEXING TECHNIQUE FOR COMMUNICATION SYSTEM
 
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
 
Heat Resistant Concrete Presentation ppt
Heat Resistant Concrete Presentation pptHeat Resistant Concrete Presentation ppt
Heat Resistant Concrete Presentation ppt
 
The Python for beginners. This is an advance computer language.
The Python for beginners. This is an advance computer language.The Python for beginners. This is an advance computer language.
The Python for beginners. This is an advance computer language.
 
Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
 
A review on techniques and modelling methodologies used for checking electrom...
A review on techniques and modelling methodologies used for checking electrom...A review on techniques and modelling methodologies used for checking electrom...
A review on techniques and modelling methodologies used for checking electrom...
 

Enabling continuous deployment of pixel-perfect user interfaces

  • 1. Enabling continuous deployment of pixel-perfect user interfaces Stefano Rago
  • 3. Topics • The importance of UX / UI • Issues and challenges • An approach based on TDD • Integrating automated tests into CI/CD
  • 4. UX / UI • UX Design encompasses any and all interactions between a potential or active customer and a company. • UI Design is responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience. source: careerfoundry.com
  • 5. UI/UX in the industry • 88% of online consumers are less likely to return to a site after a bad experience. – Econsultancy • 48% of people cited a website’s design as the number one factor in deciding the credibility of a business. – Ironpaper Inc. • A site with a well-designed user interface can have up to 200% higher conversion rates than one that was poorly designed. – Naturalinteraction • “Every dollar invested in UX generates around $100 dollars return” – IBM.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 18. A simple website… •10 pages •3 supported desktop browsers •2 mobile browsers •2 orientations •3 responsive breakpoints … 360 variations
  • 19. Manual testing + Can better explore cases previously unthought of + Can be more flexible - Tedious and error prone - Unfeasible to take into account all possible scenarios - Tends to be executed only in specific development stages - Introduces delays in delivery and high costs
  • 20. Automated testing + Can be easily integrated in CI/CD pipelines + Fast feedback loop + Reduces time, effort and costs required to fix issues + Confidence and safety nets for developers + Tests can be replicated and run at different development stages - Tests maintenance - Time required to run tests
  • 21. Support for automated tests • Approach • Languages • Test frameworks and reporting • Tolerance and false positive detection • Coverage • Aid for code reviews • SaaS
  • 22. Our approach • Targeting web apps and websites • Screenshot-based • Test Driven, outside-in • Python, pytest, needle • Selenium grid
  • 23. Our approach GitLab runner GitLab job runner #1 … GitLab job runner #n GitLab server git repository CI/CD Selenium grid Selenium Hub Selenium Node Google Chrome dev Production web server nginx flask end user 1 2 3 4 5 uwsgi
  • 24. Demo
  • 25. Considerations, trade-offs and improvements • Test duration / feedback loop • Maintenance costs • Time needed to reach the testable state • False positive detection • Continuous testing/monitoring of production environments