I am trying to automate uploading a picture on a website. I can manually upload fine. But when I do it using Cypress and node module cypress-file-upload, I get 500 server error.
I have import 'cypress-file-upload'; in commands.js file. I have
Cypress.on('uncaught:exception', (err, runnable) => {
return false;
});
I get application threw an error if I do not have this exception code.
This is what my code looks like for upload
cy.fixture('settings.JPG').then(fileContent => {
cy.get('[id="xyz"]').attachFile({
fileContent: fileContent.toString(),
fileName: 'settings.JPG',
mimeType: 'image/png'
});
});
As I look at browser where cypress is running, I can see, file is being attached near the Choose file field. But as soon Cypress clicks on the submit button, it throws 500 error
If I go to Cypress view pane and click on the submit button, it throws 500 error again
But if I click on the choose file and select the same file and then click on Submit button, then I do not get 500 error and it works.
Can anyone point out why I am getting 500 error? and what can I do to get past this? Thanks a bunch in advance.
Try to replace your mimeType as a image/jpg.
Related
I am using Asp.NET Core 6 & CKEditor 4
When I click on send button to upload selected image from local path, file uploads successfully but after that error appears as follow:
HTTP error occurred during file upload (error status: 500).
I added extra directory to application root and used StaticFile like bellow:
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "FilesCKEditor")),
RequestPath = "/FilesCKEditor"
});
Everything is ok when uploading image to the server but return status never send to ckEditor image browser dialog.
Please help me.
Thank You All
I have a button which will redirect to the application upon clicking it.
But when my automation script runs, it is always throwing POST 400 error.
I tried manually in my browser, and there is no error in the network tab. And also if you use Cypress to open the browser and load the application, there is no error.
I saw a similar one [here][1] but does not seem to solve my issue.
Test.js file :
describe ('Test', function()
{
it('Login', function(){
cy.url().should('include', '<url goes here>');
cy.wait(3000)
cy.get('h1').should('have.text', "WELCOME")
cy.get('button').contains("submit").click() ////executed till here. POST 400 error after this
})
}
)
HTML code :
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained" tabindex="0" type="button">
<span class="MuiButton-label"> submit</span>
Error after running automation code :
(xhr) POST 400 : <api-url>
This is the response on the network tab => Failed to load response data : No resource with given identifier found.
Can you try to add failOnStatusCode:false, into your cy.request?
You can read more here: cypress documentation
There is a button in UI, it will open file open explorer, once we select file and click open, then DOM directly uploading the file,
Upload Document Pop Up
selecting the file and click open
file directly getting uploaded
tried all possible ways suggested in cypress-file-upload package. not working,
background there is an API POST request which is actually uploading the file, but that API URL is dynamic(URL includes the user authentication login token, and upload key, and user id), so it is not possible to generate/recreate the upload API URL
Can't able to access the file open explorer? In this scenario, how to perform file upload using CyPress?
You should be able to use a RegEx in the RouteMatcher for the intercept on the Upload API. If you need help creating your Regex, I suggest using Regex101 as a scratch pad. Slightly modified from the cypress-file-upload documentation:
// intercept the API endpoint
cy.intercept({
method: 'POST',
url: /.*my-api.com.*/
}).as('upload');
const fileName = 'upload_1.xlsx';
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('#input_upload_file').attachFile({
fileContent,
fileName,
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
encoding:'utf8',
lastModified: new Date().getTime()
})
})
// wait for the 'my-api.com' request, and leave a 2 minutes delay before throwing an error
cy.wait('#upload', { requestTimeout: 120000 });
I am trying to automate file uploading via cypress but getting the error below.
I am not finding the root cause of the issue.
enter code here
The following error originated from your application code, not from Cypress.
Script error.
Cypress detected that an uncaught error was thrown from a cross origin script.
We cannot provide you the stack trace, line number, or file where this error occurred.
Check your Developer Tools Console for the actual error - it should be printed there.
It's possible to enable debugging these scripts by adding the crossorigin attribute and
setting a CORS header.
When Cypress detects uncaught errors originating from your application it will automatically
fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the
uncaught:exception event
Below is my code
it('Single File Upload-DOM', () => {
cy.visit('http://127.0.0.1:5500/Help%20Folder/fileupload.html')
cy.get('#file-upload1').attachFile('dog_small.jpg')
cy.get('span#fileName1').should('have.text','dog_small.jpg')
});
You can turn off the exception check globally by writing:
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
under cypress/support/index.js
I have a simple login test in cypress (5.6.0, Windows 10). The application I am testing is written in PHP/MySQL. When I run the test in Cypress I get a 404 page not found error following the login.
This does not happen manually or with webdriver, just with Cypress.
Here is the script (which you can try)
describe('Admin Login', () => {
Cypress.config('baseUrl','https://www.edgewordstraining.co.uk/webdriver2')
it.only('Successful Login', () => {
cy.visit ('/')
cy.get('div#right-column > h1').contains('Web Testing Index Page V2 Sprint2')
cy.contains('Login').click()
cy.get('body').contains('User is not Logged in').should('exist')
cy.get('#username').clear()
cy.get('#username').type('edgewords')
cy.get('#password').clear()
cy.get('#password').type('edgewords123')
cy.contains('Submit').click()
//error 404 occurs here
//cy.visit ('/sdocs/add_record.php') //Had to add this as Cypress changes the URL from the form submit for some reason!
cy.get('body').contains('User is Logged in').should('exist')
//Logout
cy.contains('Log Out').click()
//Handle the confirmation Alert
cy.on('window:confirm',(str)=>{
expect(str).to.equal('Do You Really want to Exit the Secure site! Press ok to Continue ')
})
cy.get('body').contains('User was Logged in').should('exist')
});
And when I run with Chrome or Firefox, I get this in the log:
enter image description here
and in the Test Runner, the URL has been truncated:
enter image description here
The URL should be https://www.edgewordstraining.co.uk/webdriver2/sdocs/add_record.php,
but cypress changes it to https://www.edgewordstraining.co.uk/sdocs/add_record.php
webdriver2 is just a physical folder on the web server where this app/site is stored.
I see that someone else had a similar issue, but there are no replies on his question. Could anyone help? Thanks
Since the above post, I have now looked at the login function in the application itself.
else {
// document.write(response);
//location.replace("../sdocs/add_record.php");
//Had to change the line below as in Cypress, it is not moving back to the previous directory
//so have made it an absolute url instead
//window.location.href = "../sdocs/add_record.php";
window.location.href = "https://www.edgewordstraining.co.uk/webdriver2/sdocs/add_record.php";
return false;
}
The relative url path above should just go back to the parent directory (webdriver2) which it does if you use the site manually.
However, I have had to fix this as a fully qualified url to make it work in cypress.
So I have a workaround, but why does cypress handle it differently?