Automating Screenshot Testing Component Library

•

0 likes•937 views

See how Vodafone introduced Applitools into their workflow to automate component testing and the challenges faced when doing so.

Automating screenshot
testing in a component
library
David Lindley & Ben Hudson

C1 Public
3
• Software Engineering Manager at Vodafone
• Been in web development for 9 years
• Wear many hats 🎩 🧢 👒
– Technical Product Owner for Source Web
• Enjoy walking, video games and playing guitar
David Lindley | Who am I?
• Senior Software Engineer
• Been in web development for 13 years
• Been developing in the Source Web team since its
inception
• If I’m not working, I’m on the golf course or spending
time with my family
Ben Hudson | Who am I?

C1 Public
4
What are we talking about today?
What is Source Web?
Auto generations of tests
Vodafone Engineering
Enter Applitools

C2 General
Bringing together 12 teams into ONE to:
Leverage the Scale of a European Technology Team to
drive Business Agility.
Achieve maximum possible re-use while accelerating
market maturity and outcomes
Distributing Digital Engineering capabilities across
markets, while maintaining a strong Global Connection.
We’re part of
something
much bigger

C1 Public
6
Source Web | What is it?
500 unique developers
within Vodafone consume the library
>70000 unique
downloads of the library
6 markets/sub-brands using it for
customer facing applications
220 components
split into atomic design principals

C1 Public
7
Testing
Components
Doc Site
Package Management
Tooling CICD
Source Web | Tech stack

C1 Public
8
Source Web | Welcome Applitools
On boarding Applitools allowed us to do visual regression testing
8
>220
components
3
themes
10
variations
6600 screenshots
Not including breakpoint changes
=
x
x
Per component on average
No integration for Styleguidist

C1 Public
9
Source Web | Styleguidist Vs StoryBook
React Styleguidist
Allows complete customization of the look and feel
Can be used as a shop window for the components
Our users are: Software Engineers, Product Owners, Business Owners, UXers, Testers
Storybook
Simple setup
Lots of integration

C1 Public
10
Source Web | Problem with visual regression testing
How to create visual tests of all components without burning through developer effort?
10
10
>220
components
3
themes
10
variations
6600 screenshots
Not including breakpoint changes
=
x
x
Per component on average

C1 Public
27 September 2022
11
MyComponent1.tsx
MyComponent1.md
MyComponent2.tsx
MyComponent2.md
MyComponent3.tsx
MyComponent1.md
MyComponent1
Examples
MyComponent2
Examples
MyComponent3
Examples

C1 Public
27 September 2022
12
MyComponent1.tsx
MyComponent1.md
MyComponent1 cypress test
Applitools visual test
Using the MD files as our starting
point we could parse them to auto
generate cypress tests

C1 Public
27 September 2022
14
Now we have our starting point – our
MD file. We need to think more about
getting the logic in to auto generate
the cypress tests.
Find all MD files
Read MD file
Find corresponding component
Split MD file by example
Inject into template
For
each
MD
file
Write to file
Auto generated Cypress tests

C1 Public
16
Source Web | Wrapping up
How to create visual tests of all
components without burning through
developer effort?
Use a level of automation to solve problems!

C1 Public
17
Source Web | Future improvements
Automated
screenshot tests
Automated
accessibility tests
Automated
performance tests
visualtests.ejs accessibility.ejs performance.ejs

C1 Public
David Lindley
Software Engineering
Manager, Vodafone UK
Questions?
Ben Hudson
Senior Software Engineer,
Vodafone UK

C1 Public
Get in Touch
Request a Demo
David Lindley
Software Engineering
Manager, Vodafone UK
Ben Hudson
Senior Software Engineer,
Vodafone UK

Abstract In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer. Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example. You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.

IBM Impact session 1654-how to move an existing cics application to a smartphone

nick_garrod

This document discusses moving an existing CICS application to a smartphone. It outlines a 5 step process: 1) Using Rational Team Concert and Rational Developer for System z to verify requirements and load code. 2) Using RDz to create, deploy, and install web services to CICS. 3) Using RDz to test and debug the web services and COBOL program. 4) Creating a Worklight client to run on iPhone. 5) Migrating from VSAM to DB2 storage.

Applying DevOps, PaaS and cloud for better citizen service outcomes - IBM Fe...

Sanjeev Sharma

1) Applying DevOps practices like continuous integration/delivery can help government agencies deploy IT projects faster and get citizen services into production quicker. 2) Using a Platform as a Service (PaaS) like IBM Bluemix allows agencies to build and manage applications faster while reducing costs and skills requirements. 3) Adopting a DevOps culture and tools that automate testing, deployment, and monitoring can help agencies accelerate delivery of citizen services with better outcomes and less resources.

Bluemix summary

Sam Garforth

This document introduces IBM Bluemix, IBM's cloud platform. It provides an integrated development and operations environment for building, deploying, and managing applications with services for DevOps, big data, mobile, security, Internet of Things, and other areas. Bluemix offers various runtimes and frameworks. It allows composing applications from IBM, third-party, and open source services and APIs. Bluemix is designed to enable rapid application development and deployment with automated processes. It also provides integration capabilities and connects securely to on-premises systems.

