Gil Sever, Author at Automated Visual Testing | Applitools https://applitools.com/blog/author/gil_s/ Applitools delivers the next generation of test automation powered by AI assisted computer vision technology known as Visual AI. Fri, 13 Jan 2023 18:10:39 +0000 en-US hourly 1 Strategic Investment in the Future of Visual AI and the Next Generation of Test Automation https://applitools.com/blog/strategic-investment-in-future-of-visual-ai-next-generation-test-automation/ Wed, 31 Mar 2021 22:36:05 +0000 https://applitools.com/?p=28122 I’d like to share some very exciting news. This week we have announced Thoma Bravo’s strategic investment in Applitools. This investment will provide us more resources and expertise to fulfill...

The post Strategic Investment in the Future of Visual AI and the Next Generation of Test Automation appeared first on Automated Visual Testing | Applitools.

]]>

I’d like to share some very exciting news. This week we have announced Thoma Bravo’s strategic investment in Applitools. This investment will provide us more resources and expertise to fulfill our vision and build the most advanced AI-powered test automation platform, paving the road to autonomous testing. 

Driving More Innovation and Growth

Thoma Bravo is a premier private equity firm that invests in software and technology enabled companies, and we believe that their investment will significantly benefit Applitools and all our customers. With this new investment, we will grow our team, continue to deliver excellent customer support, drive more product innovation, build new products to expand our offering, and expand the ecosystem around Applitools.

We will continue to expand our offering to provide more comprehensive solutions to focus on what we always have, which is the success of our customers!

Thank You

Our customers, partners and the entire Applitools community are a critical part of our success and our relationship with all of you will continue to be our top priority. We’re thrilled that this investment will enable us to become an even stronger partner for you, and we look forward to continuing to provide you with the innovation and best of breed solutions that you have come to expect from us.

Thoma Bravo’s culture is built on collaboration with existing management teams to build extraordinary companies. By combining the innovation and vision of the Applitools team with the resources and expertise of Thoma Bravo, we will accelerate the development of our AI powered automation platform to help our customers release better software, faster than ever before.

Thanks again for being our partners. We are committed to your success! If you have any questions, please reach out to our team anytime.

Yours truely,

Gil Sever

The post Strategic Investment in the Future of Visual AI and the Next Generation of Test Automation appeared first on Automated Visual Testing | Applitools.

]]>
The Future of Testing and the Big Bang of Software https://applitools.com/blog/big-bang-testing-sever/ Wed, 28 Oct 2020 04:53:54 +0000 https://applitools.com/?p=24137 In an era of digital transformation, software is no longer just a tool; it is at the heart of every business. Why is it at the heart of a business?...

The post The Future of Testing and the Big Bang of Software appeared first on Automated Visual Testing | Applitools.

]]>

In an era of digital transformation, software is no longer just a tool; it is at the heart of every business. Why is it at the heart of a business? Because we are constantly interacting with our users and customers through a booming number of software applications: web, mobile, and native.

Applitools recently sponsored an independent survey with 400 engineering and quality assurance leaders from a variety of Fortune 500 companies. Among other things, they were asked how many different applications they used in their organization and how many pages each application included. Let’s look at the findings of the survey.

How Many Applications Do Organizations Use?

According to the survey, many large companies have anywhere from 10 to 100 different applications. These applications have tens of pages that need to be displayed on multiple devices, browsers, screen sizes, resolutions, and even in multiple languages. The top 33% of these companies have an average of 77 applications, with a total of almost 700,000 screen variations viewed daily by their customers.

Number of Screens in Production

Number of screens in production

More interestingly, the number of screen variations is increasing by 30 to 50% year over year. So it’s only a matter of time before the number of screen variations per company goes well above 1 million. That is 1 million different screen-variations per day, presented to millions of customers around the world. Remember, all of these screen variations need to be flawless to keep customers delighted, not just satisfied.

Customer Satisfaction Vs. Customer Delight

Today, customer satisfaction is not enough. Businesses need to be able to stir up the interest, the attention, and even the love of our customers and prospects. Customers are surrounded by hundreds of applications. Every company wants them to work with their application and not with its competitors’. And companies don’t just want users to choose and work with their app on their own. They want customers to recommend their app to all their friends and colleagues as well.

Ensuring that the user experience is flawless on every device and environment they choose to work on is the key to turning customers’ experience into customer delight. In order to understand how to address the challenges of software delivery and build the perfect app that creates customer delight, we need to understand the technologies behind successful digital transformation so we can implement them effectively. But first, let’s understand how we got here.

The Big Bang of Software

Over the last 30 years, we’ve experienced what we can call the “Big Bang of Software.”

