Let’s Get Visual - Visual Testing in Your Vue.JS Project

Rate this content
Bookmark

Visual testing compares the appearance of your application with a previous state. If changes become visible, you can allow them or not. So you or your testers have their eyes everywhere - without needing to check manually repeatedly. I've been using visual testing for a while, saving my neck a few times. Let's look at my journey together and explore if and how visual testing can also help your projects.

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

The speaker is Ramona Schwering, a software engineer at Chopware and a Google developer expert in web technologies as well as a Cypress ambassador.

The main topic of the session is visual testing in Vue.js applications and how it can help identify and fix UI errors.

Visual testing is important because it helps catch UI errors and bugs that might not be detected by other types of testing, such as unit, integration, or end-to-end testing.

Inattentional blindness is a psychological phenomenon where a person fails to notice an unexpected stimulus because their attention is focused elsewhere. This can lead to UI errors being overlooked.

Best practices for visual testing include giving your tests 'eyes' to catch visual differences, ensuring consistent snapshots, and using tools like the Visual Regression Tracker to manage results.

The Visual Regression Tracker is an open-source tool for managing the results of visual tests, displaying screenshot comparisons, and allowing users to approve or reject changes.

Some tools for visual testing mentioned include Apple tools, Percy, Chromatic from Storybook, and the Visual Regression Tracker.

You can avoid false positives in visual testing by freezing time on the client-side, waiting for consistent snapshots, and ignoring areas or elements that cause natural changes.

Visual testing can be implemented in Cypress by using the Visual Regression Tracker plugin and incorporating commands like 'cy.track' to capture screenshots for comparison.

Traditional testing methods might not catch all UI errors because they only test what they are explicitly programmed to test and may miss visual discrepancies that occur outside the defined scope.

Ramona Schwering
Ramona Schwering
22 min
15 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk discusses the importance of fixing small UI errors and typos, as they can leave a negative impression and raise questions about trust in applications. Traditional testing methods may not catch all UI errors, so visual testing is introduced as a solution. The Visual Regression Tracker is recommended as a tool for managing visual test results. Best practices for visual testing include ensuring the application is fully loaded, addressing flakiness, and handling false negatives. The key lessons include giving tests eyes, looking beyond the given path, using visual testing, and covering the original with suitable tests if consistent results can't be obtained.

1. Introduction to Visual Testing

Short description:

Hello and welcome to my session at Vue.js Live. I'm Ramona Schwering, a software engineer at Chopware. I'll showcase the importance of fixing small UI errors and typos. These errors can leave a negative impression and raise questions about trust in applications. The phenomenon of inattentional blindness contributes to such errors.

Hello and welcome to my session here at Vue.js Live. I'm so glad to have you here and that you seem to be interested in learning more about visual testing via application, because to be honest with you guys, it saved my neck a couple of times, and I hope I can basically give you the same experience, especially as testing can be sometimes a little daunting.

But well, before that, my name is Ramona Schwering. I'm working as a software engineer at Chopware, which is a company providing an open source ecommerce platform. And there's much VU involved, so I'm working with VU for three days now, I think. And apart from that, I became a Google developer expert in web technologies and a Cypress ambassador. And yeah, I guess you might not be surprised to hear that I'm especially known for testing, and I hope I can make testing accessible for anyone, and especially pain-free, or a little more pain-free, maybe, for everyone.

And without further ado, there's one point in testing which I'd like to showcase to you. And I don't know if you are similar to me, but sometimes when I'm dealing with my cell phone, with applications, no matter if it's VU or not, there are some bugs which I encounter often, but I'm not sure if it's me being a perfectionist or if you feel it like that. But there are bugs which are not release blockers. They are small user interface errors or typos. Just plain looking ugly, right? So I think they are basically everywhere. And they leave a certain impression if you don't fix them.

See this one, which I took some time ago from my cell phone, where this string in the middle of it, keine Mitteilungen, or in English no notification. It's clearly broken, right? And you can find it basically everywhere. It's also the case for larger companies like Google, where you have a button on the wrong location, right? Or take a look at this Facebook app, where the button has a completely wrong padding. There are so many examples I could showcase to you, but we have a certain time frame. I sometimes to be honest feel a bit triggered by it, and it's not only my own perfectionism, I think. Because I wonder one thing. Would you trust those apps, if you have an app or a website with lots of UI errors, which just look broken or signal no sign of care? Would you trust such applications, your credit card data for example? Well, I'm not quite sure when it comes to my opinion. But I don't want to be too strict here too, because we're all humans, right? Behind all applications, behind all websites, there's a developer. And we humans do sometimes a bit strange stuff. And there's one phenomenon, which is, at least in my opinion, one of the things why such errors occur. It's a phenomenon which is called inattentional blindness. It's well-known in psychology, and it's depicted not only in psychology or in psychology classes, but also in traffic ads like the famous whodunit from the U.K. You can take a look at this video later on. I posted it here as a QR code. All of those videos, all of those campaigns double down on the fact that a person fails to notice an unexpected stimulus in the vignette, solely because of the lack of attention and not because of any visual defects or blindness or deficits. Imagine a designer who builds a wonderful banner but doesn't notice there is a huge typo in the headline. Stuff like that.

2. The Limitations of Traditional Testing

Short description:

We have various types of testing like unit testing, integration testing, and end-to-end testing. However, these tests may not catch all UI errors and typos. End-to-end testing, for example, may miss issues that are outside of its scope. There is a need to give our tests eyes and introduce visual testing.

I guess everyone had such a situation, right? But don't we have testing for such a situation? We have good test automation, right? We have unit testing, integration testing, end-to-end testing. Don't we? Shouldn't they catch that? And they do. But there is a catch, at least in my opinion. So I would say they don't always catch it, because all of those testing types will only test what they are supposed to test. I like to phrase it as end-to-end testing doesn't look left or right. So things could remain undetected if they are outside of the concept, outside of the things you didn't explicitly written down, right?

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

Workshops on related topic

Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.