How to perform Visual Testing for React Apps

Maintaining a consistent UI in React apps is crucial for a seamless user experience. Visual testing helps detect unintended layout and style changes, preventing UI fixation. It ensures design truth, enhances reliability, and maintains make consistency across devices.

This clause covers optic essay for react apps, its character, component testing, and end-to-end testing.

Understanding Optic Testing for React Apps

for React apps ensures that UI components render correctly and remain visually reproducible across update. Unlike, which checks logic and interaction, visual testing captures snapshots of the UI and equate them to detect unintended modification.

This assist prevent layout shifts, broken styles, and regressions in plan. It offer multiple benefits like:

• Prevents UI Bugs: Detects unexpected changes in design, layout, and reactivity.
• Ensures Cross-Browser Consistency: Verifies that UI elements appear correctly across different browser and devices.
• Detects Regression Issues: Helps maintain a stable pattern by catch unintended UI changes after code updates.
• Improves Developer Efficiency: Automates UI verification, reduce the want for manual optical inspections.

Types of React App Testing

In a React covering, two levels of testing can be performed:

1. is usually performed when the application is deploy and running with all its components rendered in the browser.
2. is performed during the development stage. It allows multiple tests with respective combinations for a individual component and help improve application quality at an other point.

React Component Visual Testing

For this article & # 8217; s purpose, the Cypress Real World React app is employ, which can be found here.

Prerequisite

• Refer to thisdocumentationfor Cypress and Percy & # 8217; s setup
• For this article & # 8217; s purpose, we are using the Cypress Real World React app, which can be institutehere.
• Please clon this repository to your local laptop for recitation purposes.

The initiative step is to write a Cypress component exam for the sign-in kind, which looks like the following:

The part source code for this can be constitutehere.

The Cypress component test for the Sign-in Form will look like this:

it (`` submits the username and password to the backend '', () = & gt; {mountain (& lt; MemoryRouter & gt; & lt; SignInForm authService= {authService} / & gt; & lt; /MemoryRouter & gt;); cy.get (`` [data-test * =signin-username] '') .type (`` Katharina_Bernier ''); cy.get (`` [data-test * =signin-password] '') .type (`` s3cret ''); cy.get (`` [data-test * =signin-submit] '') .click (); cy.wait (`` @ loginPost ''); cy.get (`` [data-test * =signin-error] '') .should (`` not.exist '');});

Consider an example where the ground color of the SIGN IN button needs to be formalize.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

The Cypress code to get the background coloring will look like below

cy.get (`` .MuiButton-containedPrimary '') .should ('' have.css '', '' background-color '', '' rgb (63, 81, 181) '');

• But imagine writing this for several elements and covering for color and background colour; this would become a time-consuming chore.
• To zip up the time-consuming job and better validate, integrate to capture the shot of this particular SIGN IN button and validate for any visual changes.
• Now use Percy & # 8217; s requirepercySnapshotto capture a snap of this Sign in the form ingredient.

The code appears as shown below, with farther configuration details uncommittedhere.

cy.percySnapshot (`` mark in form '');

And the tryout will be as postdate:

it (`` submits the username and password to the backend '', () = & gt; {mount (& lt; MemoryRouter & gt; & lt; SignInForm authService= {authService} / & gt; & lt; /MemoryRouter & gt;); cy.get (`` [data-test * =signin-username] '') .type (`` Katharina_Bernier ''); cy.get (`` [data-test * =signin-password] '') .type (`` s3cret ''); cy.get (`` [data-test * =signin-submit] '') .click (); cy.get (`` [data-test * =signin-error] '') .should (`` not.exist ''); cy.percySnapshot (`` sign in form '');});

When the test runs, the first snapshot build is sent to Percy for approval. Once approve, it becomes the baseline image for future comparisons.

To see how the Percy Snapshot comparison works, change the background color of the SIGN IN button from secondary to primary and create a pull request.

Once the Github actionsrun the build, you can see the build betray as shown below.

The have surpass, but the visual tryout performed with Percy in the component test has failed and requires review.

Click on the Details tie-in against the failed Percy cheque to review.

• As you can see, the changed ground colour of the SIGN IN button is highlighted by Percy.
• You can now approve or Reject the body-build base on the requisite.
• The component-level in React coating consumes less clip and give early feedback on the appropriately used modification.

React End-to-End Visual Testing

End-to-End testing takes clip as it covers the entire user journey in the coating. While these tryout focus on functionality, visual elements can still break. Using Percy for ocular examination aid ensure the UI remains consistent throughout the user journey.

The Cypress trial for the End-to-End flowing will look like the following:

