File upload (cy.selectFile) in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test snippet?

Consider this Cypress test code that uploads a file using cy.selectFile. What will be the test result?

Cypress

cy.get('input[type=file]').selectFile('cypress/fixtures/sample.txt')
  .then(input => {
    expect(input[0].files[0].name).to.equal('sample.txt')
  })

A Test passes because the file name matches 'sample.txt'.

B Test fails because <code>selectFile</code> requires an object, not a string path.

C Test fails due to a syntax error in the <code>then</code> callback.

D Test passes but the file name will be empty.

💡 Hint

Check how cy.selectFile accepts a string path to a fixture file.

The selectFile command accepts a string path to a file in the fixtures folder. The test checks the uploaded file's name and it matches 'sample.txt', so the assertion passes.

❓ assertion

intermediate

Which assertion correctly verifies the uploaded file size?

You want to check that the uploaded file size is exactly 1024 bytes after using cy.selectFile. Which assertion is correct?

A assert.equal(input.files.size, 1024)

B expect(input.files[0].size).toBe(1024)

C expect(input[0].files[0].size).to.equal(1024)

D expect(input[0].files.size).to.equal(1024)

💡 Hint

Remember the file list is an array-like object accessed by index.

The file list is accessed as input[0].files[0]. The size property holds the file size in bytes. Option C uses correct syntax and property access.

❓ locator

advanced

Which locator is best to select a file input for uploading?

You want to select the file input element on a form for uploading a file using cy.selectFile. Which locator is best practice?

A cy.get('#fileInput')

B cy.get('input')

C cy.get('input[type=file]')

D cy.get('.upload-button')

💡 Hint

Use the most specific and stable selector possible.

Using an ID selector like #fileInput is more specific and less likely to break than generic selectors like input[type=file] or classes that may not target the input element.

🔧 Debug

advanced

Why does this file upload test fail with 'No file selected' error?

Given this test code, why does the upload fail with 'No file selected'?

cy.get('input[type=file]').selectFile({ contents: 'Hello' })

A The <code>selectFile</code> command requires a file path string, not an object.

B The <code>contents</code> property must be a Buffer or Uint8Array, not a string.

C The input element is not visible, so <code>selectFile</code> fails silently.

D The <code>selectFile</code> command needs the <code>force: true</code> option to work.

💡 Hint

Check the type expected for the contents property in selectFile.

The contents property must be a binary type like Buffer or Uint8Array. Passing a plain string causes the file to be empty, leading to 'No file selected' error.

❓ framework

expert

How to test drag-and-drop file upload with Cypress cy.selectFile?

You want to simulate a drag-and-drop file upload in Cypress using cy.selectFile. Which option correctly triggers the drag-and-drop event?

A cy.get('#dropzone').attachFile('file.png')

B cy.get('#dropzone').selectFile('cypress/fixtures/file.png')

C cy.get('#dropzone').trigger('drop', { dataTransfer: { files: ['file.png'] } })

D cy.get('#dropzone').selectFile('cypress/fixtures/file.png', { action: 'drag-drop' })

💡 Hint

Look for the action option in selectFile to simulate drag-drop.

Option D uses selectFile with { action: 'drag-drop' } which simulates dragging and dropping the file onto the element. Other options either miss this or use unsupported commands.