cy.get() with CSS selectors in Cypress - Build an Automation Script

Verify login form elements using cy.get() with CSS selectors

Preconditions (1)

Step 1: Use cy.get() with CSS selector '#email' to find the email input field

Step 2: Type '[e-mail]' into the email input field

Step 3: Use cy.get() with CSS selector '.password-input' to find the password input field

Step 4: Type 'Password123' into the password input field

Step 5: Use cy.get() with CSS selector 'button[type="submit"]' to find the login button

Step 6: Click the login button

Step 7: Use cy.get() with CSS selector '.welcome-message' to find the welcome message element

✅ Expected Result: The welcome message element is visible and contains the text 'Welcome, user!'

Automation Requirements - Cypress

Assertions Needed:

Verify email input field is visible before typing

Verify password input field is visible before typing

Verify login button is enabled before clicking

Verify welcome message is visible after login

Verify welcome message text equals 'Welcome, user!'

Best Practices:

Use CSS selectors that are stable and descriptive

Use cy.get() chaining with .should() for assertions

Avoid overly generic selectors like '*' or tag names alone

Use explicit assertions to confirm element states before actions

Keep selectors simple and maintainable

Automated Solution

Cypress

describe('Login form test using cy.get() with CSS selectors', () => {
  beforeEach(() => {
    cy.visit('https://example.com/login');
  });

  it('should login successfully and show welcome message', () => {
    cy.get('#email').should('be.visible').type('[e-mail]');
    cy.get('.password-input').should('be.visible').type('Password123');
    cy.get('button[type="submit"]').should('be.enabled').click();
    cy.get('.welcome-message').should('be.visible').and('have.text', 'Welcome, user!');
  });
});

This test script uses Cypress to automate the login form test.

First, cy.visit() opens the login page.

Then, cy.get() with CSS selectors finds each element: the email input by #email, the password input by .password-input, and the login button by button[type="submit"].

Before typing or clicking, .should() asserts the element is visible or enabled to avoid errors.

After clicking login, it checks the welcome message is visible and has the exact text 'Welcome, user!'.

This approach ensures the test waits for elements properly and uses clear, maintainable selectors.

Common Mistakes - 4 Pitfalls

{'mistake': "Using overly generic selectors like 'input' or '*' in cy.get()", 'why_bad': 'This can select multiple elements and cause flaky tests or wrong element interactions.', 'correct_approach': 'Use specific CSS selectors like IDs, classes, or attribute selectors to target the exact element.'}

{'mistake': 'Not asserting element visibility before typing or clicking', 'why_bad': 'Trying to interact with hidden or non-existent elements causes test failures.', 'correct_approach': "Use .should('be.visible') before actions to ensure the element is ready."}

Hardcoding selectors that may change frequently, like auto-generated classes

Not chaining assertions with cy.get(), causing timing issues

Bonus Challenge

Now add data-driven testing with 3 different sets of email and password inputs

Show Hint

Practice

1. What does cy.get() do in Cypress testing?

easy

A. Starts the Cypress test runner

B. Clicks on a button automatically

C. Runs JavaScript code inside the browser

D. Finds elements on the page using CSS selectors

Solution

1. Step 1: Understand the purpose of cy.get()

   cy.get() is used to locate elements on the web page by using CSS selectors.

2. Step 2: Differentiate from other Cypress commands

   Other commands like clicking or running code are separate; cy.get() only finds elements.

3. Final Answer:

   Finds elements on the page using CSS selectors -> Option D

4. Quick Check:

   cy.get() = Finds elements [OK]

Hint: Remember: cy.get() locates elements by CSS selectors [OK]

Common Mistakes:

• Thinking cy.get() clicks elements
• Confusing cy.get() with running scripts
• Assuming cy.get() starts tests

2. Which of the following is the correct syntax to select an element with class btn-primary using cy.get()?

easy

A. cy.get('#btn-primary')

B. cy.get('btn-primary')

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

