Scriptworks Logo

GraphQL - Single Value Response Validation

10 May 2021

This article covers creating a GraphQL Query and validating the response using Scriptworks.

Introduction

As we covered what GraphQL is and how it works in our previous article, let’s try an exercise to validate the response received from a GraphQL API. 

First, I will demonstrate the exercise we need to perform to automate the Validation of a Single response received from a GraphQL API using Scriptworks, followed by practically demonstrating the Automation through Drag and Drop of the relevant Blocks present in Scriptworks for achieving it.

Note - Here, We are using https://counties.trevorblades.com to practice GraphQL queries and response validation.  

Exercise

1) Navigate to https://countries.trevorblades.com/

Navigate to GraphQL Practice WebSite

2) Write a GraphQL query on the left-hand side portion to generate responses.

GraphQL Query written in left side

3) Observe the response received on the right-hand side.

Practical Demonstration

We will now cover below the Steps to Perform the above Exercise and validate the response using the Visual Programming/Low code test design canvas in Scriptworks:

Pre-requisite: Users should be able to login to Scriptworks via their Credentials, and his Scriptworks Client should be up and running. 

To know more about Scriptworks Client and Selenium Standalone Server, please follow this Article

1) Open Scriptworks on your system with your credentials and open the project to perform the Automated validations on a GraphQL API response.

Open Project MyTest

2) Now click on the Block symbol present on the left side panel and then click on getting started 

BlockSymbol → Getting Started → API Test

As we know, we are going to initiate an API test. So Drag and Drop “API Test” on Canvas After clicking on the Getting Started link.

Getting Started link should be clicked

API Test to Get Started

Putting API Test Block into the Canvas

3) Now, we will use the comment block to let others know what we will perform. For that, we are going to click on the search text box and write comments and hit return.

Search → Comment → Drag and Drop to Canvas

put your cursor in search box

Put Comment Block into the Canvas

4) Now, we will drag and drop some basic blocks required for a GraphQL API to request the resource. 

For GraphQL API Request, we need four basic things from Scriptworks.

  1. GraphQL Call Block
  2. URI Block
  3. GraphQL Query Block
  4. Response Block 

We searched for the comment block in step 3. Similarly, we have to do this for the required blocks and drag and drop them to the canvas.

  1. Search → GraphQL Call → Drag and Drop to Canvas
  2. Search → URI → Drag and Drop to Canvas
  3. Search → GraphQL Query → Drag and Drop to Canvas
  4. Search → get Response → Drag and Drop to Canvas

Demonstrating Drag and Drop of GraphQL Call Block to Canvas

Search GraphQL in Search box

Block GraphQL is inside the Canvas

Demonstrating Drag and Drop of URI Block into Canvas  

Searching URI on Left Pannel

Put URI Block Into Canvas

In the URI Block Enter “https://countries.trevorblades.com/

URI Entered in URI Block

Demonstrating Drag and Drop of GraphQL Query Block into Canvas

Searching GraphQL Query Block in Left Panel

Putting GraphQL Query Block into the Canvas

Now Enter the Graph QL query inside the GraphQL query block, for this exercise we are using the following query:

{country(code:"AT") 
  {name}
}

Entering graphql query inside the block

OR

Scriptworks provides you the great feature of adding a multiline block that can be expanded to show the query in a formatted way. Let’s see that as well:

Click on Block symbol → Click on Input Values Link → Choose Multiline block → Drag and drop to Canvas.

Select multi line block from left panel

Put multiline block in Canvas

Expand Multiline Block

Demonstrating Drag and Drop of get response Block into Canvas

5) Let’s give it a dry run and see what we are receiving in the response after the run.

In the above screenshot, we can see what request we have sent to GraphQL API through GraphQL query with the kind of request headers that have been passed.

Response Details with Response Headers

In the above screenshot, we can observe responses from the GraphQL API in the Response Body, plus we also get information on the Response Time of the API with some other parameters.

We are done with GraphQL Request and Response Blocks. What about Automatically Validating the Response? Let’s look at it from Step 6 Onwards.

6) Drag comment to let others know what we are going to do now. And for that, follow Step 3 Above.

Search → Comment → Drag and Drop to Canvas

comments block added for Validation purposes

7) Now, to validate the response, or we can say in technical terms, i.e., to Assert the API response received. Drag the Assert block multiple times for the number of Assertions required, put it in Canvas, and fill it with information you wish to assert from the GraphQL API response.

Search → Assert → Drag and Drop to Canvas

Assert Search in left panel

Putting Assert Block into Canvas

As GraphQL API response is in JSON, we need to drag a block that can handle JSON response readily available under the API - JSON/XML Handling category in the left side panel. 

JSON/XML Handling → Extract Block → Drag and Drop to Canvas

JSON Schema Block

We need what part of the response? Of course, we need a response body. So search for "response" in the search box and pick the response body block and drag it into the canvas.

Search → Response → Drag and Drop Response Body into Canvas

Validating the response

8) Now, the final thing is a Test Run. Make sure you have followed the prerequisite mentioned above before the Test Run. Make sure you can see Green Symbol before clicking on the play icon. 

Finally Pass

That’s how we can validate a GraphQL API response in Scriptworks.

Scriptworks logo
© Copyright 2024 | Scriptworks is part of Odin Technology Ltd, a company registered in England no. 03735083