In the real big bang that created the universe, a small singularity inflated to the entire cosmos as it exists today. The evolution of the “software universe” over the last three decades isn’t so different.

  • There was a shift from on-prem to the cloud.
  • There was an evolution from proprietary software to open-source software and frameworks.
  • We evolved from needing to write our own code for every function we wanted to implement to using software-as-a-service.
  • We expanded from a few computer languages to a breadth of languages.

    From the process aspect

  • We shifted from a waterfall-style software development process that took many months to agile, which shortened the process to a few weeks. It has now continued to Continuous Integration, Continuous Delivery, and Continuous Deployment, to shrink the process down to a few hours from end to end.
  • Teams are now deploying new releases three to five times a day while still ensuring that every time they deploy, this huge matrix of combinations is being tested and verified before the new release is pushed out to production.

    From the organizational aspect

  • People used to work in separate and secluded groups: the R&D Group, the IT group, the QA group, and so on.
  • There was a “Shift Left” and adoption of the DevOps methodology.
  • More activities merged into R&D and engineering teams so that any issue that arises can be handled earlier in the cycle and fixed faster by the developers that originally created it.

    From the algorithmic aspect

  • There was a shift from heuristic algorithms or mathematical algorithms. We shifted to more and more AI algorithms, replacing the logic developed by software engineers with algorithms that are self-evolving and self-improving based on the data and the actual events collected in the field.

    From the technology aspect

  • New technologies are emerging faster than ever before – from every few years to every few months, and a lot of them happen in parallel.

In essence, the “Old World” of software delivery was slow, discrete, and sequential. The “New World” of software delivery, on the other hand, is fast, continuous, and parallel. A full delivery cycle only takes hours, sometimes even minutes. You can code, create a build, test it, deploy it to production, monitor it, fix small bugs, and repeat the process quicker than ever.

Big Bang of Software

This is the environment we need to cope with today to provide the desired future of testing. Now we need testing tools and testing infrastructure that would cater to software delivery as it is today. However, in order for it to work, all the sub-processes need to be automated and integrated, so none of them turns into a bottleneck. This is the real challenge we face, and automation and integration are the keys to overcoming the bottlenecks we often encounter. 

When reflecting upon the big bang of software, it is evident that test automation was the biggest bottleneck for rapid software delivery. It was ranked as the number one bottleneck by 63% of the participants in our survey. This is why the future of testing is essential. Today, test automation is the biggest bottleneck to rapid software delivery, which affects the entire CI/CD cycle. Any improvement to test automation will improve the entire delivery lifecycle.

Now that we recognize the big bang of software, the next step is the big bang of testing.

The Big Bang of Testing

Test automation needs to take the front seat for many companies, as ubiquity is a must. Millions of customers worldwide are using different devices, from different brands, with different operating systems, on different browsers, and screen sizes and resolutions.

No matter which cell phone they are using,  which computer they work on, or which browser they use to surf the web, it’s essential to the business that their user experience is flawless. Test automation is key to this experience. Test automation takes testing that was purely manual, or automated by test-scripts only, is now being enriched and sometimes replaced by AI testing algorithms.

Big Bang of Testing 1024x528 1

The top objectives for the future of testing must include:

  • Faster release cycles – At the speed of CI-CD
  • Full automation – AI playing a significant role
  • Comprehensive coverage
  • 99.9999% accuracy – No misses, no false positives
  • Full integration with the developer and DevOps  toolchains
  • Scalability at a reasonable cost

Today, technology like visual AI can help automate software testing by automatically detecting bugs that can only be detected manually. Visual AI automates almost any part of the testing cycle that could not be automated before, making it a frontrunner to success during the big bang of testing.

As we look at the big bang of testing, we need to identify the big shining galaxies that are being formed, representing the future testing platforms that are here to stay and dominate the new universe.

Further Reading

This post was previously published on September 25, 2020 on toolbox.com.

The post The Future of Testing and the Big Bang of Software appeared first on Automated Visual Testing | Applitools.

]]>
Black Lives Matter. Applitools is With You and We Will Impart Change. https://applitools.com/blog/black-lives-matter/ Thu, 04 Jun 2020 16:49:44 +0000 https://applitools.com/?p=19573 Dear Applitools Family, We are deeply saddened by the events that have taken place in the United States. As a company, and as individuals, we must acknowledge and address them....

The post Black Lives Matter. Applitools is With You and We Will Impart Change. appeared first on Automated Visual Testing | Applitools.

]]>

Gil Sever, CEO of Applitools, in support of Black Lives Matter

Dear Applitools Family,

We are deeply saddened by the events that have taken place in the United States. As a company, and as individuals, we must acknowledge and address them. But most importantly, we must do our part to support justice and equality for Black People.

As we endure the reality of a pandemic, we need to be our best selves. In fact, we’ve seen our best selves in medical professionals, first responders, friends, neighbors, and in each other. This is what makes the multiple acts of violence and social injustice against Black Americans impossible to ignore any longer. We now know, more than ever, how much better we can be.

For centuries, Black Americans have suffered terribly, based solely on the color of their skin. This has gone on for far too long and simply hoping things will change is not enough. 

We all must stand for the Black Community to end the violence and help bring equality, justice and healing to our country. 

We know that lending support and standing with the Black Community is not enough. There is much more we all can do to change our culture, support the movement and continue to educate ourselves to help create a just and equal world.

