Drag and drop file upload in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the file input element for drag and drop upload.

Cypress

cy.get('[1]')

Drag options to blanks, or click blank then click option'

Aform#uploadForm

Bbutton.upload

Cdiv.dropzone

Dinput[type='file']

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting a button or div instead of the file input element.

Using a form selector which does not directly select the file input.

The file input element for uploading files is selected using input[type='file'].

2fill in blank

medium

Complete the code to attach a file named 'example.png' for drag and drop upload.

Cypress

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

Drag options to blanks, or click blank then click option'

Aexample.png

Bdocument.pdf

Cimage.jpg

Dtestfile.txt

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different file name than specified.

Forgetting the file extension.

The file example.png is the correct file to attach as per the instruction.

3fill in blank

hard

Fix the error in the code to simulate drag and drop file upload correctly.

Cypress

cy.get('input[type=file]').trigger('[1]', { dataTransfer: { files: ['example.png'] } })

Drag options to blanks, or click blank then click option'

Aclick

Bdrop

Cmouseover

Dkeydown

Attempts:

3 left

💡 Hint

Common Mistakes

Using click or mouseover events which do not simulate dropping files.

Using keyboard events which are unrelated.

The drop event simulates dropping the file onto the input for drag and drop upload.

4fill in blank

hard

Fill both blanks to create a test that uploads 'sample.pdf' by drag and drop and verifies the file name is shown.

Cypress

cy.get('input[type=file]').attachFile('[1]')
cy.get('.file-name').should('[2]', 'sample.pdf')

Drag options to blanks, or click blank then click option'

Asample.pdf

Bcontain

Chave.text

Dexample.png

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file name in attachFile.

Using have.text which requires exact match instead of contain.

The file sample.pdf is attached, and the assertion checks if the element contains the file name.

5fill in blank

hard

Fill all three blanks to write a test that uploads 'photo.jpg' by drag and drop, triggers the drop event, and asserts the upload success message.

Cypress

const fileName = '[1]'
cy.get('input[type=file]').attachFile(fileName)
cy.get('input[type=file]').trigger('[2]', { dataTransfer: { files: [fileName] } })
cy.get('.upload-message').should('[3]', 'Upload successful')

Drag options to blanks, or click blank then click option'

Aphoto.jpg

Bdrop

Ccontain

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event name like 'click' instead of 'drop'.

Using wrong assertion method like 'have.text' instead of 'contain'.

Mismatching file names.

The test attaches photo.jpg, triggers the drop event to simulate drag and drop, and asserts the message contains 'Upload successful'.

Practice

1. What is the main purpose of using subjectType: 'drag-n-drop' in Cypress file upload tests?

easy

A. To simulate dragging and dropping a file into an upload area

B. To select a file from the file system dialog

C. To upload files using a URL link

D. To test keyboard navigation on file inputs

Solution

1. Step 1: Understand the drag-n-drop simulation

   The subjectType: 'drag-n-drop' option in Cypress simulates the user dragging a file and dropping it into a target area, mimicking real user behavior.

2. Step 2: Differentiate from other upload methods

   This differs from selecting a file via a dialog or uploading by URL, which are not drag-and-drop actions.

3. Final Answer:

   To simulate dragging and dropping a file into an upload area -> Option A

4. Quick Check:

   Drag-n-drop simulation = To simulate dragging and dropping a file into an upload area [OK]

Hint: Drag-n-drop means simulating file drag into upload box [OK]

Common Mistakes:

• Confusing drag-n-drop with file dialog selection
• Thinking it uploads files from URLs
• Assuming it tests keyboard navigation

2. Which of the following is the correct Cypress command syntax to drag and drop a file named example.png into an element with selector #dropzone?

easy

A. cy.get('#dropzone').attachFile('example.png', { subjectType: 'drag-n-drop' })

B. cy.get('#dropzone').uploadFile('example.png', { dragDrop: true })

C. cy.get('#dropzone').dragFile('example.png')

D. cy.get('#dropzone').attachFile('example.png')

Solution

1. Step 1: Identify the correct command and options

   The Cypress plugin for file upload uses attachFile with the option { subjectType: 'drag-n-drop' } to simulate drag and drop.

2. Step 2: Verify selector and file name usage

   The command targets #dropzone and attaches example.png correctly with the required option.

3. Final Answer:

   cy.get('#dropzone').attachFile('example.png', { subjectType: 'drag-n-drop' }) -> Option A

