Cy
JavaScript · Cypress
Element handling with Cypress
15 copy-ready Cypress recipes, each linked to a live challenge page to run them against.
Conventions
// Uses the getByTestId custom command from the setup above; cy.visit('/<challenge>') first.1Type into inputs & read output
Practise on /elements/text-box →cy.getByTestId('full-name-input').type('Ada Lovelace');
cy.getByTestId('submit-text-box').click();
cy.getByTestId('output-name').should('have.text', 'Name: Ada Lovelace');2Checkboxes & select-all
Practise on /elements/check-box →cy.getByTestId('checkbox-select-all').check();
cy.getByTestId('checkbox-documents').should('be.checked');3Native <select> dropdown
Practise on /widgets/selects-autocomplete →cy.getByTestId('native-select').select('Mumbai');
cy.getByTestId('native-select-result').should('have.text', 'Selected: Mumbai');4Autocomplete suggestions
Practise on /widgets/selects-autocomplete →cy.getByTestId('autocomplete-input').type('Ben');
cy.getByTestId('autocomplete-option-bengaluru').click();
cy.getByTestId('autocomplete-result').should('have.text', 'Picked: Bengaluru');5Find a table row by its text
Practise on /elements/web-tables →cy.contains('[data-testid="table-row"]', 'Priya')
.find('[data-testid^="delete-row-"]').click();
cy.getByTestId('table-row').should('have.length', 2);6Double-click & right-click
Practise on /elements/buttons →cy.getByTestId('double-click-me').dblclick();
cy.getByTestId('right-click-me').rightclick();
cy.getByTestId('right-click-result').should('be.visible');7JS alert, confirm & prompt
Practise on /alerts →// Cypress auto-accepts alerts & confirms; stub prompt yourself.
cy.window().then((win) => cy.stub(win, 'prompt').returns('Ada'));
cy.getByTestId('prompt-button').click();
cy.getByTestId('prompt-result').should('have.text', 'You entered Ada');
cy.on('window:confirm', () => false); // click "Cancel"
cy.getByTestId('confirm-button').click();
cy.getByTestId('confirm-result').should('have.text', 'You selected Cancel');8Iframes & nested iframes
Practise on /frames →cy.getByTestId('single-frame')
.its('0.contentDocument.body').should('not.be.empty')
.then(cy.wrap)
.find('[data-testid="single-frame-button"]').click();9New tabs & windows
Practise on /windows →// Cypress drives a single tab — drop target="_blank" and stay in it.
cy.getByTestId('new-tab-button').invoke('removeAttr', 'target').click();
cy.getByTestId('new-tab-heading').should('be.visible');10HTML5 drag & drop
Practise on /interactions/droppable →const dataTransfer = new DataTransfer();
cy.getByTestId('draggable-box').trigger('dragstart', { dataTransfer });
cy.getByTestId('accept-zone').trigger('drop', { dataTransfer });
cy.getByTestId('accept-zone').should('contain', 'Accept (1)');11File upload
Practise on /elements/upload-download →cy.getByTestId('file-input').selectFile('cypress/fixtures/sample.txt');
cy.getByTestId('uploaded-file-info').should('contain', 'sample.txt');12Hover tooltips
Practise on /widgets/tooltips-menus →// CSS :hover needs a real pointer event: npm i -D cypress-real-events
cy.getByTestId('tooltip-trigger').realHover();
cy.getByTestId('tooltip').should('be.visible');13Wait for dynamically loaded content
Practise on /dynamic/dynamic-loading →cy.getByTestId('loading-1-start').click();
cy.getByTestId('loading-1-result', { timeout: 10000 }).should('contain', 'Hello World!');14Shadow DOM
Practise on /shadow-dom →cy.get('shadow-counter').shadow().find('#inc').click();
cy.get('shadow-counter').shadow().find('#count').should('have.text', 'Count: 1');15Keyboard keys
Practise on /interactions/key-presses →cy.getByTestId('key-input').type('{enter}');
cy.getByTestId('key-result').should('have.text', 'You entered: Enter');