SlideShare a Scribd company logo

Visual Testing Guide for UI and UX Design

•
•
Somkiat Puisungnoen
Somkiat Puisungnoen

The document discusses visual testing and user interface (UI) testing. It notes some common issues with UI testing, including that it can be slow, brittle, and automation may not be too helpful. It then introduces Appraise as a visual testing tool that uses Google Chrome Headless and the Puppeteer Node API to run tests. It provides instructions for installing, running, and approving tests with Appraise.

Technology
1 of 24
Download to read offline
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. Visual Testing
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !2
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !3
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !4
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !5 Visual Testing ?
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !6 UI Testing
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !7
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !8 1. It’s too slow Rules of UI Testing 2. It’s too brittle 3. Automation is not too helpful
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !9 Tools
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !10 UX and UI
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !11 Visual Design
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !12 Developer ?
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !13 Specification
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !14 Specification by Example
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !15 Better way to improve your requirement
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !16
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !17
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !18 https://github.com/AppraiseQA/appraise
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !19 Appraise Use Google Chrome Headless Develop by puppeteer (Node API)
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !20 Installation $npm install -g appraise
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !21 Run $appraise run $appraise run --page “page name”
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !22 Run $appraise run --page “page name” --initial-width 1280 --initial-height 200
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !23 Approve $appraise approve $appraise approve --page "my_web"
Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !24 Thank you

Recommended

Lesson learned from React native and Flutter
Lesson learned from React native and FlutterLesson learned from React native and Flutter
Lesson learned from React native and FlutterSomkiat Puisungnoen
 
Distributed Tracing
Distributed Tracing Distributed Tracing
Distributed Tracing Somkiat Puisungnoen
 
Shared code between projects
Shared code between projectsShared code between projects
Shared code between projectsSomkiat Puisungnoen
 
Angular :: basic tuning performance
Angular :: basic tuning performanceAngular :: basic tuning performance
Angular :: basic tuning performanceSomkiat Puisungnoen
 
RobotFramework Meetup at Thailand #2
RobotFramework Meetup at Thailand #2RobotFramework Meetup at Thailand #2
RobotFramework Meetup at Thailand #2Somkiat Puisungnoen
 
Part 2 :: Spring Boot testing
Part 2 :: Spring Boot testingPart 2 :: Spring Boot testing
Part 2 :: Spring Boot testingSomkiat Puisungnoen
 
Next of Java 2022
Next of Java 2022Next of Java 2022
Next of Java 2022Somkiat Puisungnoen
 
Wordpress for Newbie
Wordpress for NewbieWordpress for Newbie
Wordpress for NewbieSomkiat Puisungnoen
 

Recommended

Lesson learned from React native and Flutter
Lesson learned from React native and FlutterLesson learned from React native and Flutter
Lesson learned from React native and FlutterSomkiat Puisungnoen
 
Distributed Tracing
Distributed Tracing Distributed Tracing
Distributed Tracing Somkiat Puisungnoen
 
Shared code between projects
Shared code between projectsShared code between projects
Shared code between projectsSomkiat Puisungnoen
 
Angular :: basic tuning performance
Angular :: basic tuning performanceAngular :: basic tuning performance
Angular :: basic tuning performanceSomkiat Puisungnoen
 
RobotFramework Meetup at Thailand #2
RobotFramework Meetup at Thailand #2RobotFramework Meetup at Thailand #2
RobotFramework Meetup at Thailand #2Somkiat Puisungnoen
 
Part 2 :: Spring Boot testing
Part 2 :: Spring Boot testingPart 2 :: Spring Boot testing
Part 2 :: Spring Boot testingSomkiat Puisungnoen
 
Next of Java 2022
Next of Java 2022Next of Java 2022
Next of Java 2022Somkiat Puisungnoen
 
Wordpress for Newbie
Wordpress for NewbieWordpress for Newbie
Wordpress for NewbieSomkiat Puisungnoen
 
Sck Agile in Real World
Sck Agile in Real WorldSck Agile in Real World
Sck Agile in Real WorldSomkiat Puisungnoen
 
Sck spring-reactive
Sck spring-reactiveSck spring-reactive
Sck spring-reactiveSomkiat Puisungnoen
 
vTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring BootvTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring BootSomkiat Puisungnoen
 
Microservices and APIs
Microservices and APIsMicroservices and APIs
Microservices and APIsPuneet Sachdev
 
Spring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan BaxterSpring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan BaxterVMware Tanzu
 
Microservices: The Netflix Way
Microservices: The Netflix WayMicroservices: The Netflix Way
Microservices: The Netflix WayPuneet Sachdev
 
