API steps in UI tests

With API steps, you can make calls to an API within the context of a browser or mobile test. Depending on your testing goals, API steps can serve different purposes, including the following:

• Extract and store API response values as variables for use in subsequent test steps
• Validate that the UI is aligned with the backend
• Seed test data to quickly get the application in a specific state and bypass UI setup

This article explains how to create API steps from the API Step Editor in the mabl Trainer:

• Formatting requests
• Validating responses
• Creating variables from the response
• Setting cookies from the response

Formatting requests

To format a request in a training session, open the API Step Editor - + (Add step) > API request - and add the request method and endpoint.

Referencing variables

To reference existing variables in your request, use mabl variable syntax: {{@variableName}}. 

For example, if the endpoint is https://api.example.com/users, you could store the base API URL - https://api.example.com - in a variable {{@API_URL}} and enter {{@API_URL}}/users as the endpoint.

Authentication

The API Step Editor includes two supported auth types:

• Basic auth
• Bearer token

If the API requires custom headers, such as x-api-key, set the Authorization to None and manually add the key-value pair in the Headers section.

Request bodies

If you add a body to an API request, mabl sends the content exactly as it appears in the text area. Don't forget to add the correct Content-Type header for requests that include request bodies.

Supported formats include the following:

Content-Type	Format	Example
application/json	Standard JSON object or array	{"id": 123, "status": "active"}
application/x-www-form-urlencoded	Keys and values joined by =  Pairs separated by & Special characters must be URL-encoded.	name=John+Doe&email={{@user_email}}
text/plain	Raw, unformatted text	This is some text.
text/xml	Full XML structure, including tags.

Validating responses

When you send a request in the API Step Editor, mabl adds a default assertion that the response status is 200. To change this or add additional validations, click on the Assertions tab in the API Step Editor.

Supported assertion types include:

• Status - validate that the request returns the expected response status, such as 200, 201, 401.
• Header - validate information from the response headers using JSON path. For example, content-type.
• Body (json) - validate information from the JSON response body using JSON path. For example, user.id or items[0].name.
• Body (text) - validate a non-JSON response body. This type of assertion works best with “contains” assertions.

To preview the assertion, click on the arrow to transfer the response value.

Behavior on failure

By default, assertions are marked Fail immediately, which means that if the assertion fails, the test stops running and is marked “failed”. If you want the test to continue running even if the assertion fails, update the behavior on failure in the Advanced tab of the API Step Editor.

Other failure options include the following:

• Fail at end of test - if the assertion fails, the test continues running and is marked “failed” at the end.
• Continue on failure & mark warning - if the assertion fails, the step still passes and is marked with a warning.

Creating variables from the response

If you want to use API response data in a subsequent test step, create a variable in the Variables tab. After saving the API step, you can use the new variable just like any other variable in the mabl Trainer.

Variables may be created from one of the following sources:

• Response - store the entire API response in a variable
• Status - store the response status in a variable.
• Header - store the value of a specific response header in a variable.
• Body (json) - Use JSON path to store a specific value in a variable. For example, user.id or items[0].name.
• Body (text) - store the response body as text in a variable.

Setting cookies from the response (browser only)

If the API response includes a Set-Cookie header, you may automatically apply those cookies to the browser session by checking the Set response cookies in browser checkbox in the Advanced section.