Timing & Ignoring Tips

Below are some tips to help ensure Screener captures snapshots consistently, reducing timing differences caused by animations, asynchronous loading of data, carousels, etc. Also, below is a list of options for ignoring areas from being compared by Screener, by ignoring at Test Group, Page or State levels.


  1. Timing Tips (for Screener Recorder)
    1. Wait for Element
    2. Wait for Visible
    3. Delay before Taking Screenshot
    4. Execute Client-Side JS

  2. Ignoring Options
    1. Ignoring via Test Group
    2. Ignoring via Recorder
    3. Ignoring via Webdriver

  3. Validation Options

 


1.a Wait for Element

Using the Screener Recorder, you can wait for elements to exist before proceeding to the next step. This is useful for scenarios where content is loaded after the page loads, such as with Ajax calls.

To use, simply add the step type "wait for element", enter a css selector to the element(s) you would like to ensure exist, and then click Add Step.

 


1.b Wait for Visible

The above "wait for element" step type can also be used to wait for not only the existence of an element in the DOM, but that the element is also visible.

To use, simply add the step type "wait for element", enter a css selector to the element(s) you would like to find, and then append a ":visible" pseudo-class to the end of your css selector.

 


1.c Delay Before Taking Screenshot

Using the Screener Recorder, you can add a delay before taking a screenshot. This is useful for scenarios such as waiting for an animation to complete.

To use, simply add the number of milliseconds to wait in the Screenshot step. This field is optional.

 


1.d Execute Client-Side JS

Using the Screener Recorder, you can execute custom client-side JavaScript code to interact with your application-under-test. This is useful for interacting with custom widgets you may have on your website, and recording interactions which cannot otherwise be created using the Recorder.

To use, simply add the step type "execute script", enter the JS code you would like executed, and then click Add Step.

The example below uses jQuery to pause a carousel, and ensure the carousel has a particular index selected.

 


2.a Ignoring Areas across a Test Group

You can specificy areas for Screener to ignore across an entire Test Group. This is the easiest way to add ignores, and is the most maintainable because it keeps your ignores in one central location.

To use, simply add a comma-delimited list of css selectors to ignore in the Edit Test Group dialog:

 


2.b Ignoring Areas using the Screener Recorder

You can specificy areas for Screener to ignore within your Screener Recorder script. This provides much more control over when a particular area should be ignored, as this step can be added anywhere in your script. The actual ignoring does not happen until a screenshot takes place.

To use, simply add the step type "ignore", enter a css selector to the element(s) to ignore, and then click Add Step.

 


2.c Ignoring Areas in Functional Tests

When integrating Screener into your Functional Tests, you can specify areas to ignore across the test, or on a specific UI state.

Additional information, syntax and examples can be found in the Functional Tests Integration docs.

 


3. Validation Options

You can specifify what types of validation Screener performs on a Test Group by enabling/disabling validation options. This feature allows you to disable content comparison in a locale-to-locale test for example.

To use, select the "Set Validation Options" checkbox in the Add Browser dialog, and select yes or no for each type of validation option:

When integrating Screener into your Functional Tests, you can find additional information on how to configure validation options in the Functional Tests Integration docs.