I’m pleased to announce that Applitools has released Root Cause Analysis, or RCA for short. This new offering allows you to instantly pinpoint the root cause of visual bugs in your front-end code. I’d like to explain why RCA matters to you, and how it’ll help you in your work.
https://dilbert.com/strip/2015-04-24
Well, maybe RCA doesn’t find THE root cause. After all, all software bugs are created by people, as the Dilbert cartoon above points out.
But when you’re fixing visual bugs in your web apps, you need a bit more information than what Dilbert is presenting above.
The myriad challenges of front-end debugging
What we’ve seen in our experience is that, when you find a bug in your front-end UI, you need to answer the question: what has changed?
More specifically: what are the differences in your application’s Document Object Model (or DOM for short) and Cascading Style Sheet (CSS) rules that underpin the visual differences in my app?
This isn’t always easy to determine.
Getting the DOM and CSS rules for the current version of your app is trivial. They’re right there in the app you’re testing.
But getting the baseline DOM and CSS rules can be hard. You need access to your source code management system. Then you need to fire up the baseline version of your app. This might involve running some build process, which might take a while.
Once your app builds, you then need to get it into exactly the right state, which might be challenging.
Only then can you grab your baseline DOM and CSS rules, so you can run your diffs.
But doing a simple diff of DOM and CSS rules will turn up many differences, many of them have nothing to do with your visual bug. So you’ll chase dead-end leads.
That’s a tedious, time-consuming process.
Meanwhile, if you release multiple times per week or per day, you have less time and more pressure to fix the bug before the next release.
This is pretty darn stressful.
And this is where Applitools RCA comes to the rescue!
AI-assisted bug diagnosis
With Applitools RCA, we’ve updated our SDKs to grab not just UI screenshots — as we always have — but also DOM and CSS rules. We send this entire payload to our test cloud, where we now perform an additional step.
First, our AI finds significant visual differences between screenshots, as it always has, while ignoring minor differences that your users won’t care about (also called false positives).
Then — and this is the new step with RCA — we find what DOM and CSS rules underpin those visual differences. Rather than digging through line after line of DOM and CSS rules, you’ll now only be shown the lines responsible for the difference in question.
We display those visual differences to you in Applitools Eyes Test Manager. You click on a visual difference highlighted in pink and instantly see what DOM and CSS rules are related to that change.
This diagram explains this entire process:
Even better, we give you a link to the exact view you’re looking at — sort of like a blog post’s permalink, which you can add to your Jira bug report, Slack, or email. That way your teammates can instantly see what you’re looking at. Everyone gets on the same page, and bugs get fixed faster.
Here’s a summary of life before and after RCA:
| Without Applitools Root Cause Analysis | With Applitools RCA |
|---|---|
| QA finds a bug | QA finds a bug |
| QA files bug report with ONLY current DOM and CSS rules | QA files bug report showing exactly the DOM and CSS rule diffs that matter |
| Dev builds baseline version of app | Dev updates the code and fixes the bug |
| Dev navigates app to replicate state | |
| Dev gets baseline DOM and CSS rules | |
| Dev compares baseline and current DOM and CSS rules | |
| Dev digs through large set of diffs to find the ones that matter | |
| Dev updates the code and fixes the bug |
How much would RCA speed up your debugging process?
Making Shift Left Suck Less
If you’re in an organization is that is implementing Shift Left, you know that it’s all about giving developers the responsibility of testing their own code. Test earlier, and test more often, on a codebase you’re familiar with and can quickly fix.
And yes, there’s something to be said for that. But let’s face it: if you’re a developer doing Shift Left, what this means is you have a bunch of QA-related tasks added to your already overflowing plate. You need to build tests, run tests, maintain tests.
We can’t make the pain of testing go away. But with Applitools RCA, we can save you a lot of time and help you focus on writing code!
We intentionally designed RCA to look like the developer tools you use every day. Our DOM diffs look like your Google Chrome Dev Tools, and our CSS diffs look like your GitHub diffs.
All this means you have more time to build features, which is probably the part of your job you like to focus on.
ROI, Multiplied for R&D
This section is for the engineering managers, directors, and VPs.
Applitools RCA lets your team spend more time on building new features. It helps your R&D team be more productive, efficient, and happy!
It’s application features that move modern businesses forward. And RCA helps your team get bug fixing out of the way so they can focus on adding value to your company, and get kudos for adding more features to delight your customers.
So, RCA is good for your developers, for your business, but also for your CFO! Here’s a quick back-of-the-envelope you can share:
Let’s say you have 100 developers on your engineering team. How much money would you save if RCA can accelerate your development by 10%? The quick calculation shows: maybe $2m per year? Maybe more? That’s tons of money!
UI Version Control, Evolved
Applitools RCA helps your product managers too!
With RCA, our user interface version control now includes the DOM and CSS associated with each screenshot.
This means that not only can you see how the visual appearance of your web application has evolved over time, but also how its underlying DOM and CSS have changed. This makes it easier for you to roll back new features that turned out to be a bad idea since they hurt the user experience or decreased the revenue.
You Win Big
Applitools Root Cause Analysis is a major step in the evolution of test automation because, for the first time, a testing product isn’t just finding bugs; it’s telling you how to fix the bugs.
The evolution of software monitoring tools demonstrates a similar pattern. Early monitoring tools would find an outage, but wouldn’t point you in any direction of fixing the underlying problem behind the outage.
Modern monitoring tools like New Relic or AppDynamics, on the other hand, would point you to the piece of code causing the outage: the root cause. The market spoke, and it chose monitoring tools that pointed users to the root cause.
In test automation, we’re where monitoring was ten years ago. Existing tools like Selenium, StormRunner, Cypress, and SmartBear are good and finding problems, but they don’t help you discover and fix the root cause.
Applitools RCA, like New Relic and AppDynamics, helps you instantly find the root cause of a bug. But unlike those tools, Applitools RCA doesn’t force you to rip-and-replace your existing test automation tools. It integrates with Selenium, Cypress, WebdriverIO, and Storybook, allowing you to make your existing testing much more powerful by adding root cause analysis.
See for yourself
To see Applitools RCA in action, please watch this short demo video:
Start Using Applitools Root Cause Analysis Today!
If you’re not yet using Applitools Eyes, sign up for a free account.
If you’re an existing Applitools customer, a Free Trial of Applitools Root Cause Analysis is already provisioned in your account. To learn more about how to use it, see this documentation page.
A free trial of Applitools RCA is available until the end of February 2019. After that, it will be available for an additional fee.
