Why element selection drives interaction in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select a button with the class 'submit-btn' using Cypress.

Cypress

cy.get('[1]').click()

Drag options to blanks, or click blank then click option'

Abutton.submit-btn

B#submit-btn

Csubmit-btn

D.submit-btn

Attempts:

3 left

💡 Hint

Common Mistakes

Using an ID selector (#submit-btn) instead of a class selector

Omitting the dot before the class name

Using the tag name without the class

The cy.get() command selects elements by CSS selector. Using .submit-btn selects elements with the class submit-btn.

2fill in blank

medium

Complete the code to select an input element with the attribute name='email' using Cypress.

Cypress

cy.get('[1]').type('[e-mail]')

Drag options to blanks, or click blank then click option'

A[email='input']

Binput#email

Cinput[name='email']

Dinput.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using ID selector instead of attribute selector

Incorrect attribute syntax like [email='input']

Using class selector when attribute selector is needed

The selector input[name='email'] selects an input element with the attribute name equal to email.

3fill in blank

hard

Fix the error in the code to select a button with text 'Submit' using Cypress.

Cypress

cy.contains('[1]').click()

Drag options to blanks, or click blank then click option'

A'Submit'

Bbutton:contains('Submit')

Cbutton[text='Submit']

Dbutton.submit

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS pseudo selectors inside cy.contains()

Passing a selector string instead of text

Using attribute selectors instead of text

The cy.contains() command takes the text content directly as a string, so just use 'Submit'.

4fill in blank

hard

Fill both blanks to select all list items inside a <ul> with class 'menu' and check their count.

Cypress

cy.get('[1]').should('[2]', 5)

Drag options to blanks, or click blank then click option'

Aul.menu li

Bhave.length

Chave.lengthOf

Dul.menu > li

Attempts:

3 left

💡 Hint

Common Mistakes

Using direct child selector (>) which may miss nested items

Using incorrect assertion like 'have.lengthOf'

Selecting only the

instead of its
• children

ul.menu li selects all li elements inside a ul with class menu. The assertion have.length checks the number of matched elements.

5fill in blank

hard

Fill all three blanks to select an input with id 'search', type 'cypress', and verify its value.

Cypress

cy.get('[1]').[2]('cypress').should('[3]', 'cypress')

Drag options to blanks, or click blank then click option'

A#search

Btype

Chave.value

D.search-input

Attempts:

3 left

💡 Hint

Common Mistakes

Using class selector instead of ID

Using fill() instead of type()

Using wrong assertion like 'have.text' instead of 'have.value'

cy.get('#search') selects the input by ID. type('cypress') enters text. should('have.value', 'cypress') asserts the input's value.

Practice

1. Why is choosing the right element selector important in Cypress tests?

easy

A. It automatically fixes broken tests.

B. It makes the test run faster by skipping elements.

C. It ensures the test interacts with the correct element on the page.

D. It changes the page layout for testing.

Solution

1. Step 1: Understand element selection role

   Choosing the right selector targets the exact element you want to test.

2. Step 2: Recognize test reliability impact

   If the wrong element is selected, the test may fail or behave unpredictably.

3. Final Answer:

   It ensures the test interacts with the correct element on the page. -> Option C

4. Quick Check:

   Correct element selection = reliable test [OK]

Hint: Pick unique selectors to target elements precisely [OK]

Common Mistakes:

• Assuming any selector works equally well
• Using selectors that match multiple elements
• Ignoring page changes that break selectors

2. Which of the following is the best way to select an element in Cypress?

easy

A. cy.get('.button')

B. cy.get('#submit-button')

C. cy.get('div')

D. cy.get('input[type="text"]')

Solution

1. Step 1: Evaluate selector specificity

   ID selectors like '#submit-button' are unique and stable, making them best for selection.

2. Step 2: Compare other selectors

   Class selectors or tag selectors may match multiple elements, causing unreliable tests.

3. Final Answer:

   cy.get('#submit-button') -> Option B

4. Quick Check:

   Use unique IDs for stable selection [OK]

Hint: Use IDs or data attributes for unique element selection [OK]

Common Mistakes:

• Using generic tags that match many elements
• Relying on classes that change often
• Not checking if selector is unique

3. What will happen if you run this Cypress code?

cy.get('.menu-item').click()

Assuming there are 3 elements with class 'menu-item'.

medium

A. Cypress clicks the first element with class 'menu-item'.

B. Cypress clicks all elements with class 'menu-item'.

C. Cypress throws an error because multiple elements match.

D. Cypress clicks the last element with class 'menu-item'.

Solution

1. Step 1: Understand cy.get behavior

   cy.get('.menu-item') selects all matching elements but commands act on the first by default.

2. Step 2: Analyze click command effect

   The click() command clicks only the first matched element unless chained with .each() or .eq().

3. Final Answer:

   Cypress clicks the first element with class 'menu-item'. -> Option A

4. Quick Check:

   cy.get() selects all, commands act on first [OK]

Hint: cy.get() selects all but acts on first element by default [OK]

Common Mistakes:

• Thinking click() affects all matched elements
• Expecting an error for multiple matches
• Assuming last element is clicked

4. You wrote this Cypress test:

cy.get('#login').click()

But the test fails with 'Cannot read property click of undefined'. What is the likely cause?

medium

A. The element with ID 'login' does not exist on the page.

B. The click() command is misspelled.

C. cy.get() cannot select elements by ID.

D. The test needs a wait() before click().

Solution

1. Step 1: Understand error meaning

   'Cannot read property click of undefined' means cy.get() did not find the element, returning undefined.

2. Step 2: Check element existence

   If the element with ID 'login' is missing or not loaded, cy.get('#login') fails to find it.

3. Final Answer:

   The element with ID 'login' does not exist on the page. -> Option A

4. Quick Check:

   Missing element causes undefined and click error [OK]

Hint: Check if element exists before clicking [OK]

Common Mistakes:

• Assuming syntax error causes this
• Thinking cy.get() can't select by ID
• Adding wait() without verifying element presence

5. You want to click a button that sometimes has the class 'btn-primary' and sometimes 'btn-secondary'. Which selector is best to ensure your Cypress test clicks the correct button reliably?

hard

A. cy.get('button.btn-primary, button.btn-secondary').click()

B. cy.get('button').click()

C. cy.get('.btn-primary').click()

D. cy.get('[data-cy="submit-button"]').click()

Solution

1. Step 1: Identify selector stability

   Class names change, so relying on them can cause flaky tests.

2. Step 2: Use data attributes for stable selection

   Selectors like '[data-cy="submit-button"]' are stable and unique, unaffected by style changes.

3. Step 3: Compare options

   cy.get('button.btn-primary, button.btn-secondary').click() depends on classes that vary; cy.get('button').click() is too broad; cy.get('.btn-primary').click() misses 'btn-secondary' case.

4. Final Answer:

   cy.get('[data-cy="submit-button"]').click() -> Option D

5. Quick Check:

   Use data attributes for reliable element selection [OK]

Hint: Use data attributes for stable selectors, not classes [OK]

Common Mistakes:

• Using multiple class selectors that change
• Selecting all buttons without filtering
• Ignoring stable custom attributes