Container-Based Microservice Architecture
Container-Based Microservice ArchitectureContainer-Based Microservice Architecture
Container-Based Microservice ArchitectureAditya Hilman
 
Your Flight is Boarding Now!
Your Flight is Boarding Now!Your Flight is Boarding Now!
Your Flight is Boarding Now!MeetupDataScienceRoma
 
Intro to service mesh & Istio
Intro to service mesh & IstioIntro to service mesh & Istio
Intro to service mesh & IstioRinor Maloku
 
Bringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIsBringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIsApigee | Google Cloud
 
Is Microservices SOA Done Right?
Is Microservices SOA Done Right?Is Microservices SOA Done Right?
Is Microservices SOA Done Right?Apigee | Google Cloud
 
Devoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New HopeDevoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New HopeMick McGuinness
 
Cloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are KeyCloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are KeyApigee | Google Cloud
 
18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion Rate18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion RateJanbaskjdd
 
Getting the most from your API management platform: A case study
Getting the most from your API management platform: A case studyGetting the most from your API management platform: A case study
Getting the most from your API management platform: A case studyRogue Wave Software
 
Improving mobile performance
Improving mobile performanceImproving mobile performance
Improving mobile performanceBhagirath Gaonkar
 
App-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyApp-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyAkamai Developers & Admins
 
Akamai as Code
Akamai as CodeAkamai as Code
Akamai as CodeAkamai Developers & Admins
 
Edge 2016 measuring what matters
Edge 2016 measuring what mattersEdge 2016 measuring what matters
Edge 2016 measuring what mattersakamaidevrel
 
Measuring what matters
Measuring what mattersMeasuring what matters
Measuring what mattersCliff Crocker
 
Serverless and DevOps
Serverless and DevOpsServerless and DevOps
Serverless and DevOpsChris Munns
 
Empowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management ExperienceEmpowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management ExperienceJeffrey Rondeau
 

More Related Content

What's hot

vTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring BootvTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring BootSomkiat Puisungnoen
 
Microservices and APIs
Microservices and APIsMicroservices and APIs
Microservices and APIsPuneet Sachdev
 
Spring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan BaxterSpring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan BaxterVMware Tanzu
 
Microservices: The Netflix Way
Microservices: The Netflix WayMicroservices: The Netflix Way
Microservices: The Netflix WayPuneet Sachdev
 
Container-Based Microservice Architecture
Container-Based Microservice ArchitectureContainer-Based Microservice Architecture
Container-Based Microservice ArchitectureAditya Hilman
 
Intro to service mesh & Istio
Intro to service mesh & IstioIntro to service mesh & Istio
Intro to service mesh & IstioRinor Maloku
 
Bringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIsBringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIsApigee | Google Cloud
 
Devoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New HopeDevoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New HopeMick McGuinness
 
Cloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are KeyCloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are KeyApigee | Google Cloud
 

What's hot (13)

Sck Agile in Real World
Sck Agile in Real WorldSck Agile in Real World
Sck Agile in Real World
 
Sck spring-reactive
Sck spring-reactiveSck spring-reactive
Sck spring-reactive
 
vTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring BootvTalk#1 Microservices with Spring Boot
vTalk#1 Microservices with Spring Boot
 
Microservices and APIs
Microservices and APIsMicroservices and APIs
Microservices and APIs
 
Spring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan BaxterSpring Cloud Kubernetes - Ryan Baxter
Spring Cloud Kubernetes - Ryan Baxter
 
Microservices: The Netflix Way
Microservices: The Netflix WayMicroservices: The Netflix Way
Microservices: The Netflix Way
 
Container-Based Microservice Architecture
Container-Based Microservice ArchitectureContainer-Based Microservice Architecture
Container-Based Microservice Architecture
 
Your Flight is Boarding Now!
Your Flight is Boarding Now!Your Flight is Boarding Now!
Your Flight is Boarding Now!
 
Intro to service mesh & Istio
Intro to service mesh & IstioIntro to service mesh & Istio
Intro to service mesh & Istio
 
Bringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIsBringing Partners, Teams & Systems Together through APIs
Bringing Partners, Teams & Systems Together through APIs
 
Is Microservices SOA Done Right?
Is Microservices SOA Done Right?Is Microservices SOA Done Right?
Is Microservices SOA Done Right?
 
Devoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New HopeDevoxx - Bug Wars: Episode IV - A New Hope
Devoxx - Bug Wars: Episode IV - A New Hope
 
Cloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are KeyCloud Deployments Done Right: Why APIs are Key
Cloud Deployments Done Right: Why APIs are Key
 