This is why, moving forward, Applitools will enact the following policies to support the Black Community:

  • Make and match donations from our team to organizations that support racial equality
  • Amplify the voices of Black Community members
  • Work to improve our team culture by taking deliberate actions to educate, train, create dialogue, and provide career opportunities for Black Community members 
  • Support our employees in taking time to mentor and support non-profits focused on equality

Lastly, we want to acknowledge the strength, conviction, and wisdom of the Black Women, Aleeyah Dixon and Angie Jones, who are part of our family. 

Angie and Aleeyah; we respect, love, and support you through this terrible time, and as a small company are privileged to have learned from you how to be our best selves. We want you to know that Applitools is your second home. A safe place. A place to find comfort and support.

In closing, we want to share some of the resources that Aleeyah and Angie have gathered for our team to help us understand and learn. It is our duty and responsibility to continue to educate ourselves. These valuable resources are yours to share so that we all better understand how to be active participants for positive change: 

Let’s all commit to that change right now.

Yours In Peace, Love, and Unity,

Gil Sever, Co-Founder and CEO
Applitools

The post Black Lives Matter. Applitools is With You and We Will Impart Change. appeared first on Automated Visual Testing | Applitools.

]]>
What Business and Technology Leaders Should Know about the Quality of their Web and Mobile Apps in this Challenging Time https://applitools.com/blog/business-technology-leaders-app-quality/ Wed, 06 May 2020 19:44:35 +0000 https://applitools.com/?p=18191 We live in a day and age where web traffic and mobile app usage are at an all-time high. Recently, Verizon’s CEO recently reported that “In a week-over-week comparison, streaming...

The post What Business and Technology Leaders Should Know about the Quality of their Web and Mobile Apps in this Challenging Time appeared first on Automated Visual Testing | Applitools.

]]>

We live in a day and age where web traffic and mobile app usage are at an all-time high. Recently, Verizon’s CEO recently reported that “In a week-over-week comparison, streaming demand increased 12%, web traffic climbed 20%, virtual private networks, or VPN, jumped 30% and gaming skyrocketed 75%.”

According to the 2019 State of Automated Visual Testing Report, 400 leading software companies reported that today’s typical “Digitally Transformed” company now boasts 28 unique web and mobile applications, each with 98 pages or screens per app, each in five different screen sizes, and in six different languages. This amounts to about 90,000 page and screen variations accessible every day by customers of a typical company. Visual bugs that are common in such a variety of different screen variations, cost a typical company more than $2m a year in R&D related costs.

One of the most important things to remember is that the visual appearance of a company’s website or mobile app directly reflects on brand recognition. So how can organizations make sure their brand reputation remains impeccable and makes them stay ahead of the competition?

Representing time it takes to test apps
Photo by Jaelynn Castillo on Unsplash

Some say it takes only 50 milliseconds for users to form an opinion about a website or an app. Within this very small amount of time, people determine whether they like your site or not, whether they’ll stay or leave. And, as the saying goes “you get no second chance to make a good first impression.” So you need to make it look perfect on any device, any browser, and any screen size, from the first glance to the last. Any failure to do so can cause your customer to move to your competitor in a heartbeat. For more interesting stats about user experience, see https://www.sweor.com/firstimpressions.

These are the facts that should keep every one of us that has a “Digitally Transformed” business awake at night, looking for a solution as a top priority.

But is there a readily available solution to the above challenge?

The problem is that apps, websites and smart devices have proliferated to the point where any attempt by humans to manage visual and functional quality with the necessary timing and coverage is impossible. The number of screens and page variations is only expected to increase, and the software release cycles are only expected to become faster and faster to support Agile and CI/CD software development life cycles (SDLC). 

The only way to cope with this enormous problem in an automated way is by using Artificial Intelligence (AI).

According to Gartner’s Critical Capabilities for Software Test Automation (December 17, 2019), “61% of [its 2019 Software Quality Tools and Practices Survey] respondents said that AI/ML features would be very valuable in software testing tools. Improved defect detection (48%), reduction in test maintenance cost (42%), and improved test coverage (41%) were seen as the top benefits expected from incorporating AI/ML into test automation (multiple answers were allowed).”

Another Gartner research report, Gartner’s Innovation Insight for AI-Augmented Development (May 31, 2019) published by Mark Driver, Van Baker and Thomas Murphy recommends that “application leaders should embrace AI-augmented development now, or risk falling further behind digital leaders.”

In the specific situation I have described, a specific type of AI is needed: Visual AI.

Visual AI is composed of various AI algorithms that mimic the human eye and brain. It can do the work that tens of people would do in weeks, in a matter of minutes, while integrating with the entire app development toolchain and would respond in realtime in the most demanding timing constraints of CI/CD.

As a final note, I would like to say that as the co-Founder and CEO of the company that invented Visual AI and serves more than 400 enterprise customers, many of which are part of the Fortune 500, this kind of technology is quickly becoming top of mind for business and technology leaders. If you’re looking to disrupt your market and beat your competition through innovative software development and delivery practices, you must add Visual AI to your secret sauce, in order to lead your business to prosperity. It was true yesterday and it is many times more important in this challenging time!

Gil Sever is CEO and Co-Founder at Applitools

Cover Photo by Tomas Yates on Unsplash

