Cross domain file download (#566)

Author: bahmutov

examples/testing-dom__download/README.md

@@ -2,6 +2,6 @@
 
 ![File download in Chrome](images/chrome.png)
 
-See [cypress/plugins/index.js](cypress/plugins/index.js) to see how we set the download folder when launching the browser. See the [cypress/integration/spec.js](cypress/integration/spec.js) spec file that downloads and verifies a CSV file and an Excel file.
+See [cypress/plugins/index.js](cypress/plugins/index.js) to see how we set the download folder when launching the browser. See the [cypress/integration/spec.js](cypress/integration/spec.js) spec file that downloads and verifies a CSV file, an Excel file, and a PNG image.
 
 ![File download in Firefox](images/firefox.png)

examples/testing-dom__download/cypress.json

@@ -2,6 +2,7 @@
   "fixturesFolder": false,
   "supportFile": false,
   "viewportWidth": 500,
-  "viewportHeight": 300,
-  "baseUrl": "http://localhost:8070"
+  "viewportHeight": 500,
+  "baseUrl": "http://localhost:8070",
+  "chromeWebSecurity": false
 }

examples/testing-dom__download/cypress/integration/spec.js

@@ -95,4 +95,48 @@ describe('file download', () => {
       ])
     })
   })
+
+  it('downloads local PNG image', () => {
+    // image comes from the same domain as the page
+    cy.visit('/')
+    cy.get('[data-cy=download-png]').click()
+
+    cy.log('**confirm downloaded image**')
+
+    const downloadedFilename = path.join(downloadsFolder, 'logo.png')
+
+    // ensure the file has been saved before trying to parse it
+    cy.readFile(downloadedFilename, 'binary', { timeout: 15000 })
+    .should((buffer) => {
+      // by having length assertion we ensure the file has text
+      // since we don't know when the browser finishes writing it to disk
+
+      // Tip: use expect() form to avoid dumping binary contents
+      // of the buffer into the Command Log
+      expect(buffer.length).to.be.gt(1000)
+    })
+  })
+
+  // The next step tries to download file located in
+  // the second domain. It runs in Chromium browsers with
+  // "chromeWebSecurity": false, but we need to skip it in Firefox
+  it('downloads remote PNG image', { browser: '!firefox' }, () => {
+    // image comes from a domain different from the page
+    cy.visit('/')
+    cy.get('[data-cy=download-remote-png]').click()
+
+    cy.log('**confirm downloaded image**')
+    const downloadedFilename = path.join(downloadsFolder, 'logo.png')
+
+    // ensure the file has been saved before trying to parse it
+    cy.readFile(downloadedFilename, 'binary', { timeout: 15000 })
+    .should((buffer) => {
+      // by having length assertion we ensure the file has text
+      // since we don't know when the browser finishes writing it to disk
+
+      // Tip: use expect() form to avoid dumping binary contents
+      // of the buffer into the Command Log
+      expect(buffer.length).to.be.gt(1000)
+    })
+  })
 })

examples/testing-dom__download/public/index.html

@@ -5,4 +5,10 @@ <h1>Download CSV</h1>
 
   <h1>Download XLSX</h1>
   <a data-cy="download-xlsx" href="people.xlsx" download>people.xlsx</a>
+
+  <h1>Download a local PNG image</h1>
+  <a data-cy="download-png" href="logo.png" download>logo.png</a>
+
+  <h1>Download a remote PNG image</h1>
+  <a data-cy="download-remote-png" href="https://docs.cypress.io/img/logo.png" download>remote logo.png</a>
 </body>