https://www.youtube.com/watch?v=0jkCd0ZK4Uo

Let's face it, mobile app testing is broken in more ways than one. QA teams of developers are drowning in manual visual reviews, flaky emulator tests and false positives that waste hours testing across real devices, often out of reach. And while functional tests may pass, you still end up shipping misaligned UIs that break trust with your users. And one of the biggest secrets that most people don't know about is that automating visual testing for mobile apps helps you improve your build quality, optimize your release cycles, and most importantly, improve your developer and testers productivity. And that's where BrowserStack app Percy comes to the rescue with its straightforward integration and a review dashboard to keep track of all the changes coming into your application. Also, App Percy delivers fast AI powered visual testing on over 30,000 real devices, both iOS and Android apps, for far more accuracy than emulators. It also highlights only in the most meaningful UI changes, filters out all the noise and integrates seamlessly with your CI, CD and test frameworks. Appium Espresso X UI tests and all with just one line of code. So how's this all possible? Well, let me show you in this quick demo that goes over all the key features I think you need to know more about. Check it out. All right, let me quickly show you how to create a project and run builds for comparison in App Percy. So first we'll be running a build in Python using Appium for an Android sample app. And what I Also like about BrowserStack, their documentation is really spot on. So here we're going to first clone the sample application found under App Percy's visual testing Appium Python documentation. Next, upload the sample application. Once the command runs successfully, you should get a response like this. Now let's create an App Percy project. Let's enter in these fields. Make sure to set the Percy token as an environment variable. Okay, now let's generate the first build. Also, your Appium capabilities and configuration should look like this example. This is how you add the screenshot command at instances where you wish to capture relevant screenshots. Alright, once this is all set, it's time to run our test. And this is how your build will look in the App Percy dashboard. If you want to add visual changes, you can modify the sample application. If you do, make sure to commit your changes then run your test again. So you should now see any visual differences in the dashboard. All right, now let's go over choosing your baseline strategy. So this is one of Appersey's key features, baseline management. We'll explore how to choose the right strategy for your visual testing workflows. When setting up a new project in App Percy, you'll need to define key project details, including project name, web or mobile repository link your preferred baseline management strategy Git or Visual Git Whether Percy or Automate will handle browser selection. So let's break down Git versus Visual Git. When you use each, the Git baseline strategy is best suited for developers. It compares feature branches against the main branch, ensuring that changes are reviewed before merging. This approach requires build level approvals or rejections and seamlessly integrates with your development pipelines, making it an ideal choice for teams following a structured release project. On the other hand, the Visual Git baseline strategy usually is best designed for qa engineers and SDATs. Instead of comparing future branches, it evaluates changes against the latest approved snapshot. This this enables more granular control over individual snapshots, allowing for snapshot level approvals or rejections. To select a baseline strategy, follow these steps. Go to the App Percy Dashboard, click on Create New Project, select App as the platform, Choose Git or Visual Git as your baseline management strategy. All right, next I want to show you how you can integrate App Percy with your source code management tools to help automate your visual testing and also help streamline your development workflows. And obviously this is an important feature and app Percy has you covered because it integrates seamlessly with other popular platforms like GitHub, GitLab and others that support Git based workflows. And obviously by integrating with these tools, Percy can run automated visual reviews alongside your pull or merge requests, detecting unattended UI changes early in the development cycle. And this has a bunch of benefits like provide real time updates, helps you to automate approvals and service visual differences, and making it a lot easier to maintain UI consistency across your team. So let's go through a step by step example through the process of how to set this up with GitHub. So navigate to your Appcy Organization setting as an admin, open your dashboard and go to your organization settings. Install the GitHub integration Under the integration section, click Install for GitHub authenticate and choose Repositories. You'll be prompted to authenticate with GitHub and select the repositories you like Percy to connect with. Percy will request read access to your code and metadata, also permission to update status checks on pull requests. You can also link your Percy project to a repository and once authorized, GitHub will appear in your App Percy sidebar. You can now link your App Percy project to the correct repository and run visual tests in your pull requests. Once the integration is set up, creating a pull request will automatically trigger a Persi visual test run as part of your CI workflows. If any visual changes are detected, App Percy will post a status update on the pull request, and you'll be notified in GitHub if a review is required. So to review visual changes, you go to the GitHub PR, click details on Percy Check. You'll be taken to the App Persy Dashboard to view the visual diff. If the changes look good, simply approve the build. Once approved, App Percy will update the GitHub status to pass, signaling that the visual change has been reviewed and accepted. So let's look at this in action. Here's an App Percy build with detected UI differences. Clicking the Info icon shows us the associated pull requests. Opening the PR in GitHub, you can see the App Percy status check has failed due to visual changes back in the App Percy dashboard. Once we approve the build, the GitHub status is updated to pass and you can see by integrating app Percy with GitHub, you can start automating your visual testing process. This helps your team catch UI regressions early, streamlining visual reviews, helping to ship consistent and polished user interfaces. All right, now let's look at app Percy's full page screenshot feature. This is especially useful when testing mobile apps with long scrollable screens, where capturing only the visible areas isn't enough. So instead of manually checking different sections of your screen, ERSI automatically scrolls through your app captures multiple screenshots and stitches them together into one seamless full page image. This ensures UI bugs are detected across the entire screen, not just the visible portion. Before we dive into the code, let's take a quick look at a few optional parameters you can use to customize full page screenshots. So you could do things like screen lengths Set the maximum number of screen lengths App purses should scroll. The default value is 4 scrollable XPath. This allows you to specify the XPath of the scrollable element in the app. You have the scrollable id, which allows you to define the accessibility ID of the scrollable element. So let's try doing this. Enabling a full page screenshot in Python In a typical test script, App Percy captures only visible screens. But enabling the full page screenshot is easy. Just pass the parameter fullpage equal true when capturing the Percy screenshot method. This tells App Percy to automatically scroll down and capture the entire screen in one go. Let's look at the results. We've already run a test, so let's jump over to the App Percy dashboard to review the results. As you can see, the entire page has been captured, not just the internal viewport, and this makes it a whole bunch easier to review and spot visual changes through the entire UI bathing shifts. In the future builds, App Percy will automatically highlight the differences, making it really easy to catch issues before they reach production. Right now let's explore App Percy's bring your own screenshot feature. This is a real powerful way to upload pre captured screenshots for visual testing, especially useful when working with handheld devices where screenshots are often taken manually. First, download the script provided by App Percy. This automates the process of sending your images to the appersi dashboard. Once downloaded, organize your screenshots into folders, grouping them by device and test scenario inside your project. Create a DOT resources/directory and in this let's add a subfolder for each device you're testing on. Each of these folders should contain the screenshot and device JSON file that defines device specific metadata. Now let's walk through the code. This script defines a mock driver function to simulate an Appium driver, including details like device name, OS version, screen size, status, bar height, navigation bar height, etc. It also includes an upload all function. This reads the dot resources directory, fetches the device info, and uploads each screenshot to App Percy using the Percy screenshot method. Pretty cool, right? Let's check out another really cool feature, and that's the Diff highlighter. So a common challenge in UI development is spotting every visual change between builds, and that's where Percy's Diff highlighter comes in. And I think this really makes the differences crystal clear. The Diff highlighter works by showing a static bar next to your new image, clearly marking the areas that have changed. No need to zoom in or toggle overlays. The differences are visible at a glance. Now let's take a look at a build in Percy. Here we'll see the Diff highlighter in action, showcasing a side by side comparison of snapshots from two builds. The Diff highlighter visually marks the changes, making it easy to identify exactly where updates have occurred instantly and effortlessly. With browserstack Percy Diff highlighter spotting UI changes is faster, easier and a lot more accurate than doing it manually, trust me. Next up, we're going to explore how App Percy allows you to group snapshots by test case name, a feature that brings greater clarity and control to your Visual Testing Workflows when running automated tests, especially across multiple functional flows, it can be difficult to track which snapshot belongs to which scenario. Grouping snapshots to test case names solves this problem by letting you assign each snapshot to a specific test case. This keeps your build results neatly organized and much easier to review. To use this feature, pass the test case name as part of the snapshot command. This doesn't just label a snapshot, it tells Parsee to group it correctly on the dashboard. For example, when testing the login screen, tag your snapshot with the test case name like login. This ensures all related snapshots are grouped together. If you skip tagging the snapshot, it will automatically fall under the generic Other category. This small but important step helps immensely during reviews, especially for large builds with a ton of screenshots. So once your snapshots are uploaded, firstly allows you to group them in two ways using the group snapshots by filter similar diffs which cluster screenshots that show the same visual changes. This is helpful when debugging repeated visual issues and test cases which group snapshots under the test case name you defined Anything without a defined label appears under Other, making it easy to identify and update ungrouped snapshots. So to access this, head on over to your Percy project and open a build. At the top of the Build screen, you'll see a dropdown for group snapshots by select test cases to switch views. Now, snapshots will be reorganized into collapsible sections based on their test case names, making it easy to review one flow at a time. The build screen will also show the number of test cases and their status, whether they've changed, unchanged or missing. Each test case is clickable, so you can easily dive into individual scenarios. You can also filter or search by name, status or label to quickly find exactly what you need. This is really useful when working on large projects or trying to pinpoint regressions inside a specific test case. You also have access to its history. Click the History link to open a timeline of the previous builds for this test case. You'll see which builds included it, what the snapshot looked like, and whether it passed or failed. A great way to track visual changes over time. All right, now let's talk about how snapshot comparisons work. Firstly, compare snapshots against the last approved version within a test case. For example, if a Snapshot appears in build 1 in build 3, but is missing in build 2, Hersey will still compare build 3 directly with build 1, ensuring accurate validation. This avoids a lot of false positives just because a snapshot skipped an immediate build. So in summary, grouping snapshots by test case names give your team a structured, scalable way to track UI changes, especially when testing complex apps with multiple user flows. It keeps your results clean, your debugging faster, and your visual reviews more focused. So let's see how to use BrowserStack app Percy's ignore regions feature to make your visual test more reliable and efficient. And this is especially helpful when dealing with elements that frequently change, like timestamps, dates, ads, or user specific content, which can otherwise cause unnecessary test failures or false positives. So you might be asking, why would you use Ignore Regions? Well, instead of reviewing irrelevant changes after every test run, Ignore Regions lets you define areas in your snapshots that should be excluded from visual comparisons. So this assures only actual UI changes are detected, keeping your test results clean, stable and meaningful. So let's head on over to the App Percy Dashboard and see this feature in action. So here we have a snapshot from one of our test builds. To mark a region we want to ignore, click the Ignore Regions button located above the snapshot. This switches App Percy into Edit mode, where you can draw and adjust boxes around any dynamic element. This marked region will be excluded from future comparisons, helping reduce false positives in individual tests. Once you're done defining the Ignore areas, click the Save button, then choose whether you want to apply these changes only to the current branch or across all branches of your project. By using the Ignore regions, your tests focus only on meaningful UI updates. This improves the accuracy of your visual reviews, reduces the noise, and helps your team ship confidently, woke and distracted by irrelevant changes. There's also a second method for browser stacks app Percy's Ignore Dynamic Element feature that you can use within your test scripts. This method can help you make your visual tests more stable and reliable. This is really helpful for elements that change frequently, like loading indicators, search suggestions, progress bars, or animated banners which might otherwise trigger false positives in your visual tests. So AppParsey offers multiple methods to ignore these unstable elements directly in your test code. One way is using XPath. You can specify the XPath of the dynamic element you want app Percy to ignore. This is flexible and works well when IDs aren't available. If your app is using proper accessibility identifiers, this is a much more stable way to ignore elements. Just pass the ID directly to App Percy. If you don't have this, you can also use pixel coordinates. If an element doesn't have a unique selector or id, you can fall back to pixel based regions by specifying the coordinates of the area you want to exclude. You can also use element references. You can also pass the actual reference of an element from your script, ensuring App Percy skips that part during visual comparisons. So some examples of this use case is ignoring a search field, and let's see how this looks in a real example when we exclude a search input field during screenshot capture. So in this test script, we'll define the search field as an ignore region. After interacting with it like entering text or dismissing the keyboard, App Percy will exclude this element from the visual comparison. Reviewing the results on app Percy Dashboard is easy to do. So let's now head on over to the App Percy Dashboard. I ran a build just a few minutes ago and as you can see, the search input field is successfully ignored even though its contents change during the test. This keeps our test results clean, allowing only meaningful UI updates to be flagged. And by using these different techniques to ignore dynamic elements, as you can see, you can really fine tune your visual testing and reduce noise from irrelevant changes, keeping your test accurate, stable and actionable. And last up is a really cool App Percy feature to help boost performance by optimizing image sizes. All right, so let's look at how app Hersi boosts Dashboard performance using the new image optimization feature. Percy has introduced an image optimization option that reduces image sizes by up to 50%. This results in faster loading of review pages. A more responsive Dashboard experience Improved efficiency when reviewing builds by streamlining data loads, you get a smoother workflow. Faster navigation across your builds helps you increase your productivity. The steps to enable image optimizations are Log into Percy, Click on your profile icon. From the dropdown, select performance in the performance settings, locate the view, optimize image, toggle and switch it on. Even with optimization on, you could still view original images by pressing the Q key or clicking on the Show Original link. The setting is applied at the profile level, not individual projects. Disabling this feature may slow down build processing times Image comparisons Always use original images Optimize images Adjust for better dashboard performance so let's walk through this feature, Click the profile icon, navigate to performance settings, toggle View optimized images on Once enabled, your Dashboard loads faster on your view pages. Toggle between optimize and original images as needed, and that's how you can enhance your build review experience using the image optimization in App Percy. All right, before we go, I almost forgot to mention some tips on how you can stabilize your test. So let's walk through some Key aspects of stabilizing screenshots for native apps Using App Percy Stabilizing screenshots is important to avoid unnecessary visual diffs in your build. Percy currently doesn't support pausing animations or handling dynamic content automatically, but you can use the Ignore Region feature on Percy Review Screen to mark dynamic areas, for example Spinners. This will ensure such areas are ignored in future visual comparisons. Device Local differences can affect data formats, languages, currency the solution is to use Ignore Regions in Percy. Leveraging Appium's local and language capabilities can help you stabilize across tests. Refer to Percy's documentation for guidance on setting up locale. Appium also allows setting screenshot quality to when launching a new iOS session, use the screenshot quality capabilities. For example 0 equals high fewer artifacts 1 equals medium default 2 equals low set to zero to really reduce compression artifacts for visual tests, Screenshots taken early can capture loading states in animations. The solution Avoid sleep as much as possible. Use Appium's Wait for command to show the app is fully loaded before capturing to stabilize your visual tests. Use Ignore regions by Dynamic Content, Set locale language and screenshot quality where applicable. And the last tip is to use Wait for app states to always capture consistent screenshots. All right, so hopefully this help you understand how App Percity can really help you in your day to day work. If you're a developer or tester and you're doing anything with visual comparisons, App Percy's base plan is absolutely free to use, so there's no reason why you shouldn't check it out and see how it can enhance your end user app experience drastically. With the app Percy powered by Visual AI features and you find this all using the special link down below. Try for yourself and let me know your thoughts. And as always, test everything and keep the good cheers.