Page interaction is a powerful feature in Trakr that can be used to greatly expand visual testing for your web-based projects. This walkthrough will show you how to set up page interaction for an advanced web-app project in Trakr.

The project

In this example, we are testing a web-based app called Lndr (http://www.lndr.co). Our visual test for this project will focus on different screens and pages behind the user login for the web-app.

As we can see that some of the pages the user can interact with the page in a variety of ways (switch tabs, expanding sections, etc).

Some of the pages also contain personal information such as First name, Last name, Email. We strongly recommend that as part of your project setup, you mask these fields to exclude these elements from visual testing. (Learn more)

Our Trakr project setup

For the project setup in Trakr, we have enabled user login in order for us to take screenshots of the web-app behind the user login. (Learn more about user login)

 

We also masked areas where personal information appears in the app. (Learn more about masking elements)

We created a few screenshot collections to make sure our project is set up correctly including the ability to login and masking of the personal information.

Setting up page interactions

Before we start to add page interactions, it is also recommended to use a web browser extension such as “Get Unique CSS Selector” for google chrome. It will make the process of finding the page element much easier.

You can use the browser extension to locate the page element that triggers the interaction and copy its CSS selector.

Once you have copied the CSS selector of the trigger element for the page interaction, you can paste it into your project settings in Trakr

Finally, you simply repeat the process to setup page interactions for all the desired URIs in your project. When you create screenshot collections in the future,  you will see Trakr will take the screenshot of the page after the specified interactions.

Tips and best practices

1. It’s always a good idea to add some wait time after triggering a page interaction. The amount of wait time depends on the length of the transition effect or load time for the interaction to complete.
2. The order of events in your interaction is important if interacting with one item depending on another item to be triggered first. (E.g. opening a sub-menu inside of a menu)
3. Consider testing the mobile view of the project separately from the desktop since sometimes the CSS selector might be different between responsive breakpoints.