Testing with page interaction

Screenshots with page interactions will have one or more icons next to them as shown below in a screenshot collection. You can hover over each icon to see the sequence of interactions attempted on that page. Screenshots with interactions will be grouped together with their “static” counterparts.

Interaction display

Similarly, the visual testing report will also display the interaction icons next to the items that were tested.

Interaction test

Tips and best practices

Since page interactions are still experimental, we suggest that you follow some of the best practices to achieve desired testing results.

Run test screenshots

After you initially configure the page interactions, it will be helpful to run a screenshot collection to see if the screenshots are taken correctly with the interactions defined.

Error log

Check the logs associated with the screenshot collection to see if Trakr encountered any issues attempting to perform the interactions. (Tip: if your project includes multiple breakpoints, you might run into issues with page interactions since CSS selectors can be different for desktop/mobile breakpoint)

Updating the interaction set

Although you can update your interaction set at any time (e.g. add more interaction, reordering event/selectors), it’s best to finalize the configuration in the first run.

For example, in the visual test below, the screenshot created initially (on the left) had only one interaction defined. However, we added a 500 ms wait in the interaction set and created the second screenshot (on the right).

When a visual test is created, Trakr will compare the screenshot taken with the same interaction set. In this example, a small difference is detected because of the new interaction added.

Update interaction set