Test user flows

You can use SpeedCurve to test pages that are part of a complex user flow, for example going through the checkout process of an e-commerce site.

The easy way: Create a standalone page

By far the easiest way to test pages that are part of user flows is to create a stand-alone page for the sole purpose of performance testing. This could be a checkout page with some hard-coded items in the shopping cart, or a test user account page that doesn't require authentication.

The main benefit to this approach is that it doesn't require writing complex synthetic scripts. The downside is that you need to invest some time in building the pages.

The other way: Use synthetic scripting to simulate user input

You can use test scripts to simulate a user navigating through your website. You can read about how to add scripts to your URLs here: Adding test scripts to URLs.

Below are some example scripts that various user flows. They have been annotated with comments to explain what each step is doing. Before using these examples, it's important to note a couple of things:

• While these scripts support commands like click, setValue, and submitForm, we recommend using the exec command to run JavaScript on the page. This is because it is easy to debug exec commands by running the JavaScript directly in your browser console.

• When debugging scripts, we recommend removing the logData commands and running the scripts so that you can see where exactly the script is failing.

Note: Despite loading multiple pages, these user flow scripts will only count as one check from your SpeedCurve budget. 

Example 1: Simulate simple navigation 

// Turn data logging off to ensure that no performance metrics are
// collected until we navigate to the final page.
logData  0

// Navigate to the first page of the user flow. In this case, the
// index page of the SpeedCurve blog.
navigate https://speedcurve.com/blog/

// Optional: clear the screen if you want visual metrics like Start Render
// to be based on the final page's rendering progress
exec document.body.style.display = 'none'

// Turn data logging back on. Performance metrics will be collected
// from this point onwards.
logData   1

// Navigate to the latest blog post.
execAndWait    document.querySelector('.post-title a').click()

Example 2: Simulate a checkout process

// Turn data logging off to ensure that no performance metrics are
// collected until we navigate to the final page.
logData 0

// Navigate to the first page of the user flow. In this case, a
// product page of a made-up website.
navigate   https://shop.speedcurve.com/products/1234

// Add an item to the user's cart
exec  document.querySelector('.add-to-cart').click()

// Go to the cart page
navigate    https://shop.speedcurve.com/cart

// Begin the checkout process
exec   document.querySelector('.checkout-as-guest').click()

// You can add more steps for completing the user flow here.
// We recommend completing user actions with the "exec" command
// because it is easier to debug in your own browser.

// Optional: clear the screen if you want visual metrics like Start Render
// to be based on the final page's rendering progress
exec document.body.style.display = 'none'

// Turn data logging back on. Performance metrics will be collected
// from this point onwards.
logData   1

// Navigate to the checkout page.
execAndWait   document.querySelector('.checkout-submit').click()

Example 3: Simulate Ajax or SPA navigation

This follows essentially the same pattern as Example 1, as it loads the starting page and then clicks on a navigation link.

// Turn data logging off to ensure that no performance metrics are
// collected until we navigate to the final page.
logData  0

// Navigate to the first page of the user flow. In this case, the
// index page of the SpeedCurve blog.
navigate https://speedcurve.com/blog/

// Optional: clear the screen if you want visual metrics like Start Render
// to be based on the final page's rendering progress
exec document.body.style.display = 'none'

// Turn data logging back on. Performance metrics will be collected
// from this point onwards.
logData   1

// Load the next page with Ajax. 
execAndWait  document.querySelector('.next-page').click();

Important caveat: Browser cache

Unscripted tests in SpeedCurve load a page with a completely empty cache. When you run a scripted test that simulates user flow, the browser cache will be filled as the browser performs actions and loads different pages. This is often the desired behaviour, since a real user would also have a full cache.

In some cases, however, you may still want to test the performance of a page with an empty cache. In these cases, you can use the clearCache command to clear the browser cache at any point. Note that the clearCache command is only supported in Chrome.