The post What Business and Technology Leaders Should Know about the Quality of their Web and Mobile Apps in this Challenging Time appeared first on Automated Visual Testing | Applitools.

]]>
Applitools Root Cause Analysis: Found a Bug? We’ll Help You Fix It! https://applitools.com/blog/applitools-root-cause-analysis-found-a-bug-well-help-you-fix-it/ Wed, 05 Dec 2018 09:32:08 +0000 https://applitools.com/blog/?p=3903 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...

The post Applitools Root Cause Analysis: Found a Bug? We’ll Help You Fix It! appeared first on Automated Visual Testing | Applitools.

]]>

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.

pasted image 0 4

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:

pasted image 0 2

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!

pasted image 0 3

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.

integration logos

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.

The post Applitools Root Cause Analysis: Found a Bug? We’ll Help You Fix It! appeared first on Automated Visual Testing | Applitools.

]]>
How to Visually Test React Components Using Our Storybook SDK https://applitools.com/blog/how-to-visually-test-react-components-using-our-storybook-sdk/ Mon, 15 Oct 2018 09:47:21 +0000 http://blog.applitools.com/visually-testing-react-components-using-the-eyes/ React is, first and foremost, a library for creating reusable components. But until React Storybook came along, reusability of components between applications was very limited. While a library of common...

The post How to Visually Test React Components Using Our Storybook SDK appeared first on Automated Visual Testing | Applitools.

]]>
React Storybook

React is, first and foremost, a library for creating reusable components. But until React Storybook came along, reusability of components between applications was very limited. While a library of common components could be created, it was very difficult to use, as there was no useful way of documenting it.

Yes, documenting the common components via a Readme file is possible, even useful. But a component is, in its essence, something visual. A Readme file just doesn’t cut it, neither for a developer and definitely not for a designer that wants to browse a library of shared components and choose the one that fits their purpose.

This limited the usefulness of React’s component reusability.

And then React Storybook came along. React Storybook has changed the way many companies approach React by allowing them to create a library of components that can be visually browsed so as to be able to pick and choose the component they want:

React Storybook
React Storybook

Finally, a real library of shared components can be created and reused across the company. And examples abound, some of them open-source: from Airbnb’s set of date components to Wix’s styled components.

But a library of widely used company-wide components brings its own set of problems: how does one maintain and test the set of components in a reliable way? Components that are internal to one application are easily maintained — they are part of the QA process of that application, whether manual or automated. But how does one change the code of a shared component library in a reliable manner? Any bug introduced into the library will immediately percolate to all the applications in the company. And in these agile days of continuous delivery, this bug will quickly reach production without anybody noticing.

Moreover, everyone in the company assumes that these shared components are religiously tested, but this is not always the matter. And even when they are tested, it is usually their functional aspect that is tested, while testing how they look is largely ignored.

Testing a Shared Library

So how does one go about writing tests for a library of shared components? Let’s look at one of the Shared Components libraries out there — Airbnb’s React Dates. I have forked it for the purpose of this article, so that we can look look at a specific version of that library, frozen in time.

Let’s git clone this fork:

$ git clone https://github.com/applitools/eyes-storybook-example.git
$ cd eyes-storybook-example

To run the storybook there, just run npm run storybook, and open your browser to http://localhost:6006.

To run the tests, run the following:

$ npm install
$ npm test

This runs the tests, which generate the following output:

Wow! That’s over 800 tests. I have to say that this component library is very well tested. And how do I know that it is very well tested? It’s not just because there are a lot of tests, but also because I randomly went into some source file, changed something, and ran the tests again.

Let’s try it. Change line 75 in file: src/components/CalendarDay.jsx to:

if (!onDayMouseEnter) onDayMouseEnter(day, e);

(I just added the if to the line). Now let’s run the tests again using npm test:

Tests failing due to a change in the code
Tests failing due to a change in the code

Perfect! The tests failed, as they should. Really great engineering from the Airbnb team.

(If you’re following with your own repository, please undo the change you just made to the file.)

Functional Testing Cannot Catch Visual Problems

Let’s try again. Revert the previous change, so the tests will pass again. Now Edit line 1 in the file src/svg/arrow-right.svg, by changing the first M694 to M94, as follows: 

Now let’s run the tests again using npm test:

Oops. They’re passing. We’ve changed the source code for the components, and yet the tests pass.

Why did this happen? Because we changed only the visual aspect of the components, without changing any of the functional aspect of it. And Airbnb does only functional testing.

This is not to denigrate the wonderful engineers at Airbnb who have given us this wonderful libraries (and other open-source contributions). This library is tested in a way that should make Airbnb proud. And I am sure that manual testing of the components is done from time to time to ensure that the components are OK.

(If you’re following with your own repository, please undo the change you just made to the file.)

Visual Testing of a Shared Library

So how does one go about testing the visual aspects of the components in a shared library? Well, if you’re using ReactJS Storybook, you’re in luck (and if you’re building a shared component library, you should be using React Storybook). You are already using React Storybook to visually display the components and all their variants, so testing them automatically is just a simple step (are you listening, Airbnb?).

