Modern applications are more complex than ever. As an application grows, its UI becomes unwieldy. While functional tests check for accurate behavioral outcomes of the application, they cannot ensure a pixel-perfect UI.
In this webinar, Mike Fotinakis, the co-founder of Percy, explains how Percy automates visual testing and helps in detecting the most elusive visual changes. You will see Percy in action and learn how you can review visual changes across hundreds of pages, and ship visually accurate UI with confidence.
Here’s a round-up of some of the questions that he answered during the webinar:
Is visual testing or Percy envisaged as a replacement to conventional test automation tools, or will the two coexist?
Percy integrates into your existing CI/CD pipeline and enables you to automate visual testing. What Percy actually does is, it runs an agent alongside your test runner in your CI environment, and allows you to perform visual tests alongside functional tests, with every commit.
Does Percy support responsive visual testing?
Yes, Percy allows you to automatically detect visual changes on mobile, tablet, and desktop resolutions. Because Percy stores the original DOM snapshot and page assets, we simply render the same page at different widths by resizing the browser when generating page screenshots. This is handled entirely server-side and has no effect on the speed of your tests since all rendering and diffing takes place in Percy.
Do I need separate scripts to test a page between different desktop sizes?
No. A powerful feature of Percy is visual testing for responsive user interfaces, allowing you to automatically detect visual regressions on mobile, tablet, and desktop screens at once.
Is there a way to capture and test specific components instead of snapshotting an entire page?
With Percy, you can test at both the component level and the page level. Our Storybook integration supports visual testing for React, Angular, Ember, and Vue.js components, ensuring that every change to your component library results in an intended visual change.
Can I specify screen/page coordinates, such as dates, that change every day, to be tested instead of the whole page?
Percy does a lot of work for you to make sure that the visual changes you see are as relevant as possible. The following ways can help you stabilize the data in your test suite:
- For deterministic data: Tools like faker.js allow you to provide a seed to ensure that the same data is generated each time faker is run. It will still generate fake data, but it won't be random anymore. This will stabilize all the dynamic data that would cause false-positive visual diffs.
- Freezing time: You can use tools like Moment.js to freeze time in your applications. This will stabilize all of your visual snapshots and make them stay that way.
You can also learn about how you can freeze data in Cypress and Storybook here.
How does Percy deal with dynamic visual elements such as animations?
Percy automatically freezes the animations on the first frame, on the pages that are rendered. It also freezes most CSS animations and styles. Other than animations, Percy does other server-side configurations to create a consistent rendering environment and avoid other kinds of false-positives.
What about really tiny screenshot differences? For example, when the text shifts by 1px only?
If there’s only a 1px difference within a 7px surrounding circle, it will not be marked as a visual change. This does not apply to anything other than isolated 1px diffs.
Our experience rendering millions of snapshots indicates that 1px diffs are almost always a result of unpredictable browser rendering. By ignoring 1px diffs we hope to better surface relevant diffs and reduce the amount of noise in your builds.
Is it possible to ignore certain regions while testing for visual changes?
For a region where you want to ignore a specific element because it is expected to change all the time, you can take full control of Percy's rendering environment with Percy-specific CSS. You can do so using the @media only percy CSS media query. CSS that is nested under this media query will only apply in Percy and will not affect your normal pages outside of Percy.
How to integrate Percy with Selenium for Java?
You can find the detailed instructions about the setup procedure on our integrations page.
Which CI servers can Percy integrate with?
We integrate with all common CI providers and can be configured for custom environments. You can check the list and the setup process here.
We're constantly adding support for CI services. Reach out to support to see if yours is on the way.
Can I run Percy locally?
Percy works best when triggered automatically from your CI environment, but can also be run from your local development environment. This comes in helpful when you are first setting up Percy integration. To enable Percy locally, the PERCY_TOKEN environment variable must be configured.
When running in your local environment, we also recommend setting the PERCY_BRANCH environment variable to local to avoid unintentionally overwriting your project's master baseline in Percy. This isn't required but it's a step to make sure you're not throwing off any baselines that may have been set by CI.
Can I share results from Percy with people (designers, clients, or other non-developers) who don't have a BrowserStack login?
There are three ways in which you can share results with your team:
- Percy allows you to add unlimited users, even in the free plan, so you can collaborate with your team during visual reviews.
- For open source projects, third-party contributors can see their contributions visualized immediately with Percy public projects. Public projects give OSS creators and maintainers the ability to transparently run visual reviews while giving contributors insight into the visual impact of any given code change.
- Another way is to install the Percy-Slack integration. With this, you can configure unlimited connections between Slack channels and Percy projects and allow members to view updates on the channel.