What's New in IBM Cognos BI Version 10.2.1.1, Plus New Product Previews

Senturus

Demo of new functionalities, including end-to-end visualization workflow, Cognos Workspace on Mobile, Active Report with Visualizations, Report Booklets, Theme Designer, and embeddable workspaces. View the webinar video recording and download this deck: http://www.senturus.com/resources/whats-new-cognos-version-10-2-1-1/. We discuss performance enhancements and extended support for Big Data, along with a preview of several products first announced at the 2013 IBM Information on Demand (IOD) Conference. This includes IBM Concert, which gives users a simplified way to collaborate and work on content, anywhere, anytime. Senturus, a business analytics consulting firm, has a resource library with hundreds of free recorded webinars, trainings, demos and unbiased product reviews. Take a look and share them with your colleagues and friends: http://www.senturus.com/resources/.

ConnectED2015: IBM Domino Applications in Bluemix

Martin Donnelly

IBM ConnectED 2015 Abstract: This session will show how Bluemix enables you to deploy Domino applications to the cloud in a matter of minutes. We will demonstrate how to leverage Bluemix buildpacks like XPages and Node.js both to modernize Domino applications and to give them a new home on a highly scalable and resilient PaaS. You will learn how to mix and match Bluemix runtimes and services to create Domino cloud apps rapidly, stage them privately and put them into production. You'll see how to use cutting edge tooling to monitor and manage your apps. This is the future.

Next Generation Of Enterprise RIA's

Matthias Zeller

IBM Connect 2014 KEY102

Scott Souder

IBM Messaging and Collaboration: Innovations and Priorities for Today and Tomorrow outlines IBM's focus on messaging and collaboration solutions. Key priorities include enhancing the user experience of IBM Notes through a cleaner, more modern social theme adopted across IBM products for consistency. Performance improvements and new features like embedded experiences are also discussed. The document provides an overview of IBM's messaging and collaboration portfolio and development priorities.

This document summarizes Codice Software, a company that provides version control software. It introduces Plastic SCM, their flagship product, which enables parallel development through branching and merging capabilities. Plastic SCM aims to increase productivity and quality by allowing developers to work independently and merge changes efficiently. The document highlights customer case studies where Plastic SCM helped reduce costs and time to market. It also outlines Codice's values of proven technology, customer focus, and striving for excellence.

Process Improvement in Distributed Software Development Using Eclipse with Me...

Intland Software GmbH

The document discusses using distributed version control systems (DVCS) like Git and Mercurial with Eclipse. It summarizes Intland Software's codeBeamer product, which is an application lifecycle management solution that integrates with DVCS. The document outlines how codeBeamer is used by customers for tasks like requirements management, issue tracking, and distributed development. It then compares the workflows for centralized and distributed version control before providing an example workflow for mobile app development. The document concludes by explaining why Intland chose to support DVCS.

Applying lean, dev ops, and cloud for better business outcomes

Kartik Kanakasabesan

1) Adopting DevOps, Lean, and cloud approaches can help government agencies deliver better citizen services with fewer resources by accelerating delivery of new features and getting faster feedback. 2) A DevOps approach involves applying Lean principles to get new ideas into production fast, get people to use new features, and get feedback in order to continuously improve. This allows agencies to change faster, which is an asset rather than an anchor. 3) Adopting cloud technologies helps remove bottlenecks around environment availability and provisioning, allowing standardized, lower cost, and faster delivery of applications and services.

codeBeamer Eclipse DemoCamp-23.11.2010

Intland Software GmbH

The document discusses the benefits of using distributed version control systems (DVCS) like Git and Mercurial for software development. It highlights advantages like better support for distributed teams, easier branching and merging, and more robust workflows. The document also provides an example of how a company implemented DVCS with Mercurial and Eclipse plug-ins for improved process improvement in distributed software development across locations in Europe and Asia.

The Evolution of Industrial Visualization

Inductive Automation

In the two years since its release, the Ignition Perspective Module has quickly set the standard for modern visualization systems in the industrial space. As the developers of Ignition have expanded and matured the module’s features, innovative users and integrators around the globe have used it as a canvas for building large and sophisticated projects in HMI, SCADA, MES and more. In this webinar, see what is possible with the Ignition Perspective Module as we look inside real Perspective projects from a variety of industries. Discover how Perspective creates new opportunities by putting the plant floor in your pocket and real control at your fingertips.

Software Factories in the Real World: How an IBM WebSphere Integration Factor...

ghodgkinson

This document discusses how an automotive retailer set up an efficient software factory using IBM tools like Rational Software Architect and WebSphere Message Broker to integrate a new point of sale system with their SAP backend. The software factory employed techniques like model-driven development and continuous integration to help scale development and keep customers satisfied. Key practices that helped succeed included tighter architectural control using Rational Software Architect models and service definitions, and keeping the distributed team coordinated using Rational Team Concert for planning, source control, and tracking progress across locations. The integrated approach and tools helped the retailer successfully complete the large integration project.