4. Quick Check:

   attachFile + subjectType drag-n-drop = cy.get('#dropzone').attachFile('example.png', { subjectType: 'drag-n-drop' }) [OK]

Hint: Use attachFile with subjectType 'drag-n-drop' for drag-drop [OK]

Common Mistakes:

• Using non-existent commands like uploadFile or dragFile
• Omitting the subjectType option
• Using attachFile without drag-n-drop option

3. Given the following Cypress test code snippet, what will be the result if the file testfile.pdf is successfully dropped?

cy.get('#upload-area').attachFile('testfile.pdf', { subjectType: 'drag-n-drop' })
cy.get('#upload-message').should('contain.text', 'Upload successful')

medium

A. The test fails because the selector #upload-message is incorrect

B. The test fails because attachFile does not support drag-n-drop

C. The test passes only if the file is smaller than 1MB

D. The test passes if the upload message contains 'Upload successful'

Solution

1. Step 1: Understand the attachFile usage

   The code uses attachFile with subjectType: 'drag-n-drop' correctly to simulate dropping testfile.pdf.

2. Step 2: Check the assertion on upload message

   The test asserts that the element with #upload-message contains the text 'Upload successful', which indicates a successful upload.

3. Final Answer:

   The test passes if the upload message contains 'Upload successful' -> Option D

4. Quick Check:

   Correct attachFile + assertion = The test passes if the upload message contains 'Upload successful' [OK]

Hint: Check assertion text after attachFile drag-n-drop [OK]

Common Mistakes:

• Assuming attachFile doesn't support drag-n-drop
• Ignoring the assertion on upload message
• Confusing selector correctness without context

4. You wrote this Cypress test to drag and drop a file but it fails with an error: attachFile is not a function. What is the most likely cause?

cy.get('#dropzone').attachFile('file.txt', { subjectType: 'drag-n-drop' })

medium

A. The selector '#dropzone' is incorrect

B. The Cypress file upload plugin is not installed or imported

C. The file 'file.txt' does not exist in the fixtures folder

D. The subjectType option is misspelled

Solution

1. Step 1: Analyze the error message

   The error attachFile is not a function means Cypress does not recognize the attachFile command.

2. Step 2: Identify missing plugin or import

   This usually happens if the Cypress file upload plugin is not installed or the command is not imported in commands.js.

3. Final Answer:

   The Cypress file upload plugin is not installed or imported -> Option B

4. Quick Check:

   attachFile error = missing plugin/import [OK]

Hint: attachFile error means missing plugin or import [OK]

Common Mistakes:

• Blaming selector without checking plugin
• Assuming file missing causes attachFile error
• Ignoring plugin installation step

5. You want to test drag and drop file upload for multiple files at once using Cypress. Which approach correctly simulates dropping two files named img1.png and img2.png into the element .upload-area?

hard

A. cy.get('.upload-area').attachFile('img1.png').attachFile('img2.png', { subjectType: 'drag-n-drop' })

B. cy.get('.upload-area').attachFile('img1.png,img2.png', { subjectType: 'drag-n-drop' })

C. cy.get('.upload-area').attachFile(['img1.png', 'img2.png'], { subjectType: 'drag-n-drop' })

D. cy.get('.upload-area').attachFile(['img1.png', 'img2.png'])

Solution

1. Step 1: Understand multiple file upload syntax

   The Cypress attachFile command accepts an array of file names to upload multiple files at once.

2. Step 2: Include drag-n-drop option for simulation

   To simulate drag and drop, the option { subjectType: 'drag-n-drop' } must be included.

3. Step 3: Verify correct usage of array and options

   cy.get('.upload-area').attachFile(['img1.png', 'img2.png'], { subjectType: 'drag-n-drop' }) correctly passes an array of files and the drag-n-drop option together.

4. Final Answer:

   cy.get('.upload-area').attachFile(['img1.png', 'img2.png'], { subjectType: 'drag-n-drop' }) -> Option C

5. Quick Check:

   Multiple files + drag-n-drop = cy.get('.upload-area').attachFile(['img1.png', 'img2.png'], { subjectType: 'drag-n-drop' }) [OK]

Hint: Use array of files with drag-n-drop option for multiple uploads [OK]

Common Mistakes:

• Passing files as comma-separated string instead of array
• Calling attachFile twice instead of once with array
• Omitting drag-n-drop option for simulation