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