Hidden elements handling in Cypress - Build an Automation Script

Verify interaction with hidden elements on a web page

Preconditions (2)

Step 1: Open the web page at URL 'https://example.com/hidden-elements'

Step 2: Locate the hidden button with id 'hidden-btn'

Step 3: Force click the hidden button

Step 4: Locate the hidden input field with id 'hidden-input'

Step 5: Force type the text 'Test Input' into the hidden input field

Step 6: Verify that a confirmation message with id 'confirmation-msg' becomes visible

✅ Expected Result: The hidden button is clicked successfully, the hidden input field receives the text, and the confirmation message is visible on the page

Automation Requirements - Cypress

Assertions Needed:

Verify the confirmation message is visible after interaction

Verify the hidden input field contains the typed text

Best Practices:

Use cy.get() with proper selectors

Use { force: true } option to interact with hidden elements

Use assertions like .should('be.visible') and .should('have.value')

Avoid flaky tests by waiting for elements to exist before interaction

Automated Solution

Cypress

describe('Hidden elements handling test', () => {
  beforeEach(() => {
    cy.visit('https://example.com/hidden-elements');
  });

  it('should interact with hidden elements using force option', () => {
    // Click the hidden button
    cy.get('#hidden-btn').click({ force: true });

    // Type into the hidden input field
    cy.get('#hidden-input').type('Test Input', { force: true });

    // Verify the hidden input field contains the typed text
    cy.get('#hidden-input').should('have.value', 'Test Input');

    // Verify the confirmation message is visible
    cy.get('#confirmation-msg').should('be.visible');
  });
});

This Cypress test visits the target page before each test to ensure a fresh state.

It uses cy.get() with the element IDs to locate the hidden button and input field.

Since these elements are hidden, the { force: true } option is used with click() and type() commands to bypass Cypress's default visibility checks.

Assertions check that the input field contains the typed text and that the confirmation message is visible, confirming the interactions succeeded.

This approach follows best practices by using explicit selectors, forcing actions on hidden elements, and verifying outcomes with clear assertions.

Common Mistakes - 3 Pitfalls

Trying to click or type on hidden elements without using { force: true }

Using vague or overly broad selectors like classes that match multiple elements

Not asserting the result of the interaction, such as missing confirmation message checks

Bonus Challenge

Now add data-driven testing with 3 different input texts for the hidden input field

Show Hint