We’ll be using Applitools Eyes, which has a suite of SDKs that enable Visual UI Testing inside a variety of frameworks. In this case, we’ll use the Applitools Eyes SDK for React Storybook (yes, I know, it’s a mouthfu).

(Full disclosure— I am a developer advocate and architect for Applitools. But I love the product, so I have no problem promoting it!)

To install the SDK in the project, run:

npm install @applitools/eyes-storybook --save-dev

This will install the Eyes SDK for Storybook (locally for this project). If you’re following with your own repository, please undo the changes you made to the files. or otherwise you will get failures. To run the test, just run:

npx eyes-storybook

You will get this error: 

Yup. To use the Eyes SDK, you need an Applitools API Key, which you can get by registering at the Applitools site, here. Once you have that, login and go to the Eyes admin tool, here. You will find the API Key using the following menu:

Getting the Applitools API Key
Getting the Applitools API Key

To make Eyes Storybook use the API key, set the environment key APPLITOOLS_API_KEY to the key you have:

// Mac, Linux:
$ export APPLITOOLS_API_KEY=your-api-key
// Window
C:> set APPLITOOLS_API_KEY=your-api-key

Now run it again:

npx eyes-storybook

Eyes storybook will run Chrome headless, open your storybook, take a screenshot of all your components and variants, and send them to the Applitools service. When the test ends, as this is the first test, it will establish that these screenshots are the baseline against which all other tests will be checked against. You can check the results with the link it adds to the end of the tests, or just go to http://eyes.applitools.com:

Visual testing results
Visual testing results

Failing the Test

So let’s test if the change we made to the SVG will fail the test. Re-edit line 6 in the file src/svg/arrow-right.svg, by changing the first M694 to M94, thus:

Now let’s run the test again using ./node_modules/.bin/eyes-storybook.

Success! Or rather failure! The test recognized that some of the component screenshots differed from the baseline ones we created earlier. We can see the result of the diffs in the Applitools Eyes management UI:

Showing diffs of components in Storybook
Showing diffs of components in Storybook

We can either select these changes as the new baseline (which in this case we don’t want to!) or fix the bug and run the test again, in which case it will be green.

And that is the beauty of Storybook. Because it enables you to create a central repository of components, it feeds three birds with one bird feed (I’m sorry, I can’t kill three birds, even if it is with one stone…):

  • Creating and documenting a shared ReactJS components library, with little effort.
  • Testing that the functionality of the components works (albeit with lots of effort)
  • Visually testing the components with literally zero code.

Conclusion

React Storybook is a game-changer for frontend development— it enables the creation and maintenance of a shared component library for the whole company.

And the best thing about React Storybook is that if you’ve already invested the effort to set it up, you get a suite of tests that check the visual look of your components… for free!

Applitools has visual regression testing tutorials for React Storybook, as well as for Storybook components built with Vue and Angular. As well as tutorials for over 40 other frontend technologies. Check out these examples, and if you have any questions, please contact us or set up a demo.

What Storybooks are you going to start visually testing?

— About the Author — 

30 years of experience have not dulled the fascination Gil Tayar has with software development. From the olden days of DOS, to the contemporary world of Software Testing, Gil was, is, and always will be, a software developer. He has in the past co-founded WebCollage, survived the bubble collapse of 2000, and worked on various big cloudy projects at Wix.

His current passion is figuring out how to test software, a passion which he has turned into his main job as Evangelist and Senior Architect at Applitools. He has religiously tested all his software, from the early days as a junior software developer to the current days at Applitools, where he develops tests for software that tests software, which is almost one meta layer too many for him.

In his private life, he is a dad to two lovely kids (and a cat), an avid reader of Science Fiction, (he counts Samuel Delany, Robert Silverberg, and Robert Heinlein as favorites) and a passionate film buff. (Stanley Kubrick, Lars Von Trier, David Cronenberg, anybody?)

Unfortunately for him, he hasn’t really answered the big question of his life – he still doesn’t know whether static languages or dynamic languages are best.

The post How to Visually Test React Components Using Our Storybook SDK appeared first on Automated Visual Testing | Applitools.

]]>
Staying Ahead of the Curve: 4 Trends Changing the Digital Transformation Game for CIOs https://applitools.com/blog/staying-ahead-of-the-curve-4-trends-changing-the-digital-transformation-game-for-cios/ Tue, 06 Mar 2018 12:21:04 +0000 http://blog.applitools.com/?p=1766 For companies of all sizes across all verticals, digital transformation efforts now weigh heavily on the business and CIOs bear the heavy burden when it comes to shepherding the organization...

The post Staying Ahead of the Curve: 4 Trends Changing the Digital Transformation Game for CIOs appeared first on Automated Visual Testing | Applitools.

]]>
Digital Transformation

