Cypress Blob Command

The cypress blob command is used to convert base64 strings to Blob objects meaning it is used to test uploads using the cypress API without any 3rd party plugins. We can do this using a plugin called file upload and make things easier.

Check this article out for cypress fileupload.

• What if we can't use the package method and need to do it without it.
• So we need to use the cypress API to upload files without plugins. Then the blob command comes in handy while doing this.

Syntax

Cypress.Blob.method()

Correct Usage Of Blob:

Cypress.Blob.method()

Wrong Usage Of Blob:

cy.Blob.method()

• It cannot be chained off with 'cy.'

Let us try it out on our autopract site.

• We have an image G.png in our fixture/Images folder.

Let us try to upload it using the blob command.

        cy.fixture('Images/G.png').as('photo')
        cy.get('input[type="file"]').then(function (input){
            const blob = Cypress.Blob.base64StringToBlob(this.photo, 'image/png');
            const file = new File([blob], 'Images/G.png', {
               type: 'image/png' 
            })
 
            const data = new DataTransfer()
            data.items.add(file)
            const myFileList = data.files

            input[0].files = myFileList
            input[0].dispatchEvent(new Event('change', {bubbles: true}))
            


        })

• So first of all, we are taking the fixture command and passing in the path of the image and aliasing it as 'photo.'
• We are getting the upload button selector, and by using then, we are creating a function.
• Inside it using blob, we are using the base64StringToBlob and passing the photo alias using 'this' and the extension of the image along with it.
• Then we create a new file and pass the blob variable in the array with the path and type of the image.
• We are adding the file variable into this via items using data transfer.
• Using the function argument input, we are dispatching the event.
• So this will upload the file G.png like how the plugin does; instead, this needs so many steps to upload.