Add network validation
Validate that network requests were executed as expected
The network validation step allows you to validate your network requests. It is a predefined validation step that receives an array (networkRequests) of objects (see table below). This step enables you to run JavaScript code on the networkRequests array.
This step can run only in ‘extension’ run mode with either Chrome or Edge Chromium.
Network Validation
The following objects (in the networkRequests array) are available to validate:
Object | Property |
---|---|
URL | The request URL. |
Source | The page that generated the URL. |
Method | The request method. (e.g. GET, POST, PUT, etc.) |
Start time | The Unix time (ms) when the request started loading. |
End time | The Unix time (ms) when the request finished loading. |
Tab number | The tab that was the source of the request. |
Status code | The response status code of the request. |
Status text | The response status text, corresponding to the status code. |
Is blocked | Indicates if the request was blocked. true = blocked false = not blocked |
Block reason | The reason the request was blocked, if any. (e.g. ad blocker, request failure, origin, CORS, etc.) |
Is done | Indicates if the request might still be pending. true = done false = pending |
Type | The type of data the response contains. (e.g. XHR, document, Image etc.) (from Chrome) |
Response size | The total size of the response (encoded, including the headers) in bytes. |
Protocol | The network protocol. (e.g. h2, http/1.1) (from Chrome) |
To add an Add network validation step:
- Hover over the (arrow symbol) where you want to add the step.
The action options are displayed.
- Click on the “M” (Testim predefined steps).
The Predefined steps menu opens.
- Click on Validations.
The Validations menu expands.
- Scroll down through the menu and select Add network validation.
Alternatively, you can use the search box at the top of the menu to search for Add network validation.
The Add Step window is shown.
- In the Name the new step field, enter a (meaningful) name for this step.
- If this is a shared step to be made available to reuse in this or other tests, keep the box next to Shared step selected (default), and choose a folder from the Select shared step folder list where you want this step stored. Otherwise, deselect the checkbox.
For more information about shared steps, see Groups. - Click Create Step.
The function editor opens, and the Properties panel opens on the right-hand side.
- In the Properties panel, in the Description field, optionally edit the description of this step. The default description is “Run network validation”.
- Define the parameters you will need for your step as follows:
a. In the Properties panel, click the + PARAMS button.
b. JS parameter: If you would like to add a JavaScript parameter, select JS from the dropdown list and type in the JavaScript parameter.
c. HTML parameter: If you would like to define an HTML element as a parameter, select HTML from the dropdown list. The browser opens, displaying the relevant webpage for this step. Do the following:- In the AUT window, hover your mouse on the relevant element and then click on it to select it. The selected element is shown in the Target Element box in the Properties pane. If you would like to view, replace or adjust the settings for the selected element, use the procedures described in Editing Target Element Properties.
d. The selected element is automatically named “param” or “element” (depending on whether you chose a JS parameter or HTML element). To assign a relevant name to the parameter/element, click on the edit icon and enter the desired name.
- Optionally fill in the following Properties:
- When this step fails – Specify what to do if this step fails.
- When to run step – Specify conditions for when to run the step. For more information, see Conditions.
- Override timeout – Allows you to override the default time lapse setting which causes Testim to register a fail for a test step, and specify a different time lapse value (in milliseconds).
- In the function text box, type in the desired JavaScript code. If you have defined parameters, you can refer to those parameters in your JavaScript code.
If you are using DOM selectors other than HTML parameters (e.g. jQuery), then empty arrays are truthy, so you need to use
$(<query>).length
instead of$(<query>)
.
- Click the back arrow to return to the main Editor window.
If you opened your AUT to define an HTML element as a parameter, click on the Toggle Breakpoint button to remove the breakpoint.
The step is created.
Network Validation Examples
Validate all the image requests
Example Code:
function validateRequestStatuscode(req){
//Get status code
const statusCode = req.statusCode.toString();
//Check if we got an error
const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
//If we got an error fail the step
if(badReq){
throw new Error(`assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`);
}
}
console.table(networkRequests)
const imageCalls = networkRequests.filter(call => call.type == "Image");
imageCalls.forEach(validateRequestStatuscode)
Validate a single request
Example Code:
if(networkRequests.length == 0){
throw new Error('No requests were made during the time of the test')
}
function validateRequestStatuscode(req){
//Get status code
const statusCode = req.statusCode.toString();
//Check if we got an error
const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
//If we got an error fail the step
if(badReq){
throw new Error(`assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`);
}
return true
}
//Filter the source of the request
function filterReqestsBySource(source,req){
const reqSource = req.source
if(source === reqSource) return true
return false
}
//find a single request by it's url and check if they are all valid
const singleReq = networkRequests.find(item => item.url == 'http://demo.testim.io/bundle.css')
if(!singleReq){
throw new Error('Request was not found')
}
return validateRequestStatuscode(singleReq)
Validate all requests have passed
Example Code:
function validateRequestStatuscode(req){
//Get status code
const statusCode = req.statusCode.toString();
//Check if we got an error
const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
//If we got an error fail the step
if(badReq){
throw new Error(`assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`);
}
}
//Check all the requests and see if they are all valid
networkRequests.forEach(validateRequestStatuscode)
return true
Validate max time of call
Example Code:
const callDur = networkRequests.map(call => call.endTime - call.startTime)
const isOverMax = callDur.some(time => time > maxTimeInMS)
if(isOverMax) throw new Error(`Some calls were over ${maxTimeInMS}MS`)
Example Parameter:
Name | Type | Value |
---|---|---|
maxTimeInMS | JavaScript | {the maximum number of milliseconds allowed for the network call before the step fails} |
Updated about 2 months ago