it.only (`` navigates to the new transaction form, selects a user and submits a transaction defrayal '', part () {const defrayment = {amount: `` 35 '', description: `` Sushi dinner 🍣 '',}; cy.getBySelLike (`` new-transaction '') .click (); cy.wait (`` @ allUsers ''); cy.getBySel (`` user-list-search-input '') .type (ctx.contact! .firstName, {force: true}); cy.wait (`` @ usersSearch ''); cy.visualSnapshot (`` User Search First Name Input ''); cy.getBySelLike (`` user-list-item '') .contains (ctx.contact! .firstName) .click ({force: true}); cy.visualSnapshot (`` User Search First Name List Item ''); cy.getBySelLike (`` amount-input '') .type (payment.amount); cy.getBySelLike (`` description-input '') .type (payment.description); cy.visualSnapshot (`` Amount and Description Input ''); cy.getBySelLike (`` submit-payment '') .click (); cy.wait ([`` @ createTransaction '', `` @ getUserProfile '']); cy.getBySel (`` alert-bar-success '') .should (`` be.visible '') .and (`` have.text '', `` Transaction Submitted! ``); const updatedAccountBalance = Dinero ({amount: ctx.user! .balance - parseInt (payment.amount) * 100,}) .toFormat (); if (isMobile ()) {cy.getBySel (`` sidenav-toggle '') .click ();} cy.getBySelLike (`` user-balance '') .should (`` contain '', updatedAccountBalance); cy.visualSnapshot (`` Updated User Balance ''); if (isMobile ()) {cy.get (`` .MuiBackdrop-root '') .click ({strength: true});} cy.getBySelLike (`` create-another-transaction '') .click (); cy.getBySel (`` app-name-logo '') .find (`` a '') .click (); cy.getBySelLike (`` personal-tab '') .click () .should (`` have.class '', `` Mui-selected ''); cy.wait (`` @ personalTransactions ''); cy.getBySel (`` transaction-list '') .first () .should (`` contain '', payment.description); cy.database (`` find '', `` users '', {id: ctx.contact! .id}) .its (`` proportion '') .should (`` equal '', ctx.contact! .balance + parseInt (payment.amount) * 100); cy.getBySel (`` alert-bar-success '') .should (`` not.exist ''); cy.percySnapshot (`` Personal List Validate Transaction in List '');});

As you can see first, all functional checks are performed, followed by establishment to ensure the optic aspects are correct.

• The above Cypress test can be found on thisrepo
• When you run the above test, you can see snapshots sent to Percy for the first time, and you need to Approve the build for making these images as baseline icon.

If any alteration in the feature branch does not match the baseline image, the Percy test will miscarry, and Percy will highlight the changes, which you can Approve or Request for alteration.

Talk to an Expert

Why Choose BrowserStack Percy for Visual Testing?

is an AI-powered visual examination program designed to automate visual regression testing for web applications, ensuring unflawed user interfaces on every code commit.

Integrated into CI/CD line, Percy detects meaningful layout transmutation, title issues, and contented changes with advanced AI, significantly reducing false positives and cutting down review time for fast, confident releases.

: 

• Effortless Visual Regression Testing:Seamlessly integrate into CI/CD pipelines with a single line of codification and work with functional test suites, Storybook, and Figma for true shift-left testing.
• Automated Visual Regression:Captures screenshots on every commit, compares them side-by-side against baseline, and instantly flags visual fixation like broken layouts, style shifts, or component bugs.
• : The Visual AI Engine uses modern algorithms and AI Agents to automatically ignore visual noise caused by dynamic streamer, brio, anti-aliasing, and other unstable elements. It focuses alone on meaningful changes that affect the user experience. Features like & # 8220; Intelli ignore & # 8221; and OCR help differentiate important optic displacement from minor pixel-level differences, greatly reduce false positive alerts.
• :Highlights impactful changes with bounding boxes, offers human-readable summaries, and accelerates review workflows by up to 3x.

• No-Code Visual Monitoring:Visual Scanner grant rapid no-install setup to scan and monitor thousands of URLs across 3500+ browsers/devices, initiation scans on-demand or by schedule, ignore dynamic content region as ask, and compare staging/production or other environments instantly.
• Flexile and Comprehensive Monitoring:Schedule scan hourly, daily, hebdomadal, or monthly, analyze historic termination, and liken any environment. Supports local testing, authenticated pages, and proactive bug sensing before public liberation.
• Broad Integrations:Supports all major frameworks and CI tools, and offers SDKs for nimble onboarding and frictionless scalability.

Pricing

• Free Plan:Available with up to 5,000 screenshots per month, ideal for become started or for little projection.
• Paid Plan:Starting at $ 199 for advanced features, with custom-made pricing available for enterprise plan.

Conclusion

Visual testing is essential for maintaining UI consistency in React applications. Component testing helps catch UI subject early, while end-to-end testing see a unseamed user experience. Fixing bugs later in growth is high-priced, so incorporating tests early improves product quality and ROI.

Using Percy for visual testing help detect unintended UI changes efficiently. Adding more tests at the component level speeds up execution and ensures a stable, visually exact covering.

Useful Resources for Visual Testing

Related Guides