Cypress intercept only message with specific body - javascript

I'm kind of new on Cypress intercept, but I am in need of capturing the response to a GET message, but wait for the message which has a response body with a specific value on its body.
For example, I may be receiving two responses to two GET requests, such as these two:
Event: request
cypress_runner.js:190995 Resource type: xhr
cypress_runner.js:190995 Method: GET
cypress_runner.js:190995 Url: https://127.0.0.1/api/users/61a68c4a1d2c5258baece19c?_=1638304841558
cypress_runner.js:190995 Matched `cy.intercept()`: {RouteMatcher: {…}, RouteHandler Type: 'Spy', RouteHandler: undefined, Request: {…}, Response: {…}, …}
cypress_runner.js:190995 Response status code: 200
cypress_runner.js:190995 Response headers: {date: 'Tue, 30 Nov 2021 20:40:43 GMT', Content-Encoding: 'gzip', server: 'nginx', Vary: 'Accept-Encoding', access-control-allow-methods: 'PUT, GET, POST, DELETE, OPTIONS, PATCH', …}
cypress_runner.js:190995 Response body: {"name": "Alice", "description": "Created by Cypress"}
Event: request
cypress_runner.js:190995 Resource type: xhr
cypress_runner.js:190995 Method: GET
cypress_runner.js:190995 Url: https://127.0.0.1/api/users/61a68c4a1d2c5258baece19c?_=1638304841558
cypress_runner.js:190995 Matched `cy.intercept()`: {RouteMatcher: {…}, RouteHandler Type: 'Spy', RouteHandler: undefined, Request: {…}, Response: {…}, …}
cypress_runner.js:190995 Response status code: 200
cypress_runner.js:190995 Response headers: {date: 'Tue, 30 Nov 2021 20:40:43 GMT', Content-Encoding: 'gzip', server: 'nginx', Vary: 'Accept-Encoding', access-control-allow-methods: 'PUT, GET, POST, DELETE, OPTIONS, PATCH', …}
cypress_runner.js:190995 Response body: {"name": "Bob", "description": "Created by Cypress"}
My intercept for now looks like this:
cy.intercept("GET", "/api/users/*").as("waitingForUpdateOnAlice")
cy.wait("#waitingForUpdateOnAlice")
But if the server returns the answer for Bob, then I don't have the chance of continue waiting.
Is there a way to handle this?
Mention: I do NOT have control or access to the trailing id on the url, so I do need to do this filtering only upon the response body.

First of all, declare a function to be used recursively:
function doIntercept(functionToWait){
cy.wait("#"+functionToWait).then((res)=>{
if(res.response.body.name === 'Bob') {
doIntercept("#"+functionToWait);
} else {
assert(res.response.body.name).to.be.eq('Alice');
}
})
}
then in your test section:
it("your test", ()=>{
cy.intercept("GET", "/api/users/*").as("waitingForUpdateOnAlice");
doIntercept("waitingForUpdateOnAlice");
})

You can alias an individual request. This should accomplish what you'd like.
cy.intercept("GET", "/api/users/*", (req) => {
if (req.body.name.equals('Alice')) {
req.alias = 'waitingForUpdateOnAlice'
}
});
cy.wait('#waitingForUpdateOnAlice');
You might need to play around with the exact form of that req.body.name conditional.

Related

cURL into NodeJS with Axios using hosted file

I'm trying to convert this cURL command into a request with AXIOS
`curl -X POST "https://serverless-upload.twilio.com/v1/Services/${service_uid}/Functions/${function_uid}/Versions" \
-F "Content=#./template_scripts/collect.js; type=application/javascript" \
-F "Path=collect.js" \
-F "Visibility=public" \
-u "${client.accountSid}:${client.password}"`
my attempt at doing so looks like this:
collect_file = ""
await axios.get("https://pastebin.com/raw/RFYs4n2p").then((r) => collect_file = r.data)
url = `https://serverless-upload.twilio.com/v1/Services/${service_uid}/Functions/${function_uid}/Versions`
form = new FormData();
form.append("Path", "collect");
form.append("Visibility", "public");
form.append("Content", collect_file);
form.append("filename", "collect.js");
form.append("contentType", "application/javascript");
await axios.post(url, form, {
headers: {
Authorization: 'Basic ' + Buffer.from(`${accountSid}:${authToken}`).toString('base64'),
...form.getHeaders(),
},
})
When filling the "Content" param I'm using the text representation of a JS file that I have hosted on Pastebin. In the initial cURL command you see I specify the file ./template_scripts/collect.js I don't want to use fs to load the "collect.js" file as I want the code to not use the file system.
The error I get is
Error: Request failed with status code 400
{
message: 'Invalid function version content.',
code: 20001,
user_error: true,
http_status_code: 400,
params: {}
}
400
{
date: 'Wed, 10 Feb 2021 13:39:08 GMT',
'content-type': 'application/json',
'content-length': '113',
connection: 'close',
't-request-id': 'RQ1bf727ce267b5b974cd1eeab122ad02e',
'x-shenanigans': 'none',
'access-control-allow-origin': '*',
'access-control-allow-headers': 'Accept, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since',
'access-control-allow-methods': 'GET, POST, DELETE, OPTIONS',
'access-control-expose-headers': 'ETag',
'access-control-allow-credentials': 'true',
'x-powered-by': 'AT-5000',
'x-home-region': 'us1',
'x-api-domain': 'serverless-upload.twilio.com',
'strict-transport-security': 'max-age=31536000'
}
I'm assuming the problem may be with using the text version of the JS file but not entirely sure. When read from pastebin it is returned as type "string".
Thank You!
Place the filename as the third argument for "Content" param
form.append("Content", collect_file, "collect.js");

