How to test APIs in an end to end testing flow in front-end application?

Question

We have encountered a problem in our application, that sometimes specific flows in our application break due to the lack of request data or mismatch in the API contract.

We have been using Nightwatch Js for end to end flow testing.

So my problem statement is the following:

We need a way to check whether the service calls made from the application have the required data for successful data retrieval from the APIs.

So, there will be a configuration for each service calls (The data structure of the request needed for that specific service call and the same for the expected response), and when the end to end flow testing ( Browser automated testing ) is going on, each specified network call will be checked with the earlier mentioned configuration to determine it's success or failure and is the reason being any mismatch or absence of data from fronend.

Also, it should report it in a proper way in files. It will be really great if there is any way that we can do it in Nightwatch itself , or there is any framework for this specific use-case .

Answer 1

Nightwatch as a selenium driver isn't suited to test API calls. I would suggest using Frisby.js in conjunction with Nightwatch. As it's designed to be an API testing framework. You can define expected requests and expected response formats.

frisby.get('http://jsonplaceholder.typicode.com/posts')
      .expect('status', 200)
      .expect('jsonTypes', '*', {
        userId: Joi.number(),
        id: Joi.number(),
        title: Joi.string(),
        body: Joi.string()
      })

...

frisby
  .post('http://api.example.com/files', { title: "foo", body: "bar" })
  .expect('status', 200)

It supports HTTP get, post, put, and del methods.

https://www.frisbyjs.com/nested-tests.html

https://github.com/vlucas/frisby