Test pages that require authentication
How to test pages that require authentication via a login page, HTTP headers, or basic authentication.
To test pages that require authentication, you can use either HTTP basic authentication or synthetic scripts.
HTTP basic authentication
SpeedCurve supports HTTP basic authentication, allowing you to log into a page using a simple username and password. To give SpeedCurve access to the page, click on the site in your Settings. Then click on the padlock icon next to the URL, and add a username and password. The username and password are stored unencrypted so we recommend using a dummy throw away account for testing pages.
Synthetic scripting
Below are some sample scripts that authenticate the browser session in different ways. They have been annotated with comments to explain what each step is doing.
Important: Scripts are tab-delimited. When pasting the example scripts into the script editor, take care to replace any spaces between commands and arguments with tabs.
Submitting a login form
// Turn data logging off to ensure that performance metrics are
// only recorded after we've logged in.
logData 0
// Navigate to the login page
navigate https://speedcurve.com/
// SpeedCurve's login is a modal popup, so click on the "Log In"
// link and wait for the modal to open.
click id=link-login
sleep 1
// Fill in the login form fields and click the button to log in.
setValue id=loginEmail [email protected]
setValue id=loginPassword testpassword
clickAndWait id=loginButton
// Clear the screen so that visual metrics are measured correctly
exec document.body.style.display = 'none'
// Turn data logging back on and navigate to a page that requires
// authentication
logData 1
navigate https://speedcurve.com/dashboard
Note that the commands like setValue
and click
all work by running JavaScript on the page. If you have any issues using those commands, or if you prefer to have more control over the page interaction, you can write the JavaScript yourself by using the exec
command (or execAndWait
if the JavaScript causes a page transition). For example, the script above could be modified to fill in the form with JavaScript:
exec document.querySelector('#loginEmail').value = '[email protected]'
exec document.querySelector('#loginPassword').value = 'testpassword'
execAndWait document.querySelector('#loginButton').click()
Filling in forms that use React
React's event handling can make it difficult to fill in forms programmatically. You can use the following code to fill in inputs within React. Just replace <VALUE>
with the value you want to set:
exec el = document.querySelector('#someInput'); proto = Object.getPrototypeOf(el); set = Object.getOwnPropertyDescriptor(proto, 'value').set; set.call(el, '<VALUE>'); el.dispatchEvent(new Event('input', { bubbles: true }));
Setting authentication cookies
// Set a cookie on the root speedcurve.com path
setCookie https://speedcurve.com/ userid=xxxxxxxxxxxx
// Navigate to the page that requires authentication
navigate https://speedcurve.com/dashboard
Vercel uses JSON Web Tokens for sites that use authentication and these are also sent using Cookies
setCookie https://xxxxx.vercel.app _vercel_jwt=xxxxxxxxxxxx
navigate https://xxxxx.vercel.app
Setting authentication headers
// Add a header to all requests
addHeader my-auth-token: fa501cb80
// Navigate to the page that requires authentication
navigate https://speedcurve.com/dashboard
Note that the header is appended to all outgoing requests. If your page makes any cross-origin requests, the header must be included in the access-control-request-headers
list or the cross-origin requests will fail.
Important caveat: Browser cache
Unscripted tests in SpeedCurve load a page with a completely empty cache; however, 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.
Updated 12 months ago