I'm working on testing an OpenID Connect service, using Code and Implicit Flow. I would really like to be able to access the messages I get back from the service, especially the 303 See Other message which has the ID Token.
If someone can advise on how to get to response messages I would really appreciate it. Since the services exposes a HTML login page what happens is a
cy.get("#loginButton").click()
so I don't send a cy.request() and that is because I want to test login using the front-end.
You should leverage cy.route, how it works:
before cy.visit you need to add cy.server(), it allows Cypress to intercept every request
you add an alias to the login request
cy.route({
method: "POST",
url: '/auth/token' // this is just an example, replace it with a part of the real URL called to log in the user
}).as("route_login"); // that's the alias, we'll use in soon
right after the cy.get("#loginButton").click() command, you can wait for the login request to happen
cy.wait("#route_login").then(xhr => {
// you can read the full response from `xhr.response.body`
cy.log(JSON.stringify(xhr.response.body));
});
your final test should be something like
it("Test description", () => {
cy.server();
cy.visit("YOUR_PAGE_URL");
cy.route({
method: "POST",
url: '/auth/token'
}).as("route_login");
cy.get("#loginButton").click();
cy.wait("#route_login").then(xhr => {
// you can read the full response from `xhr.response.body`
cy.log(JSON.stringify(xhr.response.body));
});
});
Let me know if you need more help 😉
cy.server() and cy.route() are deprecated in Cypress 6.x
Use cy.intercept() instead:
cy.intercept('POST', '/organization', (req) => {
expect(req.body).to.include('Acme Company')
})
Your tests can intercept, modify and wait on any type of HTTP request originating from your app.
Docs: https://docs.cypress.io/api/commands/intercept.html (with examples)
Related
When a browser requests an image from the server, the call is getting picked up by an API controller in the back end. There, a authorization check must be done before returning the image in order to check if the request is allowed or not.
So I need to add the authorization header and when searching for the best solution, I found this article: https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/ and I was mostly intereseted in the solution number 4 which uses a Service Worker.
I made my own implementation, I registered a serviceWorker:
if ('serviceWorker' in navigator) {
console.log("serviceWorker active");
window.addEventListener('load', onLoad);
}
else {
console.log("serviceWorker not active");
}
function onLoad() {
console.log("onLoad is called");
var scope = {
scope: '/api/imagesgateway/'
};
navigator.serviceWorker.register('/Scripts/ServiceWorker/imageInterceptor.js', scope)
.then(registration => console.log("ServiceWorker registration successful with scope: ", registration.scope))
.catch(error => console.error("ServiceWorker registration failed: ", error));
}
and this is in my imageInterceptor:
self.addEventListener('fetch', event => {
console.log("fetch event triggered");
event.respondWith(
fetch(event.request, {
mode: 'cors',
credentials: 'include',
header: {
'Authorization': 'Bearer ...'
}
})
)
});
When I run my application, I see in my console that the registration seems to be successfully executed as I see the console.logs printed (ServiceWorker active, onLoad is called and successful registration with correct scope: https://localhost:44332/api/imagesgateway/
But when I load an image (https://localhost:44332/api/imagesgateway/...) via the gateway, I still get a 400 and when put a breakpoint on the backend I see that the authentication header is still null. Also, I don't see "fetch event triggered" message in my console. In another article it is stated that I can see the registered service workers via this setting: chrome://inspect/#service-workers but I don't see my worker there either.
My question is: Why isn't the authorization header added? Is it because, although the registration seems to go successfully, this isn't actually the case and therefore I don't see the worker in inspect#service-workers either?
You're not seeing fetch event triggered in the browser console because your Service Worker script isn't allowed to intercept the image requests. This is because your Service Worker script is located in a directory outside the scope of the requests you're interested in.
In order to intercept requests that handle resources at
/api/imagesgateway/
the SW script needs to be located in either
/, /api/, or /api/imagesgateway/. It cannot be located in /some/other/directory/service-worker.js.
This is the reason that your Service Worker registers successfully! There is no probelm in registering the SW. The problem lies in what it can do.
More info: Understanding Service Worker scope
I have a React component that mimics the "link preview" feature that most modern social media sites have. You type in a link and it fetches the image, title, etc...
I do this by having the React component make an AJAX call back to my server to fetch the URL preview data.
While it's fetching I show an intermediate "loading" state (i.e. some loading icon or spinning wheel)
The relevant React snippet looks like
this.setState({ isLoadingAttachment: true })
return $.ajax({
type: "GET",
url: some_url,
dataType: "json",
contentType: "application/json",
}).success(function(response){
// Succesful! Do Success stuff
component.setState({ isLoadingAttachment: false })
}).error(function(response) {
// Uh oh! Handle failure stuff
component.setState({ isLoadingAttachment: false })
});
Note how the isLoadingAttachment state variable is only valid for a brief second while the server is doing the fetching. Both the success and error scenarios immediately disable it.
I'd like to test some functionality during my "loading" state with my Capybara feature specs. I've mocked all the web calls and the data to be returned by the server, but it all happens so quickly that it passes through the "loading" state before I can even run any expect().. statement on it. I also purposely don't call wait_for_ajax so the page will go ahead without waiting for the ajax, but it's still too fast.
Lastly I also tried purposefully delaying the server call by 1.0 second, but that didn't work either. I assume because the whole thing is single threaded somehow?
# `foo` is an arbitrary method called during the server-side execution
allow_any_instance_of(MyController).
to receive(:foo) { sleep(1.0) }.and_call_original
Any thoughts on how I could do this?
Thanks!
Capybara starts up the app server in a different thread than the tests, however if you're using the default Capybara.server setting you may have issues with your app calling back to itself since it uses webrick by default. Instead you should specify Capybara.server = :puma. Beyond that, mocking responses is generally a bad idea in feature specs (which are generally meant to be end-to-end tests) since it means you're not actually testing your apps code the way it would run in production anymore. A better solution is to use something like puffing-billy - https://github.com/oesmith/puffing-billy - to mock web responses outside of your apps code which would allow you to do something like
proxy.stub('https://example.com/proc/').and_return(Proc.new { |params, headers, body|
sleep 2
{ :text => "Your results"}
})
I have a button to start a google hangout, everything works great, now I need to get the url using the
gapi.hangout.getHangoutUrl();
but I since this is a JS on my server, I know is possible to pass this to my app. But I don't know how (AJAX or anything else). I need this, because other user could join to this hangout.
Any suggestion with code would be appreciate
Within your hangout script....
Include jQuery - it's useful for X-browser support.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Get the Hangout URL:
var hoUrl = gapi.hangout.getHangoutUrl();
Get/Post the hangout URL to your server:
var uri = encodeURI(server + '?hoUrl=' + hoUrl);
$.ajax(uri,
{
async: true,
beforeSend: function(request) {
// Any beforesend code goes here, e.g. adding headers.
},
data: data,
error: function(jqhr, status, error){
// Error handling goes here.
},
type: verb,
success: callback
});
Handle the AJAX GET request and do your magic with the hoUrl parameter.
To clarify further:
A URL is formed before the AJAX get request to include a GET parameter, hoUrl, that has the hangout URL in it. Your server just needs to use whatever CGI/parameter parser to retrieve the 'hoUrl' parameter and then do whatever backend magic you want to do with it. Hope that helps to clarify.
I am building a Rails/Javascript application which is supposed to support real-time notifications. JavaScript is:
var chat;
$(document).ready(function(){
chat = $('#chat');
chat.append('mmm');
(function poll(){
$.ajax({ url: "http://localhost:3000/get_messages", success: function(data){
//Update your dashboard gauge
chat.append(data);
}, dataType: "json", complete: poll, timeout: 30000 });
})();
});
The route:
match 'get_messages', to: 'real_time_notifs#get_messages', :via => :get
Here is the controller's method:
def get_messages
# sleep ??? will it stop the whole application?
render :json => ['message body']
end
I want that JavaScript will receive an answer only if there is something to display (for example, new message appeared in database table) without making a whole application to stop. Could you suggest how to organize get_messages method?
I need the solution which will not block the rest of application while waiting.
There are a number of ways to achieve this
Although I don't have huge experience, you should be thinking about it from another perspective (not just sending Ajax poll requests):
SSE's (Server Sent Events)
I'd recommend you use SSE's
The sent updates are not in the usual HTTP scope (uses its own mime type -- text/event-stream), which I believe means they are completely asynchronous (doesn't matter what you're doing in the app etc)
SSE's are basically done through the front-end by deploying a JS listener. This polls the server for any updates, but unlike Ajax, only listens for the text/event-stream mime):
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
alert(event.data);
};
The efficient part is that you can then update this with ActionController::Live::SSE in Rails. I don't have any experience with this, but it basically allows you to send updates via the text/event-stream mime type
WebSockets
Websockets basically open a perpetual connection with your server, allowing you to receive content above the normal HTTP scope
My experience does not extend to "native" websockets (we've successfully used Pusher, and are working on our own websock implementation); but I can say that it's basically a more in-depth version of SSE's
You'll have to use JS to authenticate the client-server connection, and once connected, the browser will listen for updates. I'm not sure about the mime-type for this, but reading up on ActionController::Live will give you some insight into how it works
Either one of these methods will do as you need (only send / receive updates as they are available)
So as recommended I'd like to use RestSharp to handle REST web service. I am developing iOS and Android application and I would love to make PCL that makes requests to the service and just returns parsed results (eg. array of User objects).
So how do I get RestSharp in my PCL, tried NuGet, components are not for PCLs and seriously bad would be to just download source files and copy them in the project, I want to keep some dependency management in place.
What is the best practice? Am I looking at this problem at wrong angle?
RestSharp doesn't support PCLs. I'd suggest checking out PortableRest, or just using a combination of HttpClient and Json.NET.
I use dependency injection so I can support non-PCL JSON parsers. I also plan to give the native HttpClient wrappers from the component store a try. By using non-PCL code you will gain quite a lot in performance compared to Json.NET etc.
Link to source code
Text library has serializer interfaces, Web has the IRestClient.
Modern HTTP Client from the component store.
Below modifications worked for me and will be glad if it works out to you.
Try using modernhttpclient in your PCL. And inAndroid project ensure you have the below packages.
Microsoft.Bcl.Build
Microsoft.Bcl
Microsoft.Net.Http
modernhttpclient
Along with that in application manifest under required permissions give permissions to the below.
Access_Network_State
Access_wifi_state
Internet
Ideally when you try to add Microsoft.Bcl into your Android project targettting monoandroid it will throw out error, so try to add the nuget refrence in the above order.
I developed a really simple REST client to perform Http requests easily. You can check it on my Github repo. The API is really simple:
await new Request<T>()
.SetHttpMethod(HttpMethod.[Post|Put|Get|Delete].Method) //Obligatory
.SetEndpoint("http://www.yourserver.com/profilepic/") //Obligatory
.SetJsonPayload(someJsonObject) //Optional if you're using Get or Delete, Obligatory if you're using Put or Post
.OnSuccess((serverResponse) => {
//Optional action triggered when you have a succesful 200 response from the server
//serverResponse is of type T
})
.OnNoInternetConnection(() =>
{
// Optional action triggered when you try to make a request without internet connetion
})
.OnRequestStarted(() =>
{
// Optional action triggered always as soon as we start making the request i.e. very useful when
// We want to start an UI related action such as showing a ProgressBar or a Spinner.
})
.OnRequestCompleted(() =>
{
// Optional action triggered always when a request finishes, no matter if it finished successufully or
// It failed. It's useful for when you need to finish some UI related action such as hiding a ProgressBar or
// a Spinner.
})
.OnError((exception) =>
{
// Optional action triggered always when something went wrong it can be caused by a server-side error, for
// example a internal server error or for something in the callbacks, for example a NullPointerException.
})
.OnHttpError((httpErrorStatus) =>
{
// Optional action triggered when something when sending a request, for example, the server returned a internal
// server error, a bad request error, an unauthorize error, etc. The httpErrorStatus variable is the error code.
})
.OnBadRequest(() =>
{
// Optional action triggered when the server returned a bad request error.
})
.OnUnauthorize(() =>
{
// Optional action triggered when the server returned an unauthorize error.
})
.OnInternalServerError(() =>
{
// Optional action triggered when the server returned an internal server error.
})
//AND THERE'S A LOT MORE OF CALLBACKS THAT YOU CAN HOOK OF, CHECK THE REQUEST CLASS TO MORE INFO.
.Start();