cy.click() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test snippet?

Consider the following Cypress test code. What will be the test execution result?

Cypress

cy.get('button#submit').click();

A The button with id 'submit' is clicked and the test passes if the button exists.

B The test fails because 'button#submit' is an invalid selector.

C The test throws a syntax error because 'click' needs parentheses.

D The test does nothing because 'click' is not a valid Cypress command.

💡 Hint

Remember that cy.get() finds elements and click() simulates a click.

The cy.get('button#submit') finds the button with id 'submit'. The click() command clicks it. If the button exists, the test passes.

❓ assertion

intermediate

Which assertion correctly verifies a button was clicked?

You want to check that clicking a button changes its text to 'Clicked!'. Which assertion is correct?

Cypress

cy.get('button#action').click();

A cy.get('button#action').should('contain', 'Click');

B cy.get('button#action').should('have.text', 'Clicked!');

C cy.get('button#action').click().should('have.value', 'Clicked!');

D cy.get('button#action').should('be.visible').click();

💡 Hint

Check the text content after clicking the button.

Option B correctly asserts the button's text changed to 'Clicked!'. Option B checks for partial text 'Click' which is not exact. Option B wrongly checks 'value' property. Option B only clicks but does not assert.

❓ locator

advanced

Which locator is best for clicking a button with dynamic classes?

You need to click a button that has a dynamic class name but a stable data attribute data-cy='submit-btn'. Which locator is best?

A cy.get('button[data-cy="submit-btn"]').click();

B cy.get('button.submit-btn').click();

C cy.get('button[class^="btn-"]').click();

D cy.get('button#submit').click();

💡 Hint

Use stable attributes for selectors to avoid flaky tests.

Option A uses the stable data attribute selector which is best practice. Option A uses a class that is dynamic and may change. Option A uses a partial class selector which is fragile. Option A uses an id that may not exist.

🔧 Debug

advanced

Why does this Cypress click command fail?

Given the code below, why does the click command fail?

Cypress

cy.get('button#save').click(); // fails with 'element is not visible' error

A Cypress does not support clicking buttons with ids.

B The selector 'button#save' is invalid and finds no element.

C The button is hidden or covered, so Cypress cannot click it.

D The click command is missing parentheses.

💡 Hint

Check if the element is visible and not covered by other elements.

Cypress requires elements to be visible and not covered to click. If the button is hidden or overlapped, the click fails with this error.

❓ framework

expert

What is the effect of chaining multiple clicks in Cypress?

Consider this code snippet:

cy.get('button#multi').click().click().click();

What happens when this runs?

A The clicks happen simultaneously causing unpredictable behavior.

B Only the first click happens; the rest are ignored due to Cypress command queue behavior.

C The test throws a runtime error because multiple clicks are not allowed in one chain.

D The button is clicked three times sequentially, each click waits for the previous to finish.

💡 Hint

Remember how Cypress queues commands and executes them one by one.

Cypress queues commands and runs them sequentially. Each click() waits for the previous to complete, so the button is clicked three times in order.