Basic Topics

Record a new visual test with a baseline

The easiest way to create a test is to use Screenster’s recorder which can be invoked on the project page. Screenster runs a web browser on the server and records your mouse clicks and keyboard input as test steps. Once done, click on ‘Save’ icon and you will see the Confirmation message about a new baseline created. Baseline is a set of screenshots used as correct samples for future runs of this test. After each subsequent test run you get new screenshots which are compared to these samples.

Just recorded

The test steps are the same for all browsers, but a separate baseline is created for each browser because pages look different in different browsers.

Run a visual test and view results

You can run a test from its Project’s details page or go to the test’s history page and launch it there. Screenster will repeat all the actions you have recorded and retrieve new screenshots with the latest results. After the run Screenster compares each of them to the baseline.

If a new screenshot fully matches its baseline, the test step is marked green (successful). If there are any differences, the step is red (failed) and all non-matching areas are highlighted with a red rectangle. Hover your mouse over such an area and see its side-by-side comparison with the same area in the baseline, in a small popup window at the top.

If Screenster is unable to execute a step (e.g. a page which was responsive during recording cannot be opened during current run or the action element is missing) then it has the ‘!’ error sign at its side and you can see the error details after clicking on it.

Test pass fail error

Add ignore regions and view ignore rules

Some areas on your page may be changing with each run, for example 3rd party content such as ads or news. You can tell Screenster to ignore them, so that they would be excluded from comparison with the baseline. Click on ‘Edit test’, then click on an element you wish to ignore. Make sure that the proper area is selected. Sometimes you need to click several times to navigate up the DOM tree to the parent. Once you have finished, click on ‘Ignore this element’, then on ‘Save’. An ignore region has been added!

To see a list of all ignore regions you have added to a test, click on ‘Ignore rules’ button and you will see the complete list of them. You can also click on ‘Ignore rules’ on a project details page to view ignore regions added for all tests in this project.

view ignore rules

Approve changes to baseline

If Screenster detected an expected visual difference because the page has changed you can approve it to the baseline as the new expected screenshot. Just select the step where the difference was detected, click on ‘Edit test’, then click on ‘Approve step to baseline’. Now you have an updated baseline version for this test!

Edit tests

Recorded tests can be edited by adding, deleting and modifying steps. You can do the following changes to each step of your test when you are editing the last run:

  • Click on ‘Ignore step’ to disable visual verification of the screenshot
  • Click on ‘+’ to add a new step before this one
  • Click on ‘x’ to delete this step
  • Click on the pencil button to change parameters of this step such as: name, timeout or text input.

Edit test step

Changing step locator

Screenster allows you to view the CSS locator of each element on a page you are testing and change it in your tests whenever you need. For example, a test step includes a click on the ‘OK’ button and you want to run it with a click on the ‘Cancel’ button. No need to record it anew, just modify the CSS locator in this step: click on the ‘Cancel’ button on the screenshot, copy its locator, go to the step details and paste it instead of the existing CSS. Now, at the next run of this test the ‘Cancel’ button will be clicked.

edit custom CSS

Parameterize tests

There are two ways to parameterize a test. Test can be extended or invoked by another test.

Extending a test creates a new test that has the same test steps, but all input values can be overridden. Invoking another test is done by adding ‘Invoke test with parameters’ step while editing a script.

Import and export

You can export projects and tests as zipped files to your PC. Click on ‘Export Project’ button on a project details page, and an archive with all tests and project settings will be downloaded. Click on ‘Export test’ button on the same page to download an archive with a separate test. Projects and tests can be imported from these archives to another Screenster installation. This is a convenient way to keep backups for your important stuff. Since tests are exported in JSON format they can be version controlled by Git, Subversion or any other source control system.

Report a problem.

send report

Have some issues with Screenster? You can send us a quick report by clicking on ‘Report a problem’ link which is available on any Screenster’s page. By default, you name and contact email are already specified in this form, so all you need to do is to provide a brief description of the problem in the Note field. Click ‘Send’ and Screenster will deliver your report to us together with a copy of your log which should contain information about your problem.

Administration: Notifications page.

Screenster can notify you via email about the results of your test runs. Go to http://localhost:7070/admin/notifications. You need to specify correct SMTP settings, then provide your address(es) and make sure that the Enabled checkbox is filled. Now go to a project, click on ‘Project settings’ and select which notifications you wish to receive for its tests.

Please also check the Advanced Topics page for more information on how it all works!


Want to try Screenster on the cloud?

Try Online

WordPress Image Lightbox Plugin