Element handling with Cypress

cy.getByTestId('full-name-input').type('Ada Lovelace');
cy.getByTestId('submit-text-box').click();
cy.getByTestId('output-name').should('have.text', 'Name: Ada Lovelace');

cy.getByTestId('checkbox-select-all').check();
cy.getByTestId('checkbox-documents').should('be.checked');

cy.getByTestId('native-select').select('Mumbai');
cy.getByTestId('native-select-result').should('have.text', 'Selected: Mumbai');

cy.getByTestId('autocomplete-input').type('Ben');
cy.getByTestId('autocomplete-option-bengaluru').click();
cy.getByTestId('autocomplete-result').should('have.text', 'Picked: Bengaluru');

cy.contains('[data-testid="table-row"]', 'Priya')
  .find('[data-testid^="delete-row-"]').click();
cy.getByTestId('table-row').should('have.length', 2);

cy.getByTestId('double-click-me').dblclick();
cy.getByTestId('right-click-me').rightclick();
cy.getByTestId('right-click-result').should('be.visible');

// 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');

cy.getByTestId('single-frame')
  .its('0.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('[data-testid="single-frame-button"]').click();

// 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');

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

cy.getByTestId('file-input').selectFile('cypress/fixtures/sample.txt');
cy.getByTestId('uploaded-file-info').should('contain', 'sample.txt');

// CSS :hover needs a real pointer event: npm i -D cypress-real-events
// Scroll to the centre: Cypress scrolls to the top by default, where a sticky
// header can sit on top of the element and receive the hover instead.
cy.getByTestId('tooltip-trigger').realHover({ scrollBehavior: 'center' });
cy.getByTestId('tooltip').should('be.visible');

cy.getByTestId('loading-1-start').click();
cy.getByTestId('loading-1-result', { timeout: 10000 }).should('contain', 'Hello World!');

cy.get('shadow-counter').shadow().find('#inc').click();
cy.get('shadow-counter').shadow().find('#count').should('have.text', 'Count: 1');

cy.get('[data-testid=nested-outer-host]').shadow().find('qa-nested-inner')
  .shadow().find('[data-testid=nested-input]').type('Ada');
cy.get('[data-testid=nested-outer-host]').shadow().find('qa-nested-inner')
  .shadow().find('[data-testid=nested-submit]').click();

// Closed root: force it open before the app loads.
cy.visit('/shadow-dom', {
  onBeforeLoad(win) {
    const orig = win.Element.prototype.attachShadow;
    win.Element.prototype.attachShadow = function (init) { return orig.call(this, { ...init, mode: 'open' }); };
  },
});
cy.get('[data-testid=closed-host]').shadow().find('[data-testid=closed-input]').type('Ada');

cy.get('[data-testid=shadow-in-iframe]').its('0.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('frame-shadow').shadow()
  .find('frame-shadow-inner').shadow()
  .find('[data-testid=frame-nested-input]').type('Ada');

// Cypress runs inside the page, so the same-origin policy applies:
// contentDocument of a cross-origin frame is null. Test that frame's page
// directly (cy.visit its URL) or assert only what the parent page shows.
cy.getByTestId('probe-frame').click();
cy.getByTestId('probe-result').should('contain', 'cross-origin');

// cy.click() fails: "is being covered by another element".
cy.getByTestId('remove-overlay').click();
cy.getByTestId('covered-button').click();
cy.getByTestId('covered-result').should('be.visible');

cy.contains('tr', 'Farah Siddiqui').find('input[type=checkbox]').check();
cy.getByTestId('selected-users').should('contain', 'EMP-1043');

cy.getByTestId('sort-amount').click();
cy.getByTestId('sort-th-amount').should('have.attr', 'aria-sort', 'ascending');
cy.get('[data-testid="sort-row"] [data-col="amount"]').then(($cells) => {
  const nums = [...$cells].map((c) => c.innerText).filter((t) => t !== '—')
    .map((t) => Number(t.replace(/[^\d.]/g, '')));
  expect(nums).to.deep.equal([...nums].sort((a, b) => a - b));
});

cy.contains('label', 'Delivery Address')          // cy.contains ignores extra whitespace
  .invoke('attr', 'for').then((id) => cy.get('#' + id).type('12 MG Road'));

cy.window().then((win) => {
  cy.getByTestId('pseudo-price').then(($el) => {
    expect(win.getComputedStyle($el[0], '::before').content).to.contain('₹');
  });
});

cy.document().then((doc) => {
  const code = doc.evaluate("//span[@data-testid='comment-target']/following-sibling::comment()",
    doc, null, 2 /* STRING_TYPE */, null).stringValue.trim();
  expect(code).to.eq('secret-code: QA-2026');
});

function findOrder(id) {
  cy.get('[data-testid=orders-table]').then(($t) => {
    if ($t.find(`[data-order-id="${id}"]`).length) return;
    cy.getByTestId('orders-next').should('not.be.disabled').click();
    findOrder(id);                                       // recurse — no loops in Cypress chains
  });
}
findOrder('ORD-1042');
cy.get('[data-order-id="ORD-1042"]').should('be.visible');

cy.getByTestId('key-input').type('{enter}');
cy.getByTestId('key-result').should('have.text', 'You entered: Enter');