For companies of all sizes across all verticals, digital transformation efforts now weigh heavily on the business and CIOs bear the heavy burden when it comes to shepherding the organization forward. What are the trends that are reshaping the role of the CIO? How can technology leaders stay ahead of the curve? A recent Enterpriser’s Project article from CEO Gil Sever dives deeper into the four growing trends for 2018. Here’s a quick synopsis of the takeaways:

  • Customer experience has always been important when it comes to digital transformations, but CIOs are now tasked with taking this to a new level of thinking about the customer in every development decision by incorporating Application Visual Management (AVM) strategies. Merely understanding your customer is no longer enough and bringing the customer perspective into every phase is now a requirement to achieve true success.
  • Artificial intelligence has an emerging role as a key business driver. AI and Big Data are less a fringe tactic for making business moves but are quickly becoming a core function driving day-in and day-out organizational decisions. Visual AI is a prime example – a critical and practical technology innovation focused on UI integrity.
  • “Fail fast” is the digital transformation battle cry. For years, businesses have focused on minimizing mistakes, even for the sake of moving slowly. In today’s hyper-competitive business environment, speed is the name of the game and being fast often means being first. When second place might mean missing out completely, this is more important than ever before.
  • Continuously be testing, learning, and pivoting. CIOs are tapping into Agile methodologies to incorporate more testing into their development pipelines to make decisions that are better informed and better for the customer.

2018 is the year where we need to put the customer experience first and tap into the emergence of Application Visual Management (AVM). How? By using customer behavior metrics to inform business decisions, putting the product in your customers’ hands more quickly, testing your applications more thoroughly and leveraging Visual AI and other automated techniques, being “customer obsessed” becomes a realistic goal that helps drive business success.

To read more about these trends and how you can develop a game plan that will help you gain a competitive edge through these means, including Application Visual Management and Visual AI, check out the full article here.

To read more about Applitools’ visual UI testing and Application Visual Management (AVM) solutions, check out the resources section on the Applitools website. To get started with Applitools, request a demo or sign up for a free Applitools account.

 

The post Staying Ahead of the Curve: 4 Trends Changing the Digital Transformation Game for CIOs appeared first on Automated Visual Testing | Applitools.

]]>
Adding App Visual Management to Mobile Test Automation https://applitools.com/blog/adding-app-visual-management-to-mobile-test/ Fri, 16 Feb 2018 23:46:51 +0000 http://blog.applitools.com/adding-app-visual-management-to-mobile-test/ Today’s mobile app development cycle demands short sprints to enable faster deployments. Time allowed for development is shrinking, with even less time for testing. Testing and development must also be...

The post Adding App Visual Management to Mobile Test Automation appeared first on Automated Visual Testing | Applitools.

]]>

Today’s mobile app development cycle demands short sprints to enable faster deployments. Time allowed for development is shrinking, with even less time for testing. Testing and development must also be scalable as teams face high pressure deadlines, while focusing on quality throughout the pipeline.

These dynamics are very well known, and the industry now includes a variety of quality offerings to ensure mobile apps perform great while delivering value to the customer. However, as testing and/or QA teams increasingly test against the varying device types, OS versions, phone sizes and languages, visual testing platforms are emerging to help ensure mobile apps look great and provide the best customer experience possible. This new dimension to mobile testing addresses the downside and impatience end-users have with mobile apps that are not formatted, sized or able to present a visually pleasing experience.

Consider These Visual Test Scenarios

For a mobile app, testers and QA teams must determine how they are going to test each case. For example, apps today often support multiple languages. Visual testing helps validate the different local languages to make sure they look correct each time within the mobile app. It ensures that the design fully supports multiple languages by accounting for right-to-left reading in languages such as Arabic or Hebrew, as well as left-to-right like the Western languages. App designs also must support varying lengths of text strings for different languages. If testing is done only in the native language, this can create a visually unpleasant and unusable application for anyone who uses it in a different language.

What also makes visual testing vital is how all mobile manufacturers do many things differently. Visual testing can help account for the visual presentation of a single app across each OS version, along with varying resolutions, screen-sizes and types of devices – to name a few. If one of these elements is overlooked, glaring issues are going to surface that will negatively impact the user experience. For example, it is easy to ignore the landscape orientation on a mobile device, because portrait is more commonly used and tested. This is surprisingly overlooked and some apps are completely unusable in landscape – this won’t fly in today’s customer experience-driven world.

What are the solutions?

Theoretically, a developer could try a single-threaded manual approach to visual testing, but the amount of effort required in a short time frame makes that neither effective or efficient, nor fair to the tester. Another option is a multi-threaded manual approach, but that is not going to scale with modern application release demands. This is where automation comes into play, and today there are options for mobile web and native apps. For example, there are visual testing platforms that automatically validate the look, feel and user experience of an app while allowing the tester to run their test locally and scale on a cloud service. This is a developer’s dream – to gain immediate feedback for all code changes and that they don’t adversely impact the overall application in terms of “look and feel.”

These solutions, while new to the industry, are designed to integrate with existing automated test tools and platforms, rather than introducing new tests that are not integrated to the overall quality and performance of the application.

Bringing it All Together

To get started with visual testing and monitoring for iOS, for example, the tester would install Xcode, command line tools, and create a simulator or connect a real device. For Android, they would use the Android SDK and create an emulator or connect a real device and enable debugging mode. Then they would install the automation testing framework for visual testing.

