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.

Practice

1. What is the primary purpose of cy.selectFile in Cypress testing?

easy

A. To simulate a user selecting a file for upload in a test

B. To download files from the server during a test

C. To delete files from the local system during a test

D. To open a file in the browser for viewing

Solution

1. Step 1: Understand the role of cy.selectFile

   This command is designed to simulate a user action of selecting a file in a file input element during automated tests.

2. Step 2: Compare options with this purpose

   Options B, C, and D describe actions unrelated to file selection for upload, such as downloading, deleting, or opening files, which cy.selectFile does not do.

3. Final Answer:

   To simulate a user selecting a file for upload in a test -> Option A

4. Quick Check:

   File selection = Simulate user upload [OK]

Hint: Remember: selectFile mimics user file selection [OK]

Common Mistakes:

• Confusing file upload with file download
• Thinking selectFile deletes files
• Assuming selectFile opens files in browser

2. Which of the following is the correct syntax to select a file named example.txt using cy.selectFile?

easy

A. cy.get('input[type=file]').selectFile('example.txt')

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

C. cy.get('input[type=file]').selectFile('file://example.txt')

D. cy.get('input[type=file]').selectFile('cypress/fixtures/example.txt')

Solution

1. Step 1: Understand file path usage in cy.selectFile

   The file path should point to the test fixture location, usually inside the cypress/fixtures folder.

2. Step 2: Evaluate each option's path

   cy.get('input[type=file]').selectFile('cypress/fixtures/example.txt') correctly uses the relative path to the fixture file. cy.get('input[type=file]').selectFile('example.txt') uses just the filename without path, which won't work. cy.get('input[type=file]').selectFile({ contents: 'example.txt' }) incorrectly uses an object with contents as string. cy.get('input[type=file]').selectFile('file://example.txt') uses an invalid file URI.

3. Final Answer:

   cy.get('input[type=file]').selectFile('cypress/fixtures/example.txt') -> Option D

4. Quick Check:

   Use fixture path for selectFile [OK]

Hint: Use fixture folder path for files in selectFile [OK]

Common Mistakes:

• Using only filename without path
• Passing file contents as string instead of path
• Using invalid file URI scheme

3. Given the following Cypress code snippet, what will be the result of the test?

cy.get('input[type=file]').selectFile('cypress/fixtures/photo.png')
  .should('have.prop', 'files').then(files => {
    expect(files[0].name).to.equal('photo.png')
  })

medium

A. The test will pass because the file name matches

B. The test will fail because the file input does not have files property

C. The test will throw a syntax error due to incorrect chaining

D. The test will pass but the file name will be undefined

Solution

1. Step 1: Understand selectFile and file input properties

   After selecting a file, the input element's files property contains the selected files. Accessing files[0].name should give the file name.

2. Step 2: Analyze the assertion

   The assertion checks if the first file's name equals 'photo.png', which matches the selected file. This is valid and should pass.

3. Final Answer:

   The test will pass because the file name matches -> Option A

4. Quick Check:

   File name check = Pass [OK]

Hint: Files property holds selected files; check name to verify [OK]

Common Mistakes:

• Assuming files property is missing
• Confusing syntax chaining in Cypress
• Expecting undefined file name

4. You wrote this Cypress test to upload a file but it fails:

cy.get('#fileInput').selectFile('example.pdf')

What is the most likely reason for the failure?

medium

A. The selector '#fileInput' is invalid syntax

B. The file path is incorrect or missing the fixture folder

C. selectFile cannot be used on input elements

D. The file must be uploaded manually, not via tests

Solution

1. Step 1: Check file path requirements for selectFile

   The file path must be relative to the cypress/fixtures folder or an absolute path. Just 'example.pdf' without path likely causes failure.

2. Step 2: Verify other options

   Selector syntax '#fileInput' is valid. selectFile works on input elements. Manual upload is not required in tests.

3. Final Answer:

   The file path is incorrect or missing the fixture folder -> Option B

4. Quick Check:

   File path must include fixture folder [OK]

Hint: Always include fixture folder in file path [OK]

Common Mistakes:

• Using filename without path
• Thinking selector syntax is wrong
• Believing selectFile can't upload files

5. You want to test uploading multiple files at once using cy.selectFile. Which code snippet correctly uploads two files named doc1.pdf and image1.png located in the fixtures folder?

hard

A. cy.get('input[type=file]').selectFile({ files: ['doc1.pdf', 'image1.png'] })

B. cy.get('input[type=file]').selectFile('cypress/fixtures/doc1.pdf, cypress/fixtures/image1.png')

C. cy.get('input[type=file]').selectFile(['cypress/fixtures/doc1.pdf', 'cypress/fixtures/image1.png'])

D. cy.get('input[type=file]').selectFile(['doc1.pdf', 'image1.png'])

Solution

1. Step 1: Understand multiple file upload syntax

   cy.selectFile accepts an array of file paths to upload multiple files. Each path must be relative to the fixtures folder or absolute.

2. Step 2: Evaluate each option

   cy.get('input[type=file]').selectFile(['cypress/fixtures/doc1.pdf', 'cypress/fixtures/image1.png']) correctly provides an array with full fixture paths. cy.get('input[type=file]').selectFile('cypress/fixtures/doc1.pdf, cypress/fixtures/image1.png') uses a single string with comma-separated paths, which is invalid. cy.get('input[type=file]').selectFile({ files: ['doc1.pdf', 'image1.png'] }) uses an object with files array but missing paths. cy.get('input[type=file]').selectFile(['doc1.pdf', 'image1.png']) uses array without fixture folder path, which will fail.

3. Final Answer:

   cy.get('input[type=file]').selectFile(['cypress/fixtures/doc1.pdf', 'cypress/fixtures/image1.png']) -> Option C

4. Quick Check:

   Array of fixture paths = Correct multiple upload [OK]

Hint: Use array of full fixture paths for multiple files [OK]

Common Mistakes:

• Passing comma-separated string instead of array
• Omitting fixture folder in paths
• Using object without correct file paths