Using transaction screenshots and waterfalls

You have many tools at your disposal when you use the Test now button. Two of those tools are screenshots and waterfall reports. The tools are an essential part of your script development toolkit, and later for root-cause analysis. Uptrends automatically includes the screenshot and waterfall features free to all users during manual testing. When you use the Test now button, each transaction step generates a waterfall report and a screenshot.

Finding your waterfall reports and screenshots

Screenshots are indispensable when it comes to troubleshooting and debugging transaction errors. You get screenshots automatically when you use the test now button, and Enterprise and Business users get a screenshot on the first confirmed error.

Where are my screenshots and waterfalls while debugging?

You use the Test now button a lot when you’re testing your transaction in development mode. An important feature of the Test now results are the waterfall reports and screenshots. To access these free features, click the Test results available button located at the top of each step after running a manual test.

After clicking the Test results available button, scroll down the page to the Debug information. The report automatically includes the debug details during manual tests.

Click the graphic to access the screenshot or waterfall.

Where are my screenshots and waterfall charts in my reports?

Enterprise and Business users can find their staging and production screenshots in their check detail reports. Navigate to Monitors > Monitor log on the Uptrends menu to see your monitor log.

1. Click to open the Check detail report
2. Locate the Check details section
3. Click the camera or waterfall icon in your step results

Using screenshots for debugging

So that you can see the on-screen result of a step, your test generates a screenshot. The screenshot shows you what the viewport looked like after a successful step or page error. If the action occurs further down the page, you can add a scroll action before the click event.

Study the screenshot to verify:

• Expected content loaded. After a page navigation check for correct content.
• Dynamic content resulting from user input works well. For example, if item selection requires the user to select a color before size options become available to verify that the element populated properly.
• Masked fields work as expected. Is the character formatted correctly?
• Responsive design changes. If your site uses responsive design, you may need to adjust the browser resolution in your monitor settings. By adjusting your browser resolution, you can ensure that you’re getting the correct page layout. For example, if your menu reduces down to a hamburger icon when the browser window gets smaller, you may need to add additional click or hover actions. Check under the monitor’s Advanced tab adjust your browser resolution.

Adding additional screenshots

Sometimes you need other screenshots to get the full story. You can get that story by adding more screenshots along your script’s progression.

Who can add extra screenshots?

Sorry, only Enterprise and Business subscribers can add more screenshots to their steps. If you’re an Enterprise or a Business subscriber, you can add as many screenshots as you would like. Why use more screenshots? Screenshots give you the visual story as experienced by your users. Sometimes capturing that full story means adding more screenshots. For example, you may want to put a screenshot after each input action to verify that dynamic on-screen elements appear and look as expected. Remember, if you use screenshots or waterfalls in staging or production mode, you use monitor credits.

How to add one additional screenshot during testing:

Select the Screenshot checkbox at the top of the step. Uptrends adds a new screenshot action to the step. You can drag the action anywhere in the step progression.

How to add more than one extra screenshot during testing:

1. Click the Add action button
2. Click to select Control: Screenshot
3. Click Select

Uptrends places the screenshot action at the bottom of the step. By using the Add action button, you can add as many screenshots as you would like.

Using waterfall charts for debugging

While in development mode, each step generates a waterfall report. The waterfall report gives you detailed information about the initial page’s load time. You see exactly how long it took to retrieve and process each page element along with the request and response headers. Your waterfall will help you quickly identify problems on the page.

It is one thing to see the page’s load time, but the waterfall breaks down your page load-time performance for every element.

• See the resolve, TCP connect, HTTPS handshake, send, wait, receive, and timeout time for each element. The timings are further explained in the KB article Waterfall timings.
• View the page load progression. It is easy to spot slow and page-blocking elements in the waterfall chart.
• Find failed page elements. You can examine the request and response headers for clues about the failure. For example, you can identify whether a CDN node sent the wrong content or the response was too slow.

See the KB article Waterfall chart for detail on which information the waterfall chart contains.