D. cy.get('button .btn-primary')

Solution

1. Step 1: Understand CSS selector for class

   In CSS, a class selector uses a dot before the class name, so .btn-primary selects elements with that class.

2. Step 2: Check each option

   cy.get('#btn-primary') uses an ID selector (#), which is wrong here. cy.get('btn-primary') misses the dot, so it looks for a tag named 'btn-primary'. cy.get('button .btn-primary') incorrectly uses a descendant selector (space after button), selecting buttons containing .btn-primary elements.

3. Final Answer:

   cy.get('.btn-primary') -> Option C

4. Quick Check:

   Class selector = .classname [OK]

Hint: Use dot (.) before class names in CSS selectors [OK]

Common Mistakes:

• Using # instead of . for classes
• Omitting the dot before class name
• Confusing tag selectors with class selectors

3. Given the HTML snippet:

<ul>
  <li class='item'>Apple</li>
  <li class='item'>Banana</li>
  <li class='item'>Cherry</li>
</ul>

What will cy.get('.item').should('have.length', 3) check?

medium

A. That there are exactly 3 elements with class 'item'

B. That the first element with class 'item' contains '3'

C. That the list has 3 child elements regardless of class

D. That the page has 3 lists

Solution

1. Step 1: Understand cy.get('.item')

   This selects all elements with the class 'item', which are the three <li> elements.

2. Step 2: Understand .should('have.length', 3)

   This asserts that the number of selected elements is exactly 3.

3. Final Answer:

   That there are exactly 3 elements with class 'item' -> Option A

4. Quick Check:

   cy.get('.item').length = 3 [OK]

Hint: '.should(have.length, n)' checks number of matched elements [OK]

Common Mistakes:

• Thinking it checks content inside elements
• Confusing child count with class count
• Assuming it checks number of lists

4. You wrote cy.get('button#submit').click() but the test fails with "Cannot find element" error. What is the most likely cause?

medium

A. The button does not have an ID 'submit'

B. The selector should be cy.get('#submit button')

C. You must use cy.find() instead of cy.get()

D. The click() command is not supported on buttons

Solution

1. Step 1: Analyze the selector button#submit

   This selector looks for a <button> element with ID 'submit'. If the button does not have this ID, it won't be found.

2. Step 2: Check other options

   The selector should be cy.get('#submit button') reverses the selector incorrectly. You must use cy.find() instead of cy.get() is wrong because cy.get() is correct for global selection. The click() command is not supported on buttons is false; click() works on buttons.

3. Final Answer:

   The button does not have an ID 'submit' -> Option A

4. Quick Check:

   Selector must match element attributes [OK]

Hint: Verify element attributes match your selector exactly [OK]

Common Mistakes:

• Using wrong selector syntax
• Assuming click() doesn't work on buttons
• Confusing cy.get() with cy.find()

5. You want to select the second <li> element inside a <ul id='menu'>. Which cy.get() selector is correct?

hard

A. cy.get('ul#menu li[2]')

B. cy.get('#menu li:nth-child(2)')

C. cy.get('#menu li:eq(2)')

D. cy.get('ul#menu > li:nth-type(2)')

Solution

1. Step 1: Understand CSS nth-child selector

   li:nth-child(2) selects the second child <li> element inside its parent.

2. Step 2: Evaluate each option

   cy.get('ul#menu li[2]') uses invalid attribute selector. cy.get('#menu li:eq(2)') uses jQuery syntax not supported in CSS selectors. cy.get('ul#menu > li:nth-type(2)') uses invalid 'nth-type(2)' selector.

3. Final Answer:

   cy.get('#menu li:nth-child(2)') -> Option B

4. Quick Check:

   Use nth-child(n) to select nth element [OK]

Hint: Use :nth-child(n) to pick the nth child element [OK]

Common Mistakes:

• Using jQuery :eq() in CSS selectors
• Using attribute selectors incorrectly
• Confusing nth-child with nth-of-type