The new setup will check a mobile web app to ensure that it functions and looks correct on every single release, on every single responsive design, and it will all be available in a visual format. Some visual testing frameworks come equipped with a variety of SDKs and libraries. The tester can then set a full-page screenshot which can navigate to a cloud service to run the test. Now, any time a change is made to the application and the visual test runs, it captures the page to validate that it looks correct.

New mobile automation tools with a dashboard allow you to gain visual assertion of where and how the design, copy and images are laid out – and confirm that everything is in the right place. There are dashboards that offer radar features that highlight all the discrepancies that are caught during testing. Then, the tester is able to drill down to the baseline of the visual anomaly and find the issue. For example, perhaps it was caused by a spelling mistake. This automated process aims to catch errors that would be easily overlooked or difficult to find during manual testing. With the technology and tools in place to make this type of testing possible, the next step is to scale.

Some visual test automation platforms can run all on a local computer with multiple devices and emulators connected, however, it would need to be a substantial machine or multiple machines to work. Alternatively, the tester can leverage an internal device grid or cloud test services. Cloud services are the future of visual test automation that can minimize or even eliminate the need for running a local test. Instead, everything will run in the cloud. That will offer ease of setup and integration, because essentially that is already done for the tester.

Today, cloud services can be run parallel with the visual test, offering varying levels of analytics (depending on the service selected). Some cloud services integrate easily with CI services to allow the tester to create a dictionary of different device and OS versions, split them into different threads, and test them, whereas this would be very expensive if done locally.

As automation helps visual testing teams scale their efforts to meet demanding release pipelines, more testing functionality will continue to shift to the cloud. As testing time decreases, teams must ensure the visual integrity of the mobile app. The must confirm that it delivers an aesthetically pleasing experience to the end user in any environment, language or device. This emerging approach demonstrates the importance of visual testing, as automated validation that the application looks and works correctly becomes more mainstream.

Want to learn more about mobile test automation?  Watch the exclusive expert session we hosted with Appium Architect and Project Lead Jonathan Lipps, as he walked us through the state of mobile testing and the future of Appium.

The post Adding App Visual Management to Mobile Test Automation appeared first on Automated Visual Testing | Applitools.

]]>
The Next Phase Of Applitools’ Journey https://applitools.com/blog/the-next-phase-of-the-applitools-journey/ Thu, 15 Feb 2018 13:33:27 +0000 http://blog.applitools.com/the-next-phase-of-the-applitools-journey/ The Rise of Application Visual Management Category (AVM) and Our Enterprise-Ready Applitools Eyes V10 When Applitools first launched in 2013, we were united behind a shared vision to make it...

The post The Next Phase Of Applitools’ Journey appeared first on Automated Visual Testing | Applitools.

]]>

The Rise of Application Visual Management Category (AVM) and Our Enterprise-Ready Applitools Eyes V10

When Applitools first launched in 2013, we were united behind a shared vision to make it easier for software developers to confidently release their products with visually perfect UI. In those days, there was a fairly robust ecosystem of open-source and commercial tools helping developers manage applications from a functional standpoint, but the process of testing, monitoring, and managing user experience was either completely manual or totally absent from the development cycle. UI issues often went unnoticed until discovered in production by customers. Not an ideal situation for anyone, as it led to slower development times and a poorer overall application experience. 

Application Visual Management (AVM) Application Visual Management (AVM)

With this vision of Visual Testing tools in mind, we put together a great team of talented AI visionaries who could push the boundaries of what was previously thought possible in UI management. By leveraging the expertise gathered from decades of experience, we built proprietary Visual AI technology, and trained it with the task of automating the testing of visual UI. Together with innovative customers, we built software that could understand UI visually, understanding how colors worked together, if an element was blocking another element, if items were in the right location, or if a functional component of an application actually appeared correctly in the UI. Moreover, we could do this at scale, removing a critical bottleneck in the test automation chain.

Ultimately, we were fortunate enough to garner the support of hundreds, then thousands, and now tens of thousands of users who innovated in and around the possibilities of our Visual AI technology. Over these past 4 years, we have been working tirelessly to improve our Visual AI platform to make it the best automated UI testing solution in the market. We’ve watched with pride as our technology has changed the way organizations develop, test, monitor, and release software, and have watched as organizations fundamentally changed the software development landscape using Applitools as a key part of their stack. As you can imagine, it’s been a wild (and enjoyable) ride.

That brings us to today. A whole new category is being created right in front of our eyes. Across businesses of all sizes and verticals we are witnessing an explosion in the recognition of UI as “mission critical” to organizational success and a key tenet of a successful digital transformation. From development teams to the C-suite, companies are making UI a top priority. We found that there is no category that defines what we make possible at Applitools – so we’re taking a shot at defining it together with test automation engineers, manual testers, front-end developers, developer team leads, product people, business people, and DevOps.

