How to Add a Upload Files Function with Cypress

1. Download the plugin for the cypress action file

Download the plugin:

--save-dev: save during development; no -dev means any environment can be used

npm install --save-dev cypress-file-upload

2. Write the html file of the locally uploaded file and start the service

<!DOCTYPE html>
<html lang="en">
<!-- Go to the html path and use the npx http-server command to temporarily start a service and access it through http://127.0.0.1:8080/-- >
<head>
    <meta charset="UTF-8">
    <meta name="Viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
    <input type="file" name="mfile" id="mfile">
</body>

</html>

3. cypress operation upload file

// import "cypress-file-upload" can put the import operation in the commands.js file in the support folder, and it can be used globally. 
describe("Drop-down selection box", () => {
    it( 'Single selection and multiple selection', () => {
        cy.visit( "http://127.0.0.1:8080/" )
         // The uploaded file will be saved in the fixtures folder by default, select 
        cy.get('#mfile').attachFile('example according to the file name .json' )
    })
})

Similar Posts:

Leave a Reply Cancel reply