How NBCUniversal Adopted DevOps

Sanjeev Sharma

NBCUniversal is implementing DevOps practices like continuous integration, delivery, and testing using tools from IBM like UrbanCode Deploy, IBM Dev-Test Environment as a Service (IDTES), and IBM Cloud Orchestrator. This allows them to continuously test code, deploy applications across hybrid clouds, and improve collaboration between development and operations teams. NBCUniversal's DevOps practices aim to address issues like slow release processes and lack of integration between development stages.

CV_AmalMandal

Amal Mandal - Looking for a Change

This document contains the resume of Amal Mandal summarizing his professional experience as a software engineer with 7 years of experience developing software using technologies like SQL Server, Visual Studio, and SSIS. He has strong skills in software development methodology including development, testing and releasing products on time and to expectations. His experience includes projects for clients like Microsoft, Infosys, Wipro, and Hewlett-Packard.

Resume_Arindom_Updated

Arindom Biswas

Arindom Kumar Biswas is a certified scrum master and IT professional with over 7 years of experience working in mainframe technology and the insurance domain. He currently works as a product specialist for Cognizant Technology Solutions in Denver, Colorado, managing a team of 18 people. Some of his key skills and experiences include being a project lead, expertise in mainframe technologies like COBOL and DB2, and experience with projects involving the conversion of life and annuity insurance products from one platform to another.

Worklight mobile v6

GameStop

IBM Worklight V6 provides tools for developing mobile applications including: - A development studio for creating apps using HTML5, JavaScript and CSS - Components for building hybrid apps that combine web and native capabilities - Features for deploying apps to mobile devices and managing them remotely - Security, push notification and data synchronization capabilities - Analytics for collecting usage data and monitoring apps

UrbanCode Deploy course and product overview slides

IBM Rational software

Eclipse summit-2010

Intland Software GmbH

CampDevOps keynote - DevOps: Using 'Lean' to eliminate Bottlenecks

Sanjeev Sharma

This document summarizes Sanjeev Sharma's presentation on adopting DevOps practices to eliminate bottlenecks using Lean principles. The presentation covers: 1) viewing DevOps through a "Lean" lens to reduce waste and improve flow, 2) addressing bottlenecks with techniques like shifting left testing, full stack deployment, and emphasizing culture and people; and 3) resources for DevOps assessments and further information. The overall message is that DevOps can help optimize software delivery through collaboration, automation, and continuous feedback.

Overview

Joanne Scouler

This document provides an overview of the IBM UrbanCode Deploy course. It introduces UrbanCode Deploy as a solution for automating deployments and managing application releases. Key topics covered include common deployment challenges, UrbanCode Deploy terminology, components, applications, and environments. The course materials and outline are also summarized. It provides information on the lab environment setup, including the UrbanCode Deploy server, agents, and targets. A basic workflow for using UrbanCode Deploy is also outlined.

IBM Application Delivery Foundation for z Systems

DevOps for Enterprise Systems

The document describes IBM's Application Delivery Foundation for z Systems V3.0. It provides a comprehensive solution for z/OS application development and problem analysis through tools like Developer for z Systems, Application Performance Analyzer, and Fault Analyzer that are designed to accelerate development cycles and simplify analysis of complex programs. The release is focused on helping customers embarking on DevOps transformations through features that improve integration between tools and extensibility of the platform.

Webinar VB6 apps to html5

Gizmox

Enterprise developers are under pressure to maintain critical business applications built on aging desktop client-server platforms (like VB6 or Powerbuilder) while preparing their organizations for enterprise mobility and BYOD. Potential solutions like application virtualization, technical migration, or re-writing from scratch all have challenges and limitations - namely complexity, high costs, long lead times, and project risk. Gizmox is working with IT organizations to tackle this problem using a unique technology called Transposition.

Make your TechComm online/offline available

Georg Eck

Crossing the low-code and pro-code chasm: a platform approach

Asanka Abeysinghe

Organizations are now using low-code and pro-code tools to build digital experiences internally and externally. However, not having the right alignment between these two approaches slows down delivery. Different developer personas that work in silos, no connection between low-code and pro-code applications, low-code creating unmanageable shadow IT applications, no single codebase or build pipeline, and interruptions to the professional developer flow are some significant drawbacks. In this session, Asanka will look at a platform approach to bridge the low-code and pro-code chasm.

INTERFACE, by apidays - Crossing the low-code and pro-code chasm: a platform...

apidays

Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton

Automating Screenshot Testing Component Library

Recommended

Recommended

More Related Content

Similar to Automating Screenshot Testing Component Library

Similar to Automating Screenshot Testing Component Library (20)

More from Applitools

More from Applitools (20)

Recently uploaded

Recently uploaded (20)

Automating Screenshot Testing Component Library