</>

Technology

Cypress

Difficulty

Intermediate

Interview Question

How do you handle dropdowns, checkboxes, and file uploads in Cypress?

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')
})

Follow AutomateQA

Related Topics