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'.