Answer
Handling Dropdowns, Checkboxes, and File Uploads
Native HTML Dropdown — cy.select()
JavaScript
// Select by visible text
cy.get('select#country').select('India')
// Select by value attribute
cy.get('select#role').select('admin')
// Select by index (0-based)
cy.get('select').select(2)
// Multi-select
cy.get('select[multiple]').select(['Alice', 'Bob', 'Charlie'])
// Verify selection
cy.get('select#country').should('have.value', 'IN')
cy.get('select').find(':selected').should('have.text', 'India')
Custom Dropdown (Not Native Select)
JavaScript
// Click trigger to open dropdown
cy.get('[data-testid="dropdown-trigger"]').click()
// Then click the option
cy.get('[data-testid="dropdown-menu"]')
.contains('India')
.click()
// Verify
cy.get('[data-testid="selected-value"]').should('contain', 'India')
// Close if needed
cy.get('body').click() // click outside to close
Checkboxes
JavaScript
// Check a checkbox
cy.get('#terms-checkbox').check()
cy.get('[data-testid="remember-me"]').check()
// Uncheck
cy.get('#newsletter').uncheck()
// Check by value
cy.get('input[type="checkbox"]').check('option1')
// Check multiple
cy.get('input[type="checkbox"]').check(['cypress', 'selenium', 'playwright'])
// Verify state
cy.get('#terms-checkbox').should('be.checked')
cy.get('#newsletter').should('not.be.checked')
Radio Buttons
JavaScript
cy.get('input[type="radio"][value="male"]').check()
cy.get('[name="gender"]').check('female')
// Verify
cy.get('input[type="radio"][value="male"]').should('be.checked')
File Upload — cy.selectFile()
JavaScript
// Upload a file from cypress/fixtures/
cy.get('input[type="file"]').selectFile('cypress/fixtures/sample.pdf')
// Upload from file system path
cy.get('input[type="file"]').selectFile('path/to/file.csv')
// Drag and drop file
cy.get('[data-testid="drop-zone"]').selectFile('cypress/fixtures/sample.pdf', {
action: 'drag-drop',
})
// Upload multiple files
cy.get('input[type="file"][multiple]').selectFile([
'cypress/fixtures/file1.pdf',
'cypress/fixtures/file2.pdf',
])
// Verify file was uploaded
cy.get('[data-testid="file-name"]').should('contain', 'sample.pdf')
cy.get('[data-testid="upload-success"]').should('be.visible')
Complete Form Test
JavaScript
it('should fill registration form', () => {
cy.visit('/register')
// Text inputs
cy.get('#name').type('Alice QA')
cy.get('#email').type('alice@test.com')
// Native dropdown
cy.get('#country').select('India')
// Custom dropdown
cy.get('[data-testid="role-dropdown"]').click()
cy.get('[data-testid="role-option-sdet"]').click()
// Checkbox
cy.get('#terms').check()
cy.get('#newsletter').check()
// Radio
cy.get('[value="female"]').check()
// File upload
cy.get('input[type="file"]').selectFile('cypress/fixtures/resume.pdf')
// Submit
cy.get('[data-testid="register-btn"]').click()
cy.get('[data-testid="success-msg"]').should('contain', 'Registration successful')
})