filepond receive undefined value in hidden input

receive undefined value in hidden input
return Response::make($this->filepond->getServerIdFromPath($filePath), 200, [
'Content-Type' => 'text/plain',
]);
HTTP/1.0 200 OK
Cache-Control: no-cache, private
Content-Type: text/plain
Date: Mon, 25 May 2020 11:01:01 GMT
eyJpdiI6Ik1wWEY0UmNSNlRJR.....==
response generated correct but in filepond hidden receive undefined
<input type="hidden" name="filepond" value="undefined">
this is my server setting
FilePond.setOptions({
server: {
url: 'http://localhost/gadmin/public/filepond/api',
timeout: 7000,
process: {
url: '/process',
method: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
onload: (response) => response.key,
onerror: (response) => response.data,
ondata: (formData) => {
return formData;
}
},
}
});
The onload function is only needed if for example your server returns a JSON string and you need to select a certain property from it. In your situation the process end point returns a text/plain response with an id, this allows FilePond to automatically use the returned id as the file id. So that's why the onload function isn't needed.
See: https://pqina.nl/filepond/docs/patterns/api/server/#process
server returns unique location id 12345 in text/plain response

Javascript ajax response text parsing only the JSON portion

I am trying to parse my response text which contains JSON. I was wondering if there is any way to use regex in javascript to start parsing JSON from the beginning { to ending } Is there an easier way to do this?
Here is my js:
function getStatus(){
$.ajax({
url:"../lib/getstatus.php",
type: "POST",
data: {
name: name
},
dataType: "text",
success:function(result){
console.log(result);
}
});
}
Here is a sample of my response text.
HTTP/1.1 200 OK
Server: nginx/1.6.2
Date: Tue, 20 Mar 2018 00:28:38 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
{"myJson: response", //need to start parsing from here and ignore the top returned headers.
...
}

How do you properly send a proper HTTP Response in CakePHP 3.5

I am developing an CakePHP app that the Models for my ReactJS application, but I have run into a problem using Axios to retrieve a dynamically created json from one of the endpoints in the CakePHP application.
The action in the controller looks like this:
public function bootstrap($name = null){
$this->autoRender = false;
$config = $this->Themes->getJson($name);
$config += $this->systemVars();
$output = json_encode($config);
$this->response
->withHeader('Access-Control-Allow-Origin','*')
->withHeader('Access-Control-Allow-Methods',['GET', 'POST'])
->withHeader('Access-Control-Max-Age','8600')
->withType('application/json')
->withStringBody($output);
return $this->response;
}
and the axios request in my React app looks like this:
axios.get('https://demo.axistaylor.com/ccsllc/themes/json')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Everything seems to work fine except this the response that is printed to the console when I run the react app.
{
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…},
timeout: 0, xsrfCookieName: "XSRF-TOKEN", …},
data:"",
headers:{pragma: "no-cache", content-type: "text/html; charset=UTF-8",
cache-control: "no-store, no-cache, must-revalidate", expires: "Thu, 19 Nov 1981 08:52:00 GMT"},
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …},
status: 200,
statusText: "OK",
…
}
The data comeback as an empty string "". I have tried changing the method of setting the body and headers, even reverting to the methods supported by prior versions of CakePHP, eg. $this->response->header(…)->body(…), and the results are the same. The endpoint listed in the axios request is public so you can test it yourself. https://demo.axistaylor.com/ccsllc/themes/json
The problem was the initial $this->response is immutable in CakePHP 3.5+, and has to be reassigned with header and body in one statement like this.
$this->response = $this->response
->withHeader('Access-Control-Allow-Origin','*')
->withHeader('Access-Control-Allow-Methods',['GET', 'POST'])
->withHeader('Access-Control-Max-Age','8600')
->withType('application/json')
->withStringBody($output);
for information look as the answer to the question here provided by ndm

