Drag and drop file upload in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Cypress drag and drop file upload test

What will be the test result when running this Cypress test code for drag and drop file upload?

Cypress

describe('Drag and Drop File Upload', () => {
  it('uploads a file via drag and drop', () => {
    cy.visit('/upload')
    cy.get('#dropzone').attachFile('example.pdf', { subjectType: 'drag-n-drop' })
    cy.get('#uploaded-file-name').should('contain.text', 'example.pdf')
  })
})

A Test fails because the selector '#dropzone' does not exist

B Test fails with error: attachFile is not a function

C Test passes because the file is correctly attached and verified

D Test passes but the assertion fails due to wrong file name

💡 Hint

Check if the attachFile command is used correctly with drag-n-drop option.

The test visits the upload page, attaches 'example.pdf' to the dropzone using drag-n-drop simulation, then verifies the uploaded file name is displayed. This is the correct usage of the attachFile plugin for drag and drop.

❓ locator

intermediate

Best locator for drag and drop file upload area

Which locator is the best practice to select the drag and drop upload area for testing accessibility and reliability?

A cy.get('[aria-label="File Upload Dropzone"]')

B cy.get('div').contains('Drop files here')

C cy.get('#upload-area')

D cy.get('.dropzone')

💡 Hint

Consider accessibility attributes and stable selectors.

Using an ARIA label like aria-label="File Upload Dropzone" ensures accessibility and a stable, descriptive locator that is less likely to change than classes or text content.

❓ assertion

advanced

Correct assertion for verifying file upload success message

Which assertion correctly verifies that the success message 'Upload complete' is visible after drag and drop file upload?

A cy.get('#message').should('have.text', 'Upload complete')

B cy.get('#message').should('contain.text', 'Upload complete')

C cy.get('#message').should('include.text', 'Upload complete')

D cy.get('#message').should('be.visible').and('contain', 'Upload complete')

💡 Hint

Check for visibility and partial text match.

Option D checks that the message element is visible and contains the expected text, which is the most reliable way to assert success messages in Cypress.

🔧 Debug

advanced

Identify the error in this drag and drop file upload test code

What error will this Cypress test code produce when running drag and drop file upload?

Cypress

cy.get('#dropzone').attachFile('test.png')
cy.get('#uploaded-file').should('contain', 'test.png')

A Test fails because attachFile requires subjectType: 'drag-n-drop' for dropzones

B Error: attachFile missing drag-n-drop option for dropzone

C Test passes without errors

D Error: Cannot find file 'test.png'

💡 Hint

Consider how attachFile works with drag and drop elements.

When uploading files via drag and drop, attachFile must be called with { subjectType: 'drag-n-drop' } option. Omitting it causes the test to fail because the file is not attached correctly.

❓ framework

expert

Best practice for testing drag and drop file upload in Cypress with accessibility

Which approach best combines accessibility, reliability, and maintainability when testing drag and drop file upload in Cypress?

A Use cy.get('#upload').attachFile('file.pdf') without drag-n-drop option and assert with cy.get('#message').should('have.text', 'Upload complete')

B Use cy.get('[aria-label="Upload Area"]').attachFile('file.pdf', { subjectType: 'drag-n-drop' }) and assert visibility and text with should('be.visible').and('contain.text', 'Upload complete')

C Use cy.get('.dropzone').attachFile('file.pdf', { subjectType: 'drag-n-drop' }) and assert with cy.contains('Upload complete')

D Use cy.get('input[type=file]').attachFile('file.pdf') and assert with cy.get('.success').should('exist')

💡 Hint

Think about accessibility attributes and proper assertions.

Option B uses an accessible locator with aria-label, correctly uses the drag-n-drop option, and asserts both visibility and text content, making it the best practice for maintainable and reliable tests.