I have an API automation test suite using Cypress and one of the issue I am facing in one of the test is to validate the response headers.
For some reason, I am not able to read the response headers using Cypress.
The code is below
cy.request({
method:'GET',
url:Cypress.env("Authorisationurl")+tokenId+'&decision=allow&acr_values=1',
followRedirect: false,
headers:{
'Accept': "/*"
}
}).then((response) => {
const rbody = (response.body);
cy.log(response.status)
//THIS GOT ASSERTED TO TRUE
expect(response.status).to.equal(302)
//OPTION1
cy.wrap(response.headers['X-Frame-Options']).then(() => {
return response.headers['X-Frame-Options'];
});
//OPTION2
return response.headers['X-Frame-Options']
//OPTION3
return response.headers
})
None of the above options gives me the header information. Infact I am confused with the order of execution too.
This is my output.
for the following code.
const rbody = (response.body);
cy.log(response.status)
cy.log(response)
expect(response.status).to.equal(302)
cy.log(response.headers)
cy.log(response.headers['X-Frame-Options'])
return response.headers['X-Frame-Options']
Also, not very sure what Object{9} indicates. Can anyone please explain what is happening here.
I am aware of Cypress flow of execution and the code is written in then block as a call back function.
Option 3 is very scary as it gives an error
cy.then() failed because you are mixing up async and sync code.
In your callback function you invoked 1 or more cy commands but then returned a synchronous value.
Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.
You likely forgot to properly chain the cy commands using another cy.then().
The value you synchronously returned was: Object{9}
Can anyone please help me here as in what is the correct way of doing it. I know Cypress is very quick and easy to use but to move away from Selenium, we need to make coding easier for developers with meaningful error message. Object{9} is not very helpful.
Also, Do I need to use Cy.log ? As the sequence of prints is not what I have written in the code. Thanks very much for your time on this.
Please use like this:
JSON.parse(JSON.stringify(response.headers))["X-Frame-Options"];
The "mixing async and sync code" message is basically saying you should keep the .then() callback simple.
But you can chain more than one .then() to run the async and sync code separately.
Use an alias to "return" the value. Since cy.request() is asynchronous, you will need to wait for the value and the alias pattern is the most straight-forward way to do this reliably.
WRT Object{9}, it's the result of the way Cypress logs complex objects.
Don't use cy.log() to debug things, use console.log().
cy.request( ... )
.then(response => {
expect(response.status).to.equal(200) // assert some properties
})
.then(response => response.headers) // convert response to response.headers
.as('headers')
cy.get('#headers')
.then(headers => {
console.log(headers)
})
Since this was originally posted a year ago and Cypress has had many versions since then, the behavior may have changed, however this works in Cypress 11.
You can access the response.headers array as you would normally expect, however the casing of the header name was not as expected, Postman reported the header as X-Frame-Options, but Cypress would only allow me to access it if I used a lower-cased version of the header name (x-frame-options).
cy.request({
url: '<Url>',
method: 'GET',
failOnStatusCode: false
})
.then((response) => {
expect(response.status).to.eq(200);
expect(response.headers["x-frame-options"]).to.equal("SameOrigin");
})
.its('body')
.then((response) => {
// Add your response testing here
});
});
Related
I'm having problem to make my Action resolve the promise.
I've read what looks like the most relevant posts.
Returning Promises from Vuex actions
I want to know when my action is finished, then my component can start doing other stuff.
The problem is, the Action never returns the Promise.
myComponent.vue
methods: {
loadUrls() {
this.$store.dispatch('getUrls').then(result => {
console.log("getUrls result", result)
})
},
vuex.js
actions: {
getUrls() {
console.log("getUrls")
return new Promise((resolve) => {
setTimeout(() => {
console.log("setTimeout in")
resolve("Resolved!")
}, 1000)
})
},
That's my console log:
I've used the "setTimeout" to make as simple as possible the problem. In real life I call an API.
I do not need to rely on the result of this promise. I'm aware about it. I use Vuex as the source of truth, but I need to track when the event in completed.
Thanks in advance =)
SOLVED! It worked after I delete my dist Folder, close VSCode and open a new Chrome instance using the new build local host URL.
Thanks #User-28. I saw his shared code and realised nothing was wrong with my code. Then I start looking at my environment.
My very first code didn't have Promise Resolve in the action. I compiled and I was testing it.
Then I found Returning Promises from Vuex actions which explained how to use the Promise in it. I compiled and I was TRYING to test it. Never success. Somehow the code without the Promise was always there. After clean up Dist folder, Close VS code and use a new Chrome instance, the new code was in place and worked.
I'm still don't know the actual problem, but at least it can keep going forward now.
I'm trying to write an e2e test using Cypress on my Vue app. I want to test if request on form submit returns correct value.
I know i need to use cy.spy. I also know I neet to spy on fetch method but I have no idea which object to tie it to.
From documantation:
The object that has the method to be wrapped.
Which for me would be the component I'm trying to test? I'm not sure if I'm interpreting this argument correctly. Can anyone explain?
EDIT:
My guess is that I need to use methods? But if I try to import them into my test_spec.js I get Cannot find module...
To spy over a response, you can use the route command instead of spy.
https://docs.cypress.io/api/commands/route.html
it('Example Test', function () {
cy.visit('https://stackoverflow.com/');
cy.server(); // cy.server needs to be invoked first in order to use cy.route command
cy.route({
url: `**/your/request/path/**`,
method: 'POST',
onResponse: (xhr) => {
console.log(xhr);
// here you can assert on xhr.response.body values
}
});
});
Although I know this may not be considered as a best practice, but what I want to achieve is to silently delete a record from a database after the same was created throughout UI. In htat way I want to keep our test environment clear as much as possible and reduce the noise of test data.
After my tests create a new record by clicking over the UI, I wait for POST request to finish and then I would like to extract the id from the response (so I can reuse it to silently delete that record by calling the cy.request('DELETE', '/id')).
Here's a sample test I have put on as a showcase. I'm wondering why nothing is logged in this example.
it('GET cypress and log', () => {
cy.server()
.route('**/repos/cypress-io/cypress*')
.as('getSiteInfo');
cy.visit('https://www.cypress.io/dashboard');
cy.get('img[alt="Cypress.io"]')
.click()
.wait('#getSiteInfo')
.then((response) => {
cy.log(response.body)
})
})
As far as I can see from here https://docs.cypress.io/api/commands/wait.html#Alias this should be fine.
your code contains two problems.
First:
The click triggers a new page to be loaded but cypress does not wait until the PageLoad event is raised (because you do not use visit). On my PC the Request takes about 5 seconds until it is triggered after the click. So you should use wait(..., { timeout: 10000 }).
Second:
wait() yields the XHR object, not the response. So your code within then is not correct. Also the body is passed as object. So you should use JSON.stringify() to see the result in the command log.
This code works:
describe("asda", () => {
it('GET cypress and log', () => {
cy.server()
.route('**/repos/cypress-io/cypress*')
.as('getSiteInfo');
cy.visit('https://www.cypress.io/dashboard');
cy
.get('img[alt="Cypress.io"]')
.click()
.wait('#getSiteInfo', { timeout: 20000 })
.then((xhr) => {
cy.log(JSON.stringify(xhr.response.body))
})
})
})
Instead of route and server method, try intercept directly
This question already has answers here:
mocha with nodejs assert hangs/timeouts for assert(false) instead of error
(3 answers)
Closed 5 years ago.
I'm trying to unit test a controller method with mocha + chai + sinon, but I'm struggling to understand how the assertion works with these async methods. Here is my test:
it('should fetch all registered books and send them as json', (done) => {
res.json = sandbox.spy();
const books = [];
BookMock.expects('find').withArgs()
.resolves(books);
booksController.index(req, res, () => {
res.json.should.have.been.calledWith(200, { data: books });
done();
});
});
The problem with this test is that if I change the assertion to expect a 300 instead of 200 parameter, for example, my test will stop (fail) and never call done(), leading to a generic failure which tells nothing more than a 'Test failed because done was never called', which says nothing related to the reason the test failed at all.
If I keep the test like that and my controller method does everything good, the test passes and it's all ok, but if the controller does anything wrong, the test fails and doesn't tell me the reason it failed (which should be "res.json was not called with bla bla bla parameters").
I am also not sure this is the correct way to unit test controller methods, since they don't return a Promise I can't use chai-as-promised or promise chains at all, so I used the next() callback (which always gets called using restify) to make the assertion, that might not be right, so I'm open to a full refactor to make this test the most correct.
Thank you in advance!
Digging a little bit more I've found this answer in other question: https://stackoverflow.com/a/26793989/4233017
So I updated my code and wrapped the assertion in a try/catch, ending up like this:
it('should fetch all registered books and send them as json', (done) => {
res.json = sandbox.spy();
const books = [];
BookMock.expects('find').withArgs()
.resolves(books);
booksController.index(req, res, () => {
try {
res.json.should.have.been.calledWith(200, { data: books });
done();
} catch (e) {
done(e);
}
});
});
Now when the test fails it gives me the correct error message. I could also do it with booleans as the answer says, but I think it's better this way.
Any other solution is still very much appreciated.
I'm new to RxJs and Angular2, and I'm trying to properly handle errors. I've seen some examples with Observables that have onNext, onError and onCompleted events (e.g. here, but all of the Angular2 http examples that I see seem to just use .catch and .map methods, and I'm not sure how that relates to the OnNext/OnError/OnCompleted model. I'm working with the code from here):
let stream = this.http.request(options.url, options)
.catch(error: any) => {
this.errorsSubject.next(error);
return Observable.throw(error);
})
.map(this.unwrapHttpValue)
.catch((error: any) => {
return Observable.throw(this.unwrapHttpError(error));
});
I initially wanted to just make it so that the first .catch and the .map are either/or? (i.e. the .map only runs if the http request is successful), but I'm not sure if that's even possible, and then it was further complicated by my reading the post here where it seems like they may be saying that per this fix, the map method will automatically be skipped if the HTTP code is <200 or >300...? However, that isn't what I'm observing in practice with angular 2.0.0-rc.4...
Many thanks for any assistance!
Think of catch being like typical try and catch code. For an observable, all of the operations will be run in order as if they were in a try block. If there is an error, then processing will jump down to the first catch.
So, if you only want to run the map on success, then you just put it before the catch:
let stream = this.http.request(options.url, options)
.map(this.unwrapHttpValue)
.catch(error: any) => {
this.errorsSubject.next(error);
return Observable.throw(error);
});