Best practices for selectors in Cypress - Build an Automation Script

Verify login form elements using best practice selectors

Preconditions (1)

Step 1: Locate the email input field using a data-cy attribute and type '[e-mail]'

Step 2: Locate the password input field using a data-cy attribute and type 'Password123!'

Step 3: Locate the login button using a data-cy attribute and click it

Step 4: Verify that the URL changes to '/dashboard' after login

✅ Expected Result: The login form fields are located using best practice selectors, login is successful, and user is redirected to the dashboard page

Automation Requirements - Cypress

Assertions Needed:

Verify email input field is found and accepts input

Verify password input field is found and accepts input

Verify login button is found and clickable

Verify URL changes to '/dashboard' after clicking login

Best Practices:

Use data-cy attributes for selectors instead of classes or IDs

Avoid using brittle selectors like XPath or overly complex CSS selectors

Use explicit assertions to confirm element visibility and interaction

Use Cypress commands consistently (cy.get, cy.type, cy.click, cy.url)

Automated Solution

Cypress

describe('Login form test with best practice selectors', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should login successfully using data-cy selectors', () => {
    cy.get('[data-cy=email-input]')
      .should('be.visible')
      .type('[e-mail]');

    cy.get('[data-cy=password-input]')
      .should('be.visible')
      .type('Password123!');

    cy.get('[data-cy=login-button]')
      .should('be.visible')
      .click();

    cy.url().should('include', '/dashboard');
  });
});

This test uses data-cy attributes as selectors, which are stable and not affected by styling or layout changes.

Each element is first checked to be visible before interacting, ensuring the test waits for the element properly.

The test types into the email and password fields, then clicks the login button.

Finally, it asserts that the URL includes '/dashboard' to confirm successful login.

This approach avoids brittle selectors like classes or XPath and uses Cypress commands consistently for clarity and maintainability.

Common Mistakes - 4 Pitfalls

Using CSS classes or IDs that may change frequently as selectors

Using XPath selectors in Cypress tests

{'mistake': 'Not asserting element visibility before interaction', 'why_bad': 'Trying to interact with elements not visible or not yet loaded can cause flaky tests.', 'correct_approach': "Use assertions like .should('be.visible') before typing or clicking."}

{'mistake': 'Hardcoding full URLs in assertions', 'why_bad': 'Full URLs may change between environments, causing tests to fail unnecessarily.', 'correct_approach': "Assert on URL parts using .should('include', '/dashboard') to allow flexibility."}

Bonus Challenge

Now add data-driven testing with 3 different sets of valid login credentials

Show Hint