A trace is an automated use case test that is runnable in a real browser. It is also a representation of how a human being would use a graphical user interface.
More specifically, a trace is a visual automated test that makes sure all the critical features of your web app are working from the user’s point of view. It tests that a user would be able to complete the defined series of interactions on your website: that the page is rendered, elements are visible and interactable, and buttons and links change the UI as expected when interacted with. It also checks that explicitly marked elements and content are visible on your page at desired times.
Example: Signup Trace
Signup is an important feature on most websites, so it functions as a good example case. A signup trace tests that a user can open and fill your signup form and submit it. The trace effectively tests that the form is rendered, the expected form fields exist and are visible, and the submit button is visible.
Your signup trace fails if any of these problems occur:
- The “user” could not navigate to the signup form (a call to action link is broken)
- The signup form is not rendered at all
- Some of the form fields do not exist
- Some of the form fields are not visible/editable
- The submit button does not work (the explicit check we added does not find the expected content after user would click submit)
- The UI (and/or backend server) is too slow
If none of the above happen and the trace is able to execute all steps, the trace passes and you’re good to go.
You can also add an explicit check to make sure the user sees the application in “logged in” state after clicking submit. It does this by checking for some content that appears on the screen after a successful signup. If your signup requires an email confirmation, you can also test that a user will receive the email and that the verification link in the email works. See tutorial for testing registration for detailed instructions.
For more info on how to create traces, see tutorials for creating your first trace and testing registration.
Other typical problems that a Trace can detect
- Javascript errors: In web apps that rely heavily on javascript, the user interface will typically be negatively affected by a bug in the javascript. A trace will fail if the UI misbehaves in ways that prevent the expected interaction.
- Backend errors: If the backend server can’t answer to queries (due to backend bugs or network problems), the user interface is negatively affected. The trace fails if it can’t interact with the UI as expected.
- 3rd party integration errors: Many websites use 3rd party widgets (such as Facebook integration). If they fail to load or are broken, a trace that relies on them working fails.
What a Trace does not detect
A trace doesn’t detect unexpected things that happen in your UI that do not affect what it tries to accomplish, for example an error message in the footer that doesn’t prevent the user from signing up. It also doesn’t check that the layout remains pixel perfect.
