Skip to main content

Cypress.Blob

Cypress automatically includes a Blob library and exposes it as Cypress.Blob.

Use Cypress.Blob to convert base64 strings to Blob objects. Useful for testing uploads.

Syntax

Cypress.Blob.method()

Usage

Correct Usage

Cypress.Blob.method()

Incorrect Usage

cy.Blob.method() // Errors, cannot be chained off 'cy'

Examples

Image Fixture

Using an image fixture for jQuery plugin upload

// programmatically upload the logo
cy.fixture('images/logo.png').as('logo')
cy.get('input[type=file]').then(function ($input) {
// convert the logo base64 string to a blob
const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png')

// pass the blob to the fileupload jQuery plugin
// https://github.com/blueimp/jQuery-File-Upload
// used in your application's code
// which initiates a programmatic upload
$input.fileupload('add', { files: blob })
})

Getting dataUrl string

Create an img element and set its src to the dataUrl

return Cypress.Blob.imgSrcToDataURL('/assets/img/logo.png').then((dataUrl) => {
const img = Cypress.$('<img />', { src: dataUrl })

cy.get('.utility-blob').then(($div) => {
// append the image
$div.append(img)
})
cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl)
})

History

VersionChanges
5.0.0Return type of arrayBufferToBlob, base64StringToBlob, binaryStringToBlob, and dataURLToBlob methods changed from Promise<Blob> to Blob
5.0.0Added arrayBufferToBinaryString, binaryStringToArrayBuffer methods.

See also