Similar to Visual Testing Guide for UI and UX Design

18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion Rate18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion RateJanbaskjdd
 
Getting the most from your API management platform: A case study
Getting the most from your API management platform: A case studyGetting the most from your API management platform: A case study
Getting the most from your API management platform: A case studyRogue Wave Software
 
Improving mobile performance
Improving mobile performanceImproving mobile performance
Improving mobile performanceBhagirath Gaonkar
 
App-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyApp-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyAkamai Developers & Admins
 
Edge 2016 measuring what matters
Edge 2016 measuring what mattersEdge 2016 measuring what matters
Edge 2016 measuring what mattersakamaidevrel
 
Measuring what matters
Measuring what mattersMeasuring what matters
Measuring what mattersCliff Crocker
 
Serverless and DevOps
Serverless and DevOpsServerless and DevOps
Serverless and DevOpsChris Munns
 
Empowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management ExperienceEmpowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management ExperienceJeffrey Rondeau
 
API-first design - Basis for an consistent API-Management approach
API-first design - Basis for an consistent API-Management approachAPI-first design - Basis for an consistent API-Management approach
API-first design - Basis for an consistent API-Management approachSven Bernhardt
 
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max PronkoMagento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max PronkoMax Pronko
 
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing CloudIMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing CloudAdobeMarketingCloud
 
Sitecore Symposium 2018 - Getting Value Out of Your Data
Sitecore Symposium 2018 - Getting Value Out of Your DataSitecore Symposium 2018 - Getting Value Out of Your Data
Sitecore Symposium 2018 - Getting Value Out of Your DataMichael Shaw
 
Finding Value in Your Data: Sitecore Analytics
Finding Value in Your Data: Sitecore AnalyticsFinding Value in Your Data: Sitecore Analytics
Finding Value in Your Data: Sitecore AnalyticsJacqueline Baxter
 
Business Success with Core Web Vitals
Business Success with Core Web VitalsBusiness Success with Core Web Vitals
Business Success with Core Web VitalsIzzi Smith
 
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017Amazon Web Services
 
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...Amazon Web Services
 
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018Amazon Web Services
 
Jennifer Scandariato: Transform Your Team from QA to Test Engineering
Jennifer Scandariato: Transform Your Team from QA to Test EngineeringJennifer Scandariato: Transform Your Team from QA to Test Engineering
Jennifer Scandariato: Transform Your Team from QA to Test EngineeringAnna Royzman
 
Transformation from QA to Test Engineering
Transformation from QA to Test EngineeringTransformation from QA to Test Engineering
Transformation from QA to Test EngineeringJennifer L. Scandariato
 

Similar to Visual Testing Guide for UI and UX Design (20)

18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion Rate18 Ways to Reduce Bounce Rate & Increase Conversion Rate
18 Ways to Reduce Bounce Rate & Increase Conversion Rate
 
Getting the most from your API management platform: A case study
Getting the most from your API management platform: A case studyGetting the most from your API management platform: A case study
Getting the most from your API management platform: A case study
 
Improving mobile performance
Improving mobile performanceImproving mobile performance
Improving mobile performance
 
App-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyApp-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai Easy
 
Akamai as Code
Akamai as CodeAkamai as Code
Akamai as Code
 
Edge 2016 measuring what matters
Edge 2016 measuring what mattersEdge 2016 measuring what matters
Edge 2016 measuring what matters
 
Measuring what matters
Measuring what mattersMeasuring what matters
Measuring what matters
 
Serverless and DevOps
Serverless and DevOpsServerless and DevOps
Serverless and DevOps
 
Empowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management ExperienceEmpowering Your Users: Maximizing the Content Management Experience
Empowering Your Users: Maximizing the Content Management Experience
 
API-first design - Basis for an consistent API-Management approach
API-first design - Basis for an consistent API-Management approachAPI-first design - Basis for an consistent API-Management approach
API-first design - Basis for an consistent API-Management approach
 
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max PronkoMagento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
 
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing CloudIMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
 
Sitecore Symposium 2018 - Getting Value Out of Your Data
Sitecore Symposium 2018 - Getting Value Out of Your DataSitecore Symposium 2018 - Getting Value Out of Your Data
Sitecore Symposium 2018 - Getting Value Out of Your Data
 
Finding Value in Your Data: Sitecore Analytics
Finding Value in Your Data: Sitecore AnalyticsFinding Value in Your Data: Sitecore Analytics
Finding Value in Your Data: Sitecore Analytics
 