getJSON not updating div containers with new values [duplicate]

I have a machine on my local lan (machineA) that has two web servers. The first is the in-built one in XBMC (on port 8080) and displays our library. The second server is a CherryPy python script (port 8081) that I am using to trigger a file conversion on demand. The file conversion is triggered by a AJAX POST request from the page served from the XBMC server.
Goto http://machineA:8080 which displays library
Library is displayed
User clicks on 'convert' link which issues the following command -
jQuery Ajax Request
$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})
The browser issues a HTTP OPTIONS request with the following headers;
Request Header - OPTIONS
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
The server responds with the following;
Response Header - OPTIONS (STATUS = 200 OK)
Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
The conversation then stops. The browser, should in theory, issue a POST request as the server responded with the correct (?) CORS headers (Access-Control-Allow-Origin: *)
For troubleshooting, I have also issued the same $.post command from http://jquery.com. This is where I am stumped, from jquery.com, the post request works, a OPTIONS request is sent following by a POST. The headers from this transaction are below;
Request Header - OPTIONS
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST
Response Header - OPTIONS (STATUS = 200 OK)
Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
Request Header - POST
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache
Response Header - POST (STATUS = 200 OK)
Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json
I can't work out why the same request would work from one site, but not the other. I am hoping someone might be able to point out what I am missing. Thanks for your help!
I finally stumbled upon this link "A CORS POST request works from plain javascript, but why not with jQuery?" that notes that jQuery 1.5.1 adds the
Access-Control-Request-Headers: x-requested-with
header to all CORS requests. jQuery 1.5.2 does not do this. Also, according to the same question, setting a server response header of
Access-Control-Allow-Headers: *
does not allow the response to continue. You need to ensure the response header specifically includes the required headers. ie:
Access-Control-Allow-Headers: x-requested-with
REQUEST:
$.ajax({
url: "http://localhost:8079/students/add/",
type: "POST",
crossDomain: true,
data: JSON.stringify(somejson),
dataType: "json",
success: function (response) {
var resp = JSON.parse(response)
alert(resp.status);
},
error: function (xhr, status) {
alert("error");
}
});
RESPONSE:
response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")
return response
I solved my own problem when using google distance matrix API by setting my request header with Jquery ajax. take a look below.
var settings = {
'cache': false,
'dataType': "jsonp",
"async": true,
"crossDomain": true,
"url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
"method": "GET",
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
Note what i added at the settings
**
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
}
**
I hope this helps.
Took me some time to find the solution.
In case your server response correctly and the request is the problem, you should add withCredentials: true to the xhrFields in the request:
$.ajax({
url: url,
type: method,
// This is the important part
xhrFields: {
withCredentials: true
},
// This is the important part
data: data,
success: function (response) {
// handle the response
},
error: function (xhr, status) {
// handle errors
}
});
Note: jQuery >= 1.5.1 is required
Well I struggled with this issue for a couple of weeks.
The easiest, most compliant and non hacky way to do this is to probably use a provider JavaScript API which does not make browser based calls and can handle Cross Origin requests.
E.g. Facebook JavaScript API and Google JS API.
In case your API provider is not current and does not support Cross Origin Resource Origin '*' header in its response and does not have a JS api (Yes I am talking about you Yahoo ),you are struck with one of three options-
Using jsonp in your requests which adds a callback function to your URL where you can handle your response.
Caveat this will change the request URL so your API server must be equipped to handle the ?callback= at the end of the URL.
Send the request to your API server which is controller by you and is either in the same domain as the client or has Cross Origin Resource Sharing enabled from where you can proxy the request to the 3rd party API server.
Probably most useful in cases where you are making OAuth requests and need to handle user interaction Haha! window.open('url',"newwindowname",'_blank', 'toolbar=0,location=0,menubar=0')
This is a summary of what worked for me:
Define a new function (wrapped $.ajax to simplify):
jQuery.postCORS = function(url, data, func) {
if(func == undefined) func = function(){};
return $.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
xhrFields: { withCredentials: true },
success: function(res) { func(res) },
error: function() {
func({})
}
});
}
Usage:
$.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
if(obj.ok) {
...
}
});
Also works with .done,.fail,etc:
$.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
if(obj.ok) {
...
}
}).fail(function(){
alert("Error!");
});
Server side (in this case where example.com is hosted), set these headers (added some sample code in PHP):
header('Access-Control-Allow-Origin: https://not-example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 604800');
header("Content-type: application/json");
$array = array("ok" => $_POST["x"]);
echo json_encode($array);
This is the only way I know to truly POST cross-domain from JS.
JSONP converts the POST into GET which may display sensitive information at server logs.
Using this in combination with Laravel solved my problem. Just add this header to your jquery request Access-Control-Request-Headers: x-requested-with and make sure that your server side response has this header set Access-Control-Allow-Headers: *.
I had the exact same issue where jquery ajax only gave me cors issues on post requests where get requests worked fine - I tired everything above with no results. I had the correct headers in my server etc. Changing over to use XMLHTTPRequest instead of jquery fixed my issue immediately. No matter which version of jquery I used it didn't fix it. Fetch also works without issues if you don't need backward browser compatibility.
var xhr = new XMLHttpRequest()
xhr.open('POST', 'https://mywebsite.com', true)
xhr.withCredentials = true
xhr.onreadystatechange = function() {
if (xhr.readyState === 2) {// do something}
}
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(json)
Hopefully this helps anyone else with the same issues.
This function will asynchronously get an HTTP status reply from a CORS-enabled page. Only a page with the proper headers returns a 200 status if accessed via XMLHttpRequest -- whether GET or POST is used. Nothing can be done on the client side to get around this except possibly using JSONP if you just need a json object.
The following can be modified to get the data held in the xmlHttpRequestObject object:
function checkCorsSource(source) {
var xmlHttpRequestObject;
if (window.XMLHttpRequest) {
xmlHttpRequestObject = new XMLHttpRequest();
if (xmlHttpRequestObject != null) {
var sUrl = "";
if (source == "google") {
var sUrl = "https://www.google.com";
} else {
var sUrl = "https://httpbin.org/get";
}
document.getElementById("txt1").innerHTML = "Request Sent...";
xmlHttpRequestObject.open("GET", sUrl, true);
xmlHttpRequestObject.onreadystatechange = function() {
if (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) {
document.getElementById("txt1").innerHTML = "200 Response received!";
} else {
document.getElementById("txt1").innerHTML = "200 Response failed!";
}
}
xmlHttpRequestObject.send();
} else {
window.alert("Error creating XmlHttpRequest object. Client is not CORS enabled");
}
}
}
<html>
<head>
<title>Check if page is cors</title>
</head>
<body>
<p>A CORS-enabled source has one of the following HTTP headers:</p>
<ul>
<li>Access-Control-Allow-Headers: *</li>
<li>Access-Control-Allow-Headers: x-requested-with</li>
</ul>
<p>Click a button to see if the page allows CORS</p>
<form name="form1" action="" method="get">
<input type="button" name="btn1" value="Check Google Page" onClick="checkCorsSource('google')">
<input type="button" name="btn1" value="Check Cors Page" onClick="checkCorsSource('cors')">
</form>
<p id="txt1" />
</body>
</html>
If for some reasons while trying to add headers or set control policy you're still getting nowhere you may consider using apache ProxyPass…
For example in one <VirtualHost> that uses SSL add the two following directives:
SSLProxyEngine On
ProxyPass /oauth https://remote.tld/oauth
Make sure the following apache modules are loaded (load them using a2enmod):
proxy
proxy_connect
proxy_http
Obviously you'll have to change your AJAX requests url in order to use the apache proxy…
This is a little late to the party, but I have been struggling with this for a couple of days. It is possible and none of the answers I found here have worked. It's deceptively simple.
Here's the .ajax call:
<!DOCTYPE HTML>
<html>
<head>
<body>
<title>Javascript Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).domain = 'XXX.com';
$(document).ready(function () {
$.ajax({
xhrFields: {cors: false},
type: "GET",
url: "http://XXXX.com/test.php?email='steve#XXX.com'",
success: function (data) {
alert(data);
},
error: function (x, y, z) {
alert(x.responseText + " :EEE: " + x.status);
}
});
});
</script>
</body>
</html>
Here's the php on the server side:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
header('Origin: xxx.com');
header('Access-Control-Allow-Origin:*');
$servername = "sqlxxx";
$username = "xxxx";
$password = "sss";
$conn = new mysqli($servername, $username, $password);
if ($conn->connect_error) {
die( "Connection failed: " . $conn->connect_error);
}
$sql = "SELECT email, status, userdata FROM msi.usersLive";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo $row["email"] . ":" . $row["status"] . ":" . $row["userdata"] . "<br>";
}
} else {
echo "{ }";
}
$conn->close();
?>
</body>

Categories