Get your setup working faster. Join our Discord for optimisation tips from elite testers.Join our Discord
Synchronous comparison results
Learn Percy’s synchronous visual comparison for immediate result verification.
Percy processes visual comparisons asynchronously by default. This allows you to view the snapshot or comparison results only upon the completion of the build on the Percy dashboard or by polling the snapshot API to determine whether the snapshot has finished processing. This process excels in fast processing and supports maximum parallelization.
If you want to immediately incorporate the visual comparison results into your functional tests upon detecting a visual change, the default asynchronous setup in Percy might be a bit challenging. Not to worry though, Percy’s got a solution with the synchronous comparison results option.
With the synchronous comparison results option, you can wait for each snapshot to be processed individually. This means you get the response in your test script as soon as Percy finishes processing each snapshot. This allows you to actively monitor visual comparison results in real-time, and fulfills the desire to flag visual changes and mark their functional tests as failed.
You can use synchronous comparison results option using PercySDK with Percy Web or Percy with Automate. Choose Percy if you want to perform visual tests solely on the newest browsers; choose Automate if you want to run visual tests on a range of desktop, mobile, and browser combinations.
To establish this integration, choose the appropriate option and refer to the following section accordingly:
Currently, the synchronous comparison results feature is exclusively supported using the Percy SDK on Selenium. If you are looking for support on other frameworks, contact us.
Percy on Automate supports this feature on both Selenium and Appium.
Prerequisites
Before you start, ensure that you have the following:
@percy/cli version 1.28.0 and higher
Project token is set to Full-access
Synchronous comparison results workflow
Set up Percy project and ensure that builds are actively running by utilizing the percySnapshot() method.
Enable synchronous comparison results during screenshot capture by setting the sync parameter to true.
```javascript
// Capture the comparison result returned by the synchronous snapshot
const response = await percySnapshot(driver, name, { sync: true });
// Access the comparison data from the response
console.log(response["dashboard-urls"]["current-snapshot"]); // URL to view the snapshot comparison
console.log(response.status); // Status of the snapshot comparison
```
```java
Map<String, Object> options = new HashMap<>();
options.put("sync", true);
// Capture the comparison result returned by the synchronous snapshot
Map<String, Object> response = percy.snapshot(driver, name, options);
// Access the comparison data from the response
Map<String, Object> dashboardUrls = (Map<String, Object>) response.get("dashboard-urls");
String snapshotUrl = (String) dashboardUrls.get("current-snapshot"); // URL to view the snapshot comparison
String status = (String) response.get("status"); // Snapshot comparison status
```
```python
# Capture the comparison result returned by the synchronous snapshot
response = percy_snapshot(driver, name, sync=True)
# Access the comparison data from the response
print(response['dashboard-urls']['current-snapshot']) # URL to view the snapshot comparison
print(response['status']) # Snapshot comparison status
```
```csharp
// Capture the comparison result returned by the synchronous snapshot.
var response = (System.Collections.Generic.IDictionary<string, object>)Percy.Snapshot(
driver,
"Snapshot 1",
new { sync = true }
);
// Access the documented response fields.
Console.WriteLine(response["status"]); // Snapshot status
if (response.TryGetValue("dashboard-urls", out var dashboardUrls) &&
dashboardUrls is System.Collections.Generic.IDictionary<string, object> urls &&
urls.TryGetValue("snapshot", out var snapshotUrl))
{
Console.WriteLine(snapshotUrl); // URL to view the snapshot comparison
}
```
Run the test script, and the command will return the object.
Wait for the response to finish, and when it’s done, the object gives you the comparison results of individual snapshots. Use these results to decide if your functional test passes or fails.
Currently, the synchronous comparison results feature is exclusively supported using the Percy SDK on Selenium. If you are looking for support on other frameworks, contact us.
Percy on Automate supports this feature on both Selenium and Appium.
Prerequisites
Before you start, ensure that you have the following:
@percy/cli version 1.28.0 and higher
Project token is set to Full-access
Synchronous comparison results workflow
Set up Percy project and ensure that builds are actively running by utilizing the percyScreenshot() method.
Enable synchronous comparison results during screenshot capture by setting the sync parameter to true.
```javascript
// Capture the comparison result returned by the synchronous screenshot
const response = await percyScreenshot(driver, name, { sync: true });
// Access the comparison data from the response
console.log(response["dashboard-urls"]["current-snapshot"]); // URL to view the snapshot comparison
console.log(response.status); // Status of the snapshot comparison
```
```java
Map<String, Object> options = new HashMap<>();
options.put("sync", true);
// Capture the comparison result returned by the synchronous screenshot
Map<String, Object> response = percy.screenshot(driver, name, options);
// Access the comparison data from the response
Map<String, Object> dashboardUrls = (Map<String, Object>) response.get("dashboard-urls");
String snapshotUrl = (String) dashboardUrls.get("current-snapshot"); // URL to view the snapshot comparison
String status = (String) response.get("status"); // Screenshot comparison status
```
```python
# Capture the comparison result returned by the synchronous screenshot
response = percy_screenshot(driver, name, sync=True)
# Access the comparison data from the response
print(response['dashboard-urls']['current-snapshot']) # URL to view the snapshot comparison
print(response['status']) # Screenshot comparison status
```
```csharp
// Capture the comparison result returned by the synchronous screenshot.
var response = (System.Collections.Generic.IDictionary<string, object>)Percy.Screenshot(
driver,
"Snapshot 1",
new { sync = true }
);
// Access the documented response fields.
Console.WriteLine(response["status"]); // Screenshot status
if (response.TryGetValue("dashboard-urls", out var dashboardUrls) &&
dashboardUrls is System.Collections.Generic.IDictionary<string, object> urls &&
urls.TryGetValue("current-snapshot", out var snapshotUrl))
{
Console.WriteLine(snapshotUrl); // URL to view the snapshot comparison
}
```
Run the test script, and the command will return the object.
Wait for the response to finish, and when it’s done, the object gives you the comparison results of individual snapshots. Use these results to decide if your functional test passes or fails.
Join our Discord