Quick Start Tutorial

How To Launch Screenster Visual Testing

After signing up at our Portal download and install Screenster Server to your local server or a Windows VM (yes, the server has to be Windows for now because we wanted native support for Internet Explorer, but Linux server is in the works). You and other users can use any OS and device to connect to Screenster server.

Open Screenster server home page in your browser using http://server-host:7070. Use the Portal credentials to sign in.

Let’s record your first automated test. To make it a little interesting let’s do it for Wikipedia.

  1. Click on ‘Create a Project’ in Screenster.
  2. Click on ‘Record a Test’ specifying URL http://en.wikipedia.org.
  3. Click on Chrome when you are prompted to select a browser. Don’t worry, you will be able to run the same test in any browser :-)
  4. Type “Codeless test automation” into the search input and press Enter. Screenster is recording every click and input you do as a test step. After a few seconds you should see the target wiki page.
  5. Save the test by clicking disk icon in upper left corner. You are done!

You have recorded a test case and captured its visual baseline. Baseline is a set of screenshots representing the page state after the action. It will be used for comparison with results of future runs.

Wiki Baseline

Screenster will prompt you to re-run the test to detect dynamic areas. This is useful to exclude parts of the page that are unimportant or expected to change with every run. Click ‘Yes’ to run this test again. After it finishes, you will see the result for each step: red color means failure because the screenshot just captured did not match the prototype from the baseline.

Click on the failed step (the first one in your test) to view the comparison results. Parts of page that didn’t match the baseline are highlighted with red rectangles. There are two such areas on Wikipedia’s main page: counters of published articles at the top and at the bottom. They change all the time and now their latest values differ from those captured during recording. We know they will continue changing so it is better to ignore both in order to prevent false test failures.

wiki main page differences

Click to edit the test, then click on each counter area and click on Ignore button. The red line disappears and the step is now green. We are in business :-)

Check out steps #2 and #3, they are also green. Click on each of them and take a look at the screenshots: the Ignore Areas you’ve added at the previous step are displayed on them as well because it is still the same page. You did not have to add them at each step because Screenster did that for you!

Wiki Ignore All Green

Now let us edit the page which is opened at Step #4 (you need to be logged in to Wikipedia in order to do that). Click on ‘Edit’ near the name of the Reviewers section and replace the name in the last line by your name.

Now run your visual test again in Chrome. The last step is red now. Click on it to view the screenshot and its areas encircled with red.

Wiki New Change Red

Let us assume that the change is valid and the current article version is correct. The new screenshot must be approved to baseline to serve as a new expected visual state. Click to edit the test, then click ‘Approve step to baseline’. The step is green and you are a rockstar :-)

At this point you are all done! You are dangerous enough to go and automate CSS and visual regression testing for simple and complex applications.

But there’s more to learn so check out the following sections about other cool Screenster features or watch a video about automating visual regression testing of Gmail interface.



Please visit the Release History page to check what is new and what has been improved in your current Screenster version.



 

Want to try Screenster on the cloud?

Try Online


 

WordPress Image Lightbox Plugin