Which is why I am excited to announce Application Visual Management (AVM). AVM outlines a new technology category that integrates automated visual management into software development workflows to increase test coverage, accuracy and frequency of user interface releases, and user experience monitoring. AVM is built around what we see as mega-trends in the industry, trends that necessitate the convergence of UI development, production, testing, monitoring, along with Visual AI to deliver a seamless experience across all environments, in real time, even as changes are made both within and outside your own organization. Furthermore, as the velocity of software development increases to meet ever-changing business demands, AVM makes it possible for organizations to stay united across teams and tackle visual issues and UI deficiencies head-on at the speed of CI/CD.

Application Visual Management (AVM) Conceptual Framework

We at Applitools see UI as the “front door” of your digital transformation and believe the way your users experience your product at a visual level is essential to your overall success. AVM is uniquely positioned to help organizations leverage the power, consistency and dependability of Visual AI to make your products better, faster. With AVM, you can reduce costly rollbacks and dev changes, and gain a competitive advantage in your market by releasing more complete and well-tested products at a greater rate of speed.

Beyond this exciting announcement of a new category, we also are thrilled to introduce the latest iteration of our technology – Applitools Eyes Version 10. V10 is Applitools’ latest major release of our ground-breaking technology, and is designed to meet the demands of even the largest and most complex enterprises. Our VP Product & Strategy, Aakrit Prasad, will give more details, including screenshots, in a couple days – so be sure to check back in soon to get the scoop.

It is truly an exciting time to be part of the software development world. As more organizations undergo digital transformations and look to improve their overall product performance, Applitools is honored to be at the forefront of visual UI test automation. This represents an important next step in our journey together, as we begin to explore the fundamentally new, disruptive category of Application Visual Management. We hope you’ll join us as we continue to work to take Applitools to new heights and drive innovation forward.

Bonus: After formally announcing AVM and Version 10 of Applitools Eyes this week, we’ve already been seeing some great reactions from the industry! Check out these stories for more:

To read more about Applitools’ visual UI testing and Application Visual Management (AVM) solutions, check out the resources section on the Applitools website. To get started with Applitools, request a demo or sign up for a free Applitools account.

The post The Next Phase Of Applitools’ Journey appeared first on Automated Visual Testing | Applitools.

]]>
Why Digital Executives Should Care about Automated Visual Testing https://applitools.com/blog/why-digital-executives-should-care-about-automated/ Wed, 15 Jun 2016 17:28:32 +0000 http://162.243.59.116/?p=164 These days, to make an impact on your customers and reach new audiences, it’s not enough to have a great product. A company without a strong digital presence – and...

The post Why Digital Executives Should Care about Automated Visual Testing appeared first on Automated Visual Testing | Applitools.

]]>

These days, to make an impact on your customers and reach new audiences, it’s not enough to have a great product. A company without a strong digital presence – and by extension, a great digital experience – can fall behind.

What do we mean by the digital experience? This translates to delivering an app that works functionally and looks beautiful across any digital platform that your customers care about. 

But creating this experience isn’t always easy. It’s hard to keep up with an ever-growing number of different devices, browsers and screen resolutions.

Adjusting your site or app to the huge variety of platforms out there is a time-consuming task, and you might find yourself asking how to maintain a great digital experience without wasting time on QA, physical device testing and other maintenance procedures.

However, maintenance and testing is key to delivering a good digital experience. Data collected from users’ online behaviour teaches us that in many cases, a user who has closed your app after encountering a bug won’t open it up again.
Moreover, a visual-faulty UI creates an unprofessional feel to your site or app and a negative reputation to your brand. To keep your customers engaged and to ensure they are loyal and excited about your site or app, you must provide them a friendly and flawless experience.

With today’s growing numbers of operating systems, devices and browsers, a flawless digital experience can be achieved only by automatically detecting UI bugs and monitoring your site or app, assuring continuous quality in your product’s lifecycle. Assuring a visually perfect experience across multiple platforms requires the automation of your testing – not only of the functional aspects of your site or app, but the visual ones as well.

Hello, Automated Visual Testing

This is why the practice of Automated Visual Testing is gaining huge momentum right now. Whether you’re a Digital Experience Executive or QA Manager, Automated Visual Testing can offer you many benefits.

Visual Testing allows you to handle changes in your site or app that would have otherwise demanded a large amount of work using conventional testing methods by your developers and QA teams.
Both functional and visual bugs in your UI that would have taken hours to detect using manual QA personnel can now be automatically detected. This allows your development team to work better and faster, while widening your feature scope and shortening your release cycle. The automation of your visual tests will allow your developers and QA engineers to push your product forward, instead of chasing and fixing UI bugs.

Adding Automated Visual Testing to your existing testing infrastructure doesn’t take much effort. Implementation into your workflow will take some time, but automating your visual tests will quickly boost your team’s productivity, enable you to test and monitor your digital experience across all platforms.

Keep your customers happy – give them a flawless experience by automating your visual tests today!

Contact us to learn more about how Automated Visual Testing can help you ensure a flawless digital user experience.

To read more about Applitools’ visual UI testing and Application Visual Management (AVM) solutions, check out the resources section on the Applitools website. To get started with Applitools, request a demo or sign up for a free Applitools account.

The post Why Digital Executives Should Care about Automated Visual Testing appeared first on Automated Visual Testing | Applitools.

]]>