How to get POST API response in Cypress? - cypress

I am working on a project to automate using Cypress. In this project, I need to create an order for a patient. When I click on the submit button it will call the following API https://ibis-dev.droicelabs.us/api/dispenser/orders/ using the POST method and return one unique order that I want to get.
I have registered cy.intercept on top of my test like this:
cy.intercept({
method: 'POST',
url: 'https://ibis-dev.droicelabs.us/api/dispenser/orders/',
}).as('ordersCall')
And when the submit button is clicked I have used:
cy.clickOnElementUsingXpath(practicePageSelectors.submit_CreateOrderButton); // click on submit button
cy.wait('#ordersCall')
.its('response.body')
.then((body) => {
// parsing might be not needed always, depends on the api response
const bodyData = JSON.parse(body)
cy.log(bodyData)
})
But it returns the following error:
Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: ordersCall. No request ever occurred in cy.wait('#ordersCall')
Can anyone help me to get an orderID? Is there any other way to get the orderID?

After checking the provided images in the question comments, the error is as follows: Your intercept command in your Cypress test is waiting for requests to be made to your DEV environment, but looking at your last image from the console in the Cypress test runner your requests are being made to the QA environment.
So you either have to adjust your Interceptor like this:
cy.intercept({
method: 'POST',
url: 'https://ibis-qa.droicelabs.us/api/dispenser/orders/',
}).as('ordersCall')
or think about using relative paths for API calls to be independent from the environment:
cy.intercept({
method: 'POST',
url: '/api/dispenser/orders/',
}).as('ordersCall')

Related

Cypress verify API request

I want to verify if the API request contains what it needs to contain, but not sure what I am doing wrong as I have always this error:
cy.wait() timed out waiting 5000ms for the 1st request to the route: apiCheck. No request ever occurred.
I have a link in the main menu, after clicking that link the new page opens and API call is iniciated immediately http://localhost:8081/currencies
So in Cypress I have this:
cy.get('ul li[title="Menu item"]>a').click();
cy.intercept({
method: 'GET',
url: '/currencies',
}).as('apiCheck')
cy.wait('#apiCheck').then((interception) => {
expect(interception.response.statusCode).to.equal(200);
expect(interception.response.body[0]).to.have.property('geographyName', 'EMEA')
})
As you can see from Cypress test runner screenshot, the request is there and has status 200, but still it says no request ever occurred.
ah, well, seems I need to call cy.intercept before the link is clicked, then it seems working.

Can i test cypress to capture signature from network tools

When i click on some url it triggers one signature url under Developer tools->network tools.
Can i use cypress to test anything which is triggered in Developer tools.
Did you take a look at Intercept command? You can grab just about any network request with it.
Most basic form:
cy.intercept({
method: 'GET',
url: '/users*',
hostname: 'localhost',
}).as('usersRequest')
cy.wait('#usersRequest')
.then(interception => {
// interception has similar data to Chrome devtools
})

Stubbing network request with cypress

I am trying to mock a server in some UI tests that I am writing using cypress. I am probably making some basic mistake and might not be understanding how cypress is stubbing requests. Here is an example app that I copied straight from expressjs -
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello from /'));
app.get('/user', (req, res) => res.send('Hello from /user'));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
And then wrote a simple test using cypress -
describe('Stubbed request', () => {
it('sends whatever response you want', () => {
cy.visit('http://localhost:3000/');
cy.server();
cy.route({
method: 'GET',
url: '/user',
response: [],
}).as('bar');
cy.visit('http://localhost:3000/user'); // cy.request() has same behavior
cy.wait('#bar');
})
})
I was hoping that instead of 'Hello from user/', I should get an empty response since I have stubbed it with cypress. Even cy.wait fails with message - "CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'bar'. No request ever occurred." I am obviously doing something wrong. Can someone please help me understand what am I doing wrong? Thanks in advance.
You can only stub/spy XHR requests that are created within your app. cy.visit will never make such a xhr request. neither you can stub a request made with cy.request because thise requests are intended to work indepentent from all active network stubs.
This means, you are able to stub /users but in your test you can make a real request to that route by using cy.request.
In your case, you must deliver a static html site with express that e.g. contains a button. And after the button is clicked, you can execute e.g. $.get(' /user'). Then this request will be stubbed.
Currently I am not at home so I can not provide a runnable example. But with the hints above you should be able to do this. Let me know if you need further assistance.
Also you can take a look at cypress XHR API call validation in test cases . Here I have provided a runnable example fir stubbing and spying.

