I would like to extract a big json file via API in Cypress. The following code (without the cy.wait()) works for small files. Once the file gets bigger and the response time grows over 30 seconds, the script times out.
Therefore I added cy.wait('#api_call')
describe('Api request', () => {
it('get json', () => {
cy.request({
method: 'GET',
url: '/api_endpoint',
headers: {
'API-KEY': 'xxxxxxxxxxxxxxxxx',
}
}).as('api_call')
cy.wait('#api_call').its('response.body').should('contain','name')
.then(response => {
var someArr = new Array();
someArr = response.body;
cy.writeFile('cypress/fixtures/testdata.txt', someArr);
})
})
})
Now this throws the error
cy.wait() only accepts aliases for routes.
How can I correctly tell Cypress to wait for the request to resolve?
[edit]I have now tried adding every possible timeout setting from https://docs.cypress.io/guides/references/configuration#Timeouts and setting them to 90000ms, but it still would not increase the timeout. It still times out after 30 seconds.
You can add a global timeout for responseTimeout in your cypress.json like:
{
responseTimeout: 30000
}
Or, you can add timeout individually as well -
describe('Api request', () => {
it('get json', () => {
cy.request(
{
method: 'GET',
url: '/api_endpoint',
headers: {
'API-KEY': 'xxxxxxxxxxxxxxxxx',
},
timeout: 30000
},
).as('api_call')
cy.get('#api_call')
.its('response.body')
.should('contain', 'name')
.then((response) => {
var someArr = new Array()
someArr = response.body
cy.writeFile('cypress/fixtures/testdata.txt', someArr)
})
})
})
So it looks like my fault was how I used the timeout option
describe('Api request', () => {
it('get json', () => {
cy.request({
method: 'GET',
url: 'https://api_endpoint',
headers: {
'API-KEY': 'xxxxxxx',
},
timeout: 90000 <-----
},
)
.then((response) => {
var someArr = new Array()
someArr = response.body
cy.writeFile('cypress/fixtures/testdata.txt', someArr)
})
})
})
If you put the timeout option there, it will work as intended.
Now it waits for up to 90s which is enough for my purposes.
Related
One of my ideas would be to overwrite the request command, but I don't know how to handle the response object.
A snippet I already have:
Cypress.Commands.overwrite(
'request',
(
originalFn: Cypress.CommandOriginalFn<'request'>,
options: Partial<Cypress.RequestOptions>
): void | Cypress.Chainable<Cypress.Response<unknown>> => {
return originalFn(options);
}
);
My other idea would be to intercept all requests, but there are already interceptors added and you can not have two for one request.
beforeEach(() => {
cy.intercept(
{
url: '*/**',
},
req => {
// tried with 'after:response' too
req.on('response', res => {
cy.log(`${res.headers['x-custom-header']}`);
});
}
);
});
Is there any other way to log a custom header value for all request?
My final working solution was to add this code to /support/index.ts
beforeEach(() => {
cy.intercept({ url: '*', middleware: true }, req => {
req.on('after:response', (res => {
const customHeaderKey = 'x-custom-header';
const customHeaderValue = res.headers[customHeaderKey];
if (customHeaderValue) {
const message = JSON.stringify({ [customHeaderKey]: customHeaderValue });
Cypress.log({ message }).finish();
}
}));
});
});
I'm pretty new to APIs, but I was interested in trying to get them to work in Google Sheets. I looked up the documentation at https://www.api-football.com/documentation-v3#section/Sample-Scripts/Javascript. In my Google Sheets script editor, I copied this code and when I ran it (I did put my key in where the xXx was), I got this error: ReferenceError: Headers is not defined
Any help for what I am doing incorrectly?
function soccer(){
var myHeaders = new Headers();
myHeaders.append("x-rapidapi-key", "XxXxXxXxXxXxXxXxXxXxXxXx");
myHeaders.append("x-rapidapi-host", "v3.football.api-sports.io");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch("https://v3.football.api-sports.io/fixtures?league=39&season=2021&timezone=America/New_York", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
You should use UrlFetchApp instead of fetch.
I can't really try my code since I don't have an API key, but this should work:
function soccer(){
var requestOptions = {
"method" : "GET",
"headers" : {
"x-rapidapi-key" : "XxXxXxXxXxXxXxXxXxXxXxXx",
"x-rapidapi-host": "v3.football.api-sports.io"
},
"redirect": 'follow'
};
let response = UrlFetchApp.fetch("https://v3.football.api-sports.io/fixtures?league=39&season=2021&timezone=America/New_York", requestOptions);
console.log(response.getContentText());
}
You can use the RapidAPI code snippet generator. It generates simple and more readable code. I have run this code, and it's working fine for me.
Try this code snippet:
fetch("https://api-football-v1.p.rapidapi.com/v3/fixtures?league=39&season=2020", {
"method": "GET",
"headers": {
"x-rapidapi-host": "api-football-v1.p.rapidapi.com",
"x-rapidapi-key": "XXXXXXXXXXXXXXXXXXX"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.error(err);
});
I making a multi-upload file form.
Upon user cancellation, once the corresponding axios call get cancelled using cancel(), I having a weird behaviour. My axios call get caught inside the then() whereas it should be caught inside of catch(). The response inside of then() returns undefined.
I am having a hard time figuring if I did something wrong on the front-end part, I think my call is may be missing some headers or maybe it's on the backend part ?
const payload = { file, objectId: articleId, contentType: 'article' };
const source = axios.CancelToken.source();
// callback to execute at progression
const onUploadProgress = (event) => {
const percentage = Math.round((100 * event.loaded) / event.total);
this.handleFileUploadProgression(file, {
percentage,
status: 'pending',
cancelSource: source,
});
};
attachmentService
.create(payload, { onUploadProgress, cancelToken: source.token })
.then((response) => {
// cancelation response ends up here with a `undefined` response content
})
.catch((error) => {
console.log(error);
// canceled request do not reads as errors down here
if (axios.isCancel(error)) {
console.log('axios request cancelled', error);
}
});
the service itself is defined below
export const attachmentService = {
create(payload, requestOptions) {
// FormData cannot be decamelized inside an interceptor so it's done before, here.
const formData = new FormData();
Object.entries(payload).forEach(([key, value]) =>
formData.append(decamelize(key), value),
);
return api
.post(resource, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
...requestOptions,
})
.then((response) => {
console.log(response, 'cancelled request answered here as `undefined`');
return response.data;
})
.catch((error) => {
// not caught here (earlier)
return error.data;
});
},
};
cancellation is called upon a file object doing
file.cancelSource.cancel('Request was cancelled by the user');
As suggested by #estus-flask in a comment, the issue is that I was catching the error inside of the service (too early). Thank you!
export const articleService = {
create(payload, requestOptions) {
// FormData cannot be decamelized inside an interceptor so it's done before, here.
const formData = new FormData();
Object.entries(payload).forEach(([key, value]) =>
formData.append(decamelize(key), value),
);
return api.post(resource, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
...requestOptions,
});
},
};
I want to write a test for my CRUD endpoints. But I want to test 'UPDATE', 'DELETE' endpoints rely on created document in 'CREATE' endpoint.
For example:
let createdAccount = null;
it("should create an account", async () => {
const response = await Server.inject({
method: "POST",
url: "/v1/accounts",
payload: JSON.stringify({
name: "TEST",
email: "test#test.com"
})
});
expect(response.statusCode).to.equal(200);
expect(response.result).to.a.object();
expect(response.result._id).to.exists();
createdAccount = response.result;
});
it("should delete an account", async () => {
const deleteResponse = await Server.inject({
method: "DELETE",
url: `/v1/accounts/${createdAccount._id}`
});
expect(deleteResponse.statusCode).to.equal(200);
expect(deleteResponse.result).to.a.object();
expect(deleteResponse.result._id).to.exists();
});
What's the best way to handle this? Should I create a test case which is rely on another one's result?
Note: I'm using hapijs, hapi/lab, hapi/code for testing.
Your use case is perfectly OK. We also use similar approaches in our test cases.
Here is a piece of test code from a real-world application.
describe('Validate campaign routes', () => {
let server, token, cookie, campaignId;
before(async () => {
server = await Glue.compose(serverConfig.manifest, options);
// custom my api related stuff, such as JTW token generation user creation etc.
});
after(async () => {
await mongoose.connection.db.dropDatabase();
await server.stop();
await helpers.delay(100);
});
it("should create a campaign", async () => {
const res = await server.inject({
url: '/campaign',
method: 'post',
payload: {
name: "Sample Campaign",
active: true
},
headers: {
"Authorization": token,
}
});
expect(res.statusCode).to.equal(200);
expect(res.result.created).to.exist();
expect(res.result.created.name).to.equal("Sample Campaign");
expect(res.result.status).to.equal(true);
campaignId = res.result.created.id;
});
it("should fetch all campaigns", async () => {
const res = await server.inject({
url: '/campaign?page=1',
method: 'get',
headers: {
"Authorization": token,
}
});
expect(res.statusCode).to.equal(200);
expect(res.result.status).to.equal(true);
expect(res.result.results).to.be.an.array();
expect(res.result.results).to.have.length(1);
expect(res.result.results[0].name).to.equal('Sample Campaign');
});
it("should fetch campaign details", async () => {
// fetch campaign details
const res2 = await server.inject({
url: `/campaign/${campaignId}`,
method: 'get',
headers: {
"Authorization": token,
}
});
expect(res2.statusCode).to.equal(200);
expect(res2.result).to.be.an.object();
expect(res2.result.name).to.equal('Sample Campaign');
});
it("should update campaign", async () => {
const res = await server.inject({
url: `/campaign/${campaignId}`,
method: 'put',
payload: {
name: "Updated Campaign Title",
maxImpression: 1000,
endDate: "01-04-2019"
},
headers: {
"Authorization": token,
}
});
expect(res.statusCode).to.equal(200);
expect(res.result).to.be.an.object();
expect(res.result.updated.name).to.equal('Updated Campaign Title');
expect(res.result.updated.maxImpression).to.equal(1000);
});
it("should delete campaign", async () => {
const res = await server.inject({
url: `/campaign/${campaignId}`,
method: 'delete',
headers: {
"Authorization": token,
}
});
expect(res.statusCode).to.equal(200);
expect(res.result.deleted).to.equal(campaignId);
const res2 = await server.inject({
url: '/campaign',
method: 'get',
headers: {
"Authorization": token,
}
});
expect(res2.statusCode).to.equal(200);
expect(res2.result.status).to.equal(true);
expect(res2.result.results).to.be.an.array();
expect(res2.result.results).to.have.length(0);
});
});
I have a user login function that is working. But, I want to incorporate a time out error for the fetch. Is there a way to set up a timer for 5 seconds or so that would stop trying to fetch after such a time? Otherwise, I just get a red screen after a while saying network error.
_userLogin() {
var value = this.refs.form.getValue();
if (value) {
// if validation fails, value will be null
if (!this.validateEmail(value.email)) {
// eslint-disable-next-line no-undef
Alert.alert('Enter a valid email');
} else {
fetch('http://51.64.34.134:5000/api/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
timeout: 5000,
body: JSON.stringify({
username: value.email,
password: value.password,
}),
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.status == 'success') {
this._onValueChange(STORAGE_KEY, responseData.data.token);
Alert.alert('Login Success!');
this.props.navigator.push({name: 'StartScreen'});
} else if (responseData.status == 'error') {
Alert.alert('Login Error', responseData.message);
}
})
.done();
}
}
}
I have made a ES6 function that wraps ES fetch into a promise, here it is:
export async function fetchWithTimeout(url, options, timeout = 5000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout))
]);
}
Here is how to use it:
const requestInfo = {
method,
headers,
body,
};
const url = 'http://yoururl.edu.br'
let data = await fetchWithTimeout(url, requestInfo, 3000);
// Wrapper function for fetch
const fetchSomething = async () => {
let controller = new AbortController()
setTimeout(() => controller.abort(), 3000); // abort after 3 seconds
const resp = await fetch('some url', {signal: controller.signal});
const json = await resp.json();
if (!resp.ok) {
throw new Error(`HTTP error! status: ${resp.status}`);
}
return json;
}
// usage
try {
let jsonResp = await fetchSomthing();
console.log(jsonResp);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Network Error');
} else {
console.log(error.message);
}
}
I think using AbortController is the recommended way to abort a fetch call. The code snippet above handles the following scenarios:
If network is good but HTTP returns an error status, the message "HTTP error! ..." will be logged.
If network is down, setTimeout would trigger the AbortController to abort fetch after three seconds. The message "Network Error" will be logged.
If network is good and HTTP response is good, the response JSON will be logged.
The documentation for using AbortController to abort fetch is here.
There is no standard way of handling this as a timeout option isn't defined in the official spec yet. There is an abort defined which you can use in conjunction with your own timeout and Promises. For example as seen here and here. I've copied the example code, but haven't tested it myself yet.
// Rough implementation. Untested.
function timeout(ms, promise) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
reject(new Error("timeout"))
}, ms)
promise.then(resolve, reject)
})
}
timeout(1000, fetch('/hello')).then(function(response) {
// process response
}).catch(function(error) {
// might be a timeout error
})
Another option would be to modify the fetch.js module yourself to add a timeout that calls abort as seen here.
This is what I did to go around it:
(This is the "generic" function I use to make all calls on my app)
I created a timeout function, that will be triggered unless it is cleared before, then I clear this timeout on server response
const doFetch = (url, callback, data) => {
//... creating config obj here (not relevant for this answer)
var wasServerTimeout = false;
var timeout = setTimeout(() => {
wasServerTimeout = true;
alert('Time Out');
}, 3000);
fetch(HOST + url, config)
.then((response) => {
timeout && clearTimeout(timeout); //If everything is ok, clear the timeout
if (!wasServerTimeout) {
return response.json();
}
})
.then((response) => {
callback && callback(response.data || response);
})
.catch((err) => {
//If something goes wrong, clear the timeout
timeout && clearTimeout(timeout);
if (!wasServerTimeout) {
//Error logic here
}
});
};
I solved this problem by using a race between 2 promises, written as a wrapper around fetch. In my case I expect the request to return json so also added that. Maybe there is a better solution, but this works correctly for me!
The wrapper returns a promise which will resolve as long as there are no code errors.
You can check the result.status for 'success' and read json data from result.data. In case of error you can read the exact error in result.data, and display it or log it somewhere. This way you always know what went wrong!
var yourFetchWrapperFunction = function (
method,
url,
headers,
body,
timeout = 5000,
) {
var timeoutPromise = new Promise(function (resolve, reject) {
setTimeout(resolve, timeout, {
status: 'error',
code: 666,
data:
'Verbinding met de cloud kon niet tot stand gebracht worden: Timeout.',
});
});
return Promise.race([
timeoutPromise,
fetch(connectionType + '://' + url, {
method: method,
headers: headers,
body: body,
}),
])
.then(
(result) => {
var Status = result.status;
return result
.json()
.then(
function (data) {
if (Status === 200 || Status === 0) {
return {status: 'success', code: Status, data: data};
} else {
return {
status: 'error',
code: Status,
data: 'Error (' + data.status_code + '): ' + data.message,
};
}
},
function (response) {
return {
status: 'error',
code: Status,
data: 'json promise failed' + response,
};
},
)
.catch((error) => {
return {status: 'error', code: 666, data: 'no json response'};
});
},
function (error) {
return {status: 'error', code: 666, data: 'connection timed out'};
},
)
.catch((error) => {
return {status: 'error', code: 666, data: 'connection timed out'};
});
};
let controller = new AbortController()
setTimeout( () => {
controller.abort()
}, 10000); // 10,000 means 10 seconds
return fetch(url, {
method: 'POST',
headers: headers,
body: JSON.stringify(param),
signal: controller.signal
})
I may be late but i made a code which is 100% working to timeout an API request using fetch.
fetch_timeout(url, options) {
let timeout = 1000;
let timeout_err = {
ok: false,
status: 408,
};
return new Promise(function (resolve, reject) {
fetch(url, options)
.then(resolve, reject)
.catch(() => {
alert('timeout.');
});
setTimeout(reject.bind(null, timeout_err), timeout);
});
}
You just need to pass the api-endpoint to the url and body to the options parameter.