Drag and drop file upload in Cypress - Test Execution Trace

Test Overview

This test checks if a user can successfully upload a file by dragging and dropping it onto the upload area. It verifies that the file appears in the upload list after dropping.

Test Code - Cypress

Cypress

describe('Drag and drop file upload', () => {
  it('uploads a file by drag and drop', () => {
    cy.visit('https://example.com/upload');
    const fileName = 'sample.txt';
    cy.get('#drag-drop-area').attachFile(fileName, { subjectType: 'drag-n-drop' });
    cy.get('#upload-list').should('contain.text', fileName);
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.com/upload'	Upload page with drag and drop area visible	URL is correct and page loaded	PASS
3	Finds the drag and drop area with selector '#drag-drop-area'	Drag and drop area is visible and ready for interaction	Element '#drag-drop-area' exists and is visible	PASS
4	Simulates dragging and dropping the file 'sample.txt' onto the drag and drop area	File 'sample.txt' is dropped onto the upload area	-	PASS
5	Checks that the upload list '#upload-list' contains the text 'sample.txt'	Upload list shows 'sample.txt' as uploaded	Verify '#upload-list' contains 'sample.txt'	PASS

Failure Scenario

Failing Condition: The drag and drop area selector '#drag-drop-area' is missing or file drop does not trigger upload

Execution Trace Quiz - 3 Questions

What does the test verify after dropping the file?

A The file is deleted from the system

B The page URL changes

C The file name appears in the upload list

D The drag and drop area disappears

Key Result

Always verify that the element selectors used for drag and drop are correct and visible before simulating file upload to avoid false failures.