Enterprise Testing
Combine API and UI Testing for Seamless Workflows
Integrate API and UI test cases to streamline your testing and ensure accurate data flows between backend and frontend workflows. In this tutorial, you'll fetch data through an API test and use that data to drive your UI login flow.
Start by opening your test suite and preparing the login flow you want to automate.
Add a new step at the beginning of your existing test case by searching for and selecting Call REST API.
Enter your test API endpoint URL in the designated field.
Change the request type to POST.
Under Headers, set the header name to Content-Type and the value to application/json.
Fill in your payload with the necessary data. Set the step to store the response in a variable called `response`. Use status validation to check that you receive a 200 status code.
Execute the API request. Once complete, review the response, which contains fields like username, email, first name, last name, gender, image URL, and access token—all ready for use.
Now, move to your UI test case steps for the login flow. Instead of hard-coding test credentials, dynamically reference API values. Update the username field with `${response.body.email}`.
Click Update to apply the changes. For the password field, use `${response.body.lastName}` since the password isn't in the response.
Click Run to execute your combined test case. Watch as the fields are filled with API data and the login button is clicked.
If the credentials are incorrect, you'll see an invalid login message. Wait for execution to complete.
For detailed results, click the Report button. Inspect sections for API request details, response body, and status code.
Review the REST API data, including access token, refresh token, and user info. Find all request and response information in this report.
Combining API and UI test cases allows for real-world, data-driven flows that improve test reliability. Leverage this approach to keep your UI tests aligned with dynamic API responses.
Last updated