Percy: Automating Visual Testing for Seamless UI Quality

This article, created in partnership with Percy, explores how to implement automated visual testing to ensure your user interface (UI) remains consistent across different browsers and screen sizes. While unit and integration tests verify application logic, they often miss visual defects. Percy provides a solution by automating the process of capturing and comparing visual snapshots, highlighting discrepancies and streamlining the review process.

This tutorial uses an API-driven single-page application as a practical example. You'll learn how Percy handles dynamic data and integrates with your workflow for efficient visual reviews and approvals.

Key Benefits of Percy:

• Early Detection of UI Issues: Catches visual bugs missed by traditional testing, ensuring consistent UI across browsers and screen sizes.
• Automated Snapshot Comparison: Automates the capture and comparison of visual snapshots, highlighting differences for easy review.
• Simple Integration: Installation and integration are straightforward, similar to setting up standard testing frameworks.
• Dynamic Data Handling: Effectively manages UIs displaying dynamic data, preventing false positives from data changes.
• Streamlined Approval Workflow: Facilitates team review and approval of visual changes, ensuring only intended modifications are deployed.
• Versatile SDKs: Offers SDKs for various testing frameworks, enhancing compatibility with existing development environments.

Prerequisites:

This tutorial targets intermediate to advanced JavaScript developers familiar with ES6 syntax, Express.js (for RESTful APIs), jQuery, Axios, CSS frameworks, Git branching strategies, and ideally, experience with testing frameworks. A GitHub account is required. We'll use a sample currency application available on GitHub.

Understanding Percy:

Percy offers a platform and workflow for visual testing of web apps, static sites, and component libraries. Its free plan includes unlimited team members, 5,000 snapshots monthly (with a one-month history), and unlimited projects. The process involves installing an SDK, creating a project dashboard, and integrating with your codebase. Percy renders snapshots in Chrome and Firefox, supporting up to ten screen resolutions.

Implementation Steps:

1. Setting up the Demo Project: Fork the provided GitHub repository and follow the README instructions to set up the sample currency application.

2. Setting up the Percy Project Dashboard: Sign up for a free Percy account, create a project ("Percy-Tutorial"), and link it to your GitHub repository. Obtain your PERCY_TOKEN.

3. Generating Percy Snapshots: Install the @percy/script package (npm install -D @percy/script). Create snapshots.js (see the original article for the code). This script uses Puppeteer to interact with the application and generate snapshots for each page. Remember to run npm start in a separate terminal to start the application before running the Percy script. Execute the script using export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>.

4. Handling Dynamic Data: Modify snapshots.js to intercept API requests and replace responses with mock data to ensure consistent snapshots. (See the original article for the updated code).

5. Approval Workflow: Create a feature branch, make visual changes, commit, push, create a pull request on GitHub, run Percy tests, approve the build in the Percy dashboard, and merge the branch. Finally, update the master branch and run Percy tests again to establish a new baseline.

Continuous Integration (CI) and SDK Integration:

Percy integrates with various CI/CD platforms (AppVeyor, Azure Pipelines, etc.) for automated testing. It also supports various SDKs for integration with different testing frameworks (e.g., Cypress). The original article provides an example of Cypress integration.

Conclusion:

Percy significantly enhances UI testing by automating the process and providing a streamlined workflow for reviewing and approving visual changes. By integrating Percy into your development process, you can significantly reduce the risk of releasing products with visual defects. The FAQs in the original article provide further details on visual testing concepts and Percy's capabilities.

The above is the detailed content of A Guide to Visual Testing with Percy. For more information, please follow other related articles on the PHP Chinese website!