Automate Visual Tests on Browsers without Web Drivers

Automated UI and visual testing ensure web app quality, but become challenging on browsers without WebDriver support, like Brave and DuckDuckGo. Modern tools now enable seamless automation on these browsers, overcoming compatibility issues and expanding test coverage.

This article explores how to automate visual tests on browsers without native WebDriver support, addressing key challenges and solutions for reliable UI validation.

What is Visual Test Automation?

Visual Test Automation is the process of automatically capturing screenshots of a web application’s user interface and comparing them against a baseline to detect any unintended visual changes.

Unlike functional tests that verify behavior, visual tests focus on how the application looks to users, ensuring layouts, colors, fonts, and other design elements remain consistent across updates.

This approach helps teams catch UI regressions early, maintain design integrity, and deliver a flawless user experience across different browsers and devices.

Automating these visual tests reliably can be challenging, especially on browsers that lack native WebDriver support, which presents core challenges in the testing process.

Understanding the Challenge

Automating UI tests typically relies on web drivers, like Selenium WebDriver, that control browsers programmatically to simulate user actions and verify interface behavior. However, not all browsers offer official WebDriver support.

Privacy-focused browsers such as DuckDuckGo and Brave often lack dedicated web drivers, making direct UI automation difficult or impossible.

While it’s possible to automate and validate interactions at the network level by intercepting and manipulating traffic, this approach only tests backend responses and cannot verify the actual user interface.

As a result, teams face challenges in ensuring visual and functional consistency on these browsers without reliable UI-level automation tools.

A Possible Solution

Some privacy-focused browsers offer extensions compatible with mainstream browsers such as Chrome, Firefox, Safari, and Edge. For example, in Chrome, extensions can be managed via chrome://extensions/. This allows running tests by installing the relevant privacy browser extension on supported browsers.

Consider the following scenario where Selenium with TestNG (in Java) is used alongside Percy by BrowserStack on MacOS to automate visual testing on a privacy browser.

Step 1: Install the Privacy Browser extension appropriate for your current browser. Locate and download the extension, then enable it.

Step 2: Locate the /Extensions/ folder on your Mac to find the extension file path. This can be done via Spotlight Search (Command + Space) by searching for “Extensions.” Once located, copy the extension file path.

Step 3: In your automation framework, use the copied path to load the Privacy Browser extension in the automated browser instance. For example, in the BrowserFactory class, use ChromeOptions to pass the extension path:

private static ChromeDriver getChromeInstance() {
    

ChromeOptions options = new ChromeOptions();
    options.addArguments("--load-extension=/Users/UserName/Library/Application Support/Google/Chrome/Default/Extensions/bkdgflcldnnnapblkhphbgpggdiikppg/2023.7.13_0");
    return new ChromeDriver(options);


}

Step 4: Within your SpecsBaseClass, instantiate the Chrome driver from the BrowserFactory class and set the driver instance:

driver.set(BrowserFactory.createInstance("chrome"));
DriverFactory.getInstance().setDriver(driver.get());
(driver.get()).navigate().to("https://YourSite.org/");

Step 5: Once you have done this, you can refresh the page (to properly load the extension) by using:

(driver.get()).navigate().refresh();

Or navigate through tabs after loading the extension:

ArrayList<String> tabs = new ArrayList<>((driver.get()).getWindowHandles());

(driver.get()).switchTo().window(tabs.get(0));

As a note, refreshing the tab where your script runs will do it, but there are tests where you need to navigate to other tabs or the original tab to keep the focus. For these scenarios, the above can help.

Step 6: And that’s it! Now you can run a sample test.

@Test
public void ShopCheck() {

    homepage.CheckShop();


}

This will run your test, open the target URL, install the extension, refresh your page to properly allocate the extension, and run the script in your Privacy Browser.

The Visual Testing aspect

With the wide variety of browsers, devices, and operating systems in use today, maintaining consistent visual quality in web applications is increasingly complex. Minor UI changes can lead to unexpected visual issues that impact user experience and brand perception.

Visual testing helps tackle this complexity by automatically capturing and comparing screenshots to spot visual differences caused by code updates or dynamic content. Percy by BrowserStack is a leading visual testing platform that streamlines this process, enabling teams to quickly detect and fix visual regressions and deliver polished, reliable interfaces across all platforms. For instance:

Source : AKC

Can you tell the difference? How long did it take you? You may miss changes on similar pictures, image changes, or simply dynamic content, but Percy will highlight these for you in just a few seconds:

Source : AKC

Percy offers an easy-to-set starting guide here https://docs.percy.io/docs/getting-started. Please take a look before continuing.

Try Percy for free

Going back, what you will find when running visual tests on Privacy Browsers, like the ones mentioned above, are missing elements, ads, forms, banners, and JS. Overall third-party vendors’ content may be blocked due to their privacy settings.

For instance, in the following example, the snapshot from the left was taken using a Privacy Browser extension, and the one on the right is a regular Chrome instance. You can tell just by looking into these snapshots the number of elements that changed, moved, or are not even showing:

Source : AKC

Source : AKC

In some cases, you will be able to notice some differences, but you may miss others, and this is where Percy comes into play, especially in this type of scenario where you may get a lot of missing content.

As a note, you can always change how visual changes appear on your builds snapshots. This can be useful based on your testing approach. This can be done from your Project Settings Menu > Advanced Options section:

Also, if you have dynamic elements in your website, you can ignore certain regions of your website by using the Ignore Region Functionality.

One of the best cool features of this framework is how easy it is to change from browser to browser and mobile views. There’s no need for additional scripts or changes. Just a single click on the top right corner and that’s about it.

Talk to an Expert

Conclusion

Visual testing should prioritize critical areas,  such as high-risk pages or sections identified through network traffic, rather than indiscriminately validating every page. This targeted strategy improves efficiency and is easily managed using Percy’s intelligent matching algorithms and advanced features.

Ultimately, testing is more than just finding bugs; it’s about delivering solutions, improving products and services, and fostering a collaborative effort to continuously raise quality and user satisfaction.