Skip to main content

Advanced configuration

General Configuration​

Configuring the Server URL​

By default, Eyes-Playwright communicates with the Applitools public Eyes cloud server, located at https://eyesapi.applitools.com.

If you have a dedicated cloud or an on-premise server, you can configure a different Eyes server URL using the following code:

eyes.SetServerUrl("asd");

Configuring a Proxy​

If your company's network requires requests to go through a corporate proxy, you can configure it using the following code:

eyes.SetProxy(new ProxySettings("uri"));
eyes.SetProxy(new ProxySettings(
	"uri",
	1234, // port
	"username",
	"password"
));

Integrating with Functional Tests​

You can integrate an Eyes test with a functional test that you have created in a different system.

Every call to eyes.Open and eyes.Close defines a test in Applitools Eyes, and all the calls to eyes.Check between them are called "steps". To align the test structure in Applitools with your functional test, you should open and close tests in every test call.

For example, when running with NUnit as a test runner:

[SetUp]
public void SetUp() {
    eyes.Open(page, "applitools.com website", "My first Playwright C# test!"); 
}

[TearDown]
public void TearDown() {
    eyes.Close();
}

[Test]
public void Test() {
    // ...
}

Organizing Tests in Batches​

To manage how visual tests are grouped into batches, you can use the following methods:

Method 1: Environment Variable​

Run all the processes that execute Playwright with the same value for APPLITOOLS_BATCH_ID. For example, run tests with Maven with the same randomly generated UUID:

#! Unix based machines:
APPLITOOLS_BATCH_ID=`uuidgen` mvn test

You can control the batch name displayed in the Test Manager, for example:

export APPLITOOLS_BATCH_ID=`uuidgen`
export APPLITOOLS_BATCH_NAME="Login tests"
mvn test

Method 2: Set Batch​

Provide all Eyes instances with the same value for the batch ID across all Eyes instances. For example:

BatchInfo batchInfo = new BatchInfo("name");
batchInfo.SetId("id");
eyes.SetBatch(batchInfo);

Test Configuration​

Test Properties​

You can provide additional information about each test in custom fields, which can then show up in Test Manager in their own column.

This is done by calling setProperties on the configuration, and providing it with an array of properties with the structure {name, value}. For example:

Configuration configuration = eyes.GetConfiguration();
configuration.AddProperty("my custom property", "some value");
eyes.SetConfiguration(configuration);

Test Results​

The results of the test can be consumed as the return value from eyes.close. To create a formatted output string from the TestResults object in Applitools Eyes, you can use the following example code:

public string FormatTestResults(TestResults testResults) {
	return "\n" +
		"Test name: " + testResults.Name + "\n" +
		"Test status: " + testResults.Status + "\n" +
		"URL to results: " + testResults.Url + "\n" +
		"Total number of steps: " + testResults.Steps + "\n" +
		"Number of matching steps: " + testResults.Matches + "\n" +
		"Number of visual diffs: " + testResults.Mismatches + "\n" +
		"Number of missing steps: " + testResults.Missing + "\n" +
		"Display size: " + testResults.HostDisplaySize + "\n" +
		"Steps: " + string.Join(", " , testResults.StepsInfo.Select(stepInfo => stepInfo.Name + " - " + GetStepStatus(stepInfo)));
}

public string GetStepStatus(StepInfo stepInfo) {
	if (stepInfo.IsDifferent) {
		return "Diff";
	} else if (!stepInfo.HasBaselineImage) {
		return "New";
	} else if (!stepInfo.HasCurrentImage) {
		return "Missing";
	} else {
		return "Passed";
	}
}

Side by side images​

You can download an image of the baseline and checkpoint highlighting differences using the following syntax:

result.StepsInfo[0].ApiUrls.SideBySideImage

Stitch Mode​

In Applitools Eyes, when taking a full-page screenshot, the SDK captures multiple screenshots of the viewport at different positions on the page and then combines them into a single image. This process is known as "stitching."

The stitch mode determines how images are pasted together:

  • Scroll stitch mode - This mode simulates scrolling behavior by capturing the viewport screenshot and then scrolling the page to capture additional screenshots at calculated positions. The screenshots are stitched together to create a complete image of the entire page. However, one limitation of this mode is that if the page responds to scroll events and changes its visual appearance, it might result in inconsistencies between the stitched screenshots.

  • CSS stitch mode - In this mode, the page is moved by manipulating the CSS property transform on the HTML element. The SDK changes the translate(x, y) values to capture different portions of the page. This method is not affected by scroll events, making it more reliable in scenarios where the page dynamically adjusts its layout during scrolling.

The default stitch mode is Scroll. To change it:

eyes.StitchMode = StitchModes.CSS;
eyes.StitchMode = StitchModes.Scroll;

Stitch Overlap​

The stitch overlap refers to the length of the intersecting area between two screenshots that are stitched together to create a full-page screenshot. It represents the amount of overlapping pixels between adjacent images. The stitch overlap is particularly useful when dealing with fixed elements, such as a footer, that appear in each sub-screenshot. By setting a stitch overlap larger than the size of the footer, you can ensure that the footer is excluded from each individual screenshot and only appears once at the bottom of the full-page screenshot.

The default stitch overlap is 50 pixels. To change it:

eyes.StitchOverlap = 60;

Match Level​

The match level determines how Eyes compares the checkpoint image with the baseline image.

The following match levels are available:

  • Strict - (Default) Detects changes in text, font, color, graphics, and position of elements. It aims to detect differences that are visible to the human eye while ignoring differences in pixel values that are platform dependent due to the rendering software and hardware.

  • Layout - Identifies changes in various page elements, such as text, images, buttons, and columns, and verifies that the relative positions of these elements are consistent. This match level can detect elements that have appeared, disappeared, or moved. With this match level, Eyes ignores differences in the actual content text and graphics, color, and other style changes. This level is useful for pages with dynamic content, language localization, and cross-environment testing where a single baseline is used for multiple execution environments.

  • Ignore colors - Similar to the strict match level but ignores changes in colors. It is effective when your content is static but the color varies, for example if there are buttons or screen elements that can appear in a variety of colors.

  • Exact - Pixel-to-pixel comparison of the checkpoint and baseline images. It is sensitive to differences such as rendering anomalies that are not visible to the human eye. It is not recommended for ordinary verification purposes.

  • Dynamic - Recognizes defined text patterns such as a date, email address, or URL. For details, see Dynamic text match level

For more information, see How to use Eyes match levels.

The default match level is Strict.

eyes.SetMatchLevel(MatchLevel.Layout);
eyes.Check(Target.Window().Layout());
eyes.Check(Target.Window().Strict());
eyes.Check(Target.Window().IgnoreColors());
eyes.Check(Target.Window().Exact());
eyes.Check(Target.Window().Dynamic());

Ignore Displacements​

Use ignore displacements to hide differences that arise from content whose position on the page has changed. For example, if text is longer in the checkpoint or the size of an image has changed, if IgnoreDisplacements is set to true, unchanged content that has shifted position because of the changed text or image will not be marked as a difference.

The default is false.

For more information, see Hide displacement diffs tool.

To change the match level for the rest of the execution:

var config = eyes.GetConfiguration();
config.SetIgnoreDisplacements(true);
eyes.SetConfiguration(config);

To change the match level for a single checkpoint:

eyes.Check(Target.Window().IgnoreDisplacements());