cypress/docs/source/api/utilities/blob.md

title: cypress-blob comments: true

Cypress.Blob.method()

Cypress proxies a Blob Utilities library and exposes it as Cypress.Blob.

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

---

Usage

Using an image fixture

// programmatically upload the logo
cy
  .fixture("images/logo.png").as("logo")
  .get("input[type=file]").then(function($input){

    // convert the logo base64 string to a blob
    return Cypress.Blob.base64StringToBlob(this.logo, "image/png").then(function(blob){

      // pass the blob to the fileupload jQuery plugin
      // which initiates a programmatic upload
      $input.fileupload("add", {files: blob})
    })
  })

Getting dataUrl string

return Cypress.Blob.imgSrcToDataURL("/assets/img/logo.png").then(function(dataUrl){

  // create an <img> element and set its src to the dataUrl
  var img = Cypress.$("<img />", {src: dataUrl})

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