Business Success with Core Web Vitals
Business Success with Core Web VitalsBusiness Success with Core Web Vitals
Business Success with Core Web Vitals
 
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017
Testing and Troubleshooting with AWS Device Farm - MBL301 - re:Invent 2017
 
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...
NEW LAUNCH! Introducing Amazon Sumerian – Build VR/AR and 3D Applications - M...
 
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018
Getting Started with AWS Developers: AWS Developer Workshop - Web Summit 2018
 
Jennifer Scandariato: Transform Your Team from QA to Test Engineering
Jennifer Scandariato: Transform Your Team from QA to Test EngineeringJennifer Scandariato: Transform Your Team from QA to Test Engineering
Jennifer Scandariato: Transform Your Team from QA to Test Engineering
 
Transformation from QA to Test Engineering
Transformation from QA to Test EngineeringTransformation from QA to Test Engineering
Transformation from QA to Test Engineering
 

More from Somkiat Puisungnoen

Software Development Trends 2017 at IMC
Software Development Trends 2017 at IMCSoftware Development Trends 2017 at IMC
Software Development Trends 2017 at IMCSomkiat Puisungnoen
 
Meetup :: Update Elastic Stack 5.0
Meetup :: Update Elastic Stack 5.0Meetup :: Update Elastic Stack 5.0
Meetup :: Update Elastic Stack 5.0Somkiat Puisungnoen
 

More from Somkiat Puisungnoen (19)

devops
devops devops
devops
 
Manage data of service
Manage data of serviceManage data of service
Manage data of service
 
Cloud Native App
Cloud Native AppCloud Native App
Cloud Native App
 
Clean you code
Clean you codeClean you code
Clean you code
 
SCK Firestore at CNX
SCK Firestore at CNXSCK Firestore at CNX
SCK Firestore at CNX
 
Unhappiness Developer
Unhappiness DeveloperUnhappiness Developer
Unhappiness Developer
 
The Beauty of BAD code
The Beauty of BAD codeThe Beauty of BAD code
The Beauty of BAD code
 
React in the right way
React in the right wayReact in the right way
React in the right way
 
Rise of Container (RoC)
Rise of Container (RoC)Rise of Container (RoC)
Rise of Container (RoC)
 
SCK :: Scrum is NOT Enough
SCK :: Scrum is NOT EnoughSCK :: Scrum is NOT Enough
SCK :: Scrum is NOT Enough
 
Software Development Trends 2017 at IMC
Software Development Trends 2017 at IMCSoftware Development Trends 2017 at IMC
Software Development Trends 2017 at IMC
 
Design pattern with Java 8
Design pattern with Java 8Design pattern with Java 8
Design pattern with Java 8
 
Meetup :: Update Elastic Stack 5.0
Meetup :: Update Elastic Stack 5.0Meetup :: Update Elastic Stack 5.0
Meetup :: Update Elastic Stack 5.0
 
Git as NoSQL
Git as NoSQLGit as NoSQL
Git as NoSQL
 
DevOps 101
DevOps 101DevOps 101
DevOps 101
 
Sck Mobile Application Security
Sck Mobile Application SecuritySck Mobile Application Security
Sck Mobile Application Security
 
Automation test for Android
Automation test for AndroidAutomation test for Android
Automation test for Android
 
Secure Test-Driven Development
Secure Test-Driven DevelopmentSecure Test-Driven Development
Secure Test-Driven Development
 
Working with branch
Working with branchWorking with branch
Working with branch
 

Recently uploaded

costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 

Recently uploaded (20)

DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 

Visual Testing Guide for UI and UX Design

  • 1. © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. Visual Testing
  • 2. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !2
  • 3. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !3
  • 4. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !4
  • 5. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !5 Visual Testing ?
  • 6. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !6 UI Testing
  • 7. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !7
  • 8. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !8 1. It’s too slow Rules of UI Testing 2. It’s too brittle 3. Automation is not too helpful
  • 9. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !9 Tools
  • 10. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !10 UX and UI
  • 11. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !11 Visual Design
  • 12. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !12 Developer ?
  • 13. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !13 Specification
  • 14. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !14 Specification by Example
  • 15. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !15 Better way to improve your requirement
  • 16. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !16
  • 17. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !17
  • 18. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !18 https://github.com/AppraiseQA/appraise
  • 19. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !19 Appraise Use Google Chrome Headless Develop by puppeteer (Node API)
  • 20. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !20 Installation $npm install -g appraise
  • 21. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !21 Run $appraise run $appraise run --page “page name”
  • 22. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !22 Run $appraise run --page “page name” --initial-width 1280 --initial-height 200
  • 23. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !23 Approve $appraise approve $appraise approve --page "my_web"
  • 24. Visual Testing © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !24 Thank you