JQuery .ajax request does not hit the server

I am making an ajax request using JQuery that looks like this:
var data = createXMLdata();
$.ajax({
url: 'http://localhost:8080/foo/bar',
type: "PUT",
data: data,
processData: false,
contentType: "application/text",
error: function(xhr, status, error) {
alert("Error: " + status);
},
success: function() {
alert("Success!");
}
});
When the code executes, I get the success alert, but the service is never executed on the server!
Here's some more data:
If I make the same request using a separate REST client, the service is executed correctly
If I shut down the server (nothing is running) so that hitting that URL gives me a 404, I still get a success message.
I have tried replacing the data with "foo". This works from the REST client, but gives the same result from the code.
Any ideas are greatly appreciated!
The documentation about .ajax()'s type attribute says:
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
So probably your browser does not support PUT and the data is sent via POST instead (and therefore not recognized by your service).
Use Firebug or similar to find out which method is used.
One idea to make it working:
Send the data using POST but add an additional field e.g. __http_method=PUT. On the server side, your service has to recognize this and perform the PUT functionality.
This might be not the nicest solution but it is also used by other frameworks I have encountered (e.g. symfony for PHP).
PUT isn't supported by all browsers
Nick Craver made a comment on my question:
Is the page you're running this in served from port 8080?
It turns out this led to me solving the problem. When both the app and the service were hosted on the same server (and port), the problem went away.
This post suggests that if I comment answers the question, and the commenter does not re-post as an answer, I am to post my own answer and accept it. Nick, if you return to post this as an answer, I will accept it over my own.

Extjs to call a RESTful webservice

I am trying to make a RESTful webservice call using Extjs. Below is the code i am using:
Ext.Ajax.request({ url: incomingURL ,
method: 'POST',
params: {param1:p1, param2:p2},
success: function(responseObject){
var obj = Ext.decode(responseObject.responseText);
alert(obj);
},
failure: function(responseObject){
var obj = Ext.decode(responseObject.responseText);
alert(obj);
}
});
but it does not work, the request is sent using OPTIONS method instead of POST.
I also tried to do the same thing using below code but result is the same:
var conn = new Ext.data.Connection();
conn.request({
url: incomingURL,
method: 'POST',
params: {param1:p1, param2:p2},
success: function(responseObject)
{
Ext.Msg.alert('Status', 'success');
},
failure: function(responseObject)
{
Ext.Msg.alert('Status', 'Failure');
}
});
But when i tried to do the same thing using basic ajax call ( using the browser objects directly i.e. XMLHttpRequest() or ActiveXObject("Microsoft.XMLHTTP")) it works fine and i get the response as expected.
Can anyone please help me, as i am not able to understand what i am doing wrong with extjs ajax call?
You can't make a standard AJAX call between domains. The URL for Ext.Ajax.request should be a relative one (relative to the script's origin).
If you want to do cross-domain calls, use a ScriptTagProxy or such.
The problem is exactly because of the reason ob1 and Chuck Hinson described.
I have an RESTful service, wich is running on Tomcat.
And i made a static client(no deployed to Tomcat) using ExtJs with Json reader.
I just made an html page with ExtJs integrated consuming REST service like url: http://localhost:8080/service/invoices/
And all the time ExtJs was making OPTIONS request, not GET or POST even if i was setting them as being used methods. The problem is this security feature, because Client is not the part of same application and i am doing AJAX call between domains.
As soon as i put my client to my Web application and deployed to Tomcat and started using relative calls it started working.
if you don't want cross-domain request, please remove the website prefix 'http://website' from propery url of ajax proxy.

Resources