Preconditions (2)

Step 1: Load the test data from 'loginData.json'

Step 2: For each set of credentials in the test data:

Step 3: Enter the 'username' into the username input field with id 'username'

Step 4: Enter the 'password' into the password input field with id 'password'

Step 5: Click the login button with id 'loginBtn'

Step 6: Verify the expected result based on the 'expectedOutcome' field in the test data

✅ Expected Result: The login succeeds or fails according to the expected outcome specified in the external test data file for each set of credentials.

Automation Requirements - Cypress

Assertions Needed:

Verify URL changes to dashboard page on successful login

Verify error message is visible on failed login

Best Practices:

Use external JSON file for test data

Use data-driven testing with cy.fixture()

Use clear and maintainable selectors (id selectors)

Use Cypress commands and assertions consistently

Automated Solution

Cypress

/// <reference types="cypress" />

describe('Login Tests with External Data', () => {
  beforeEach(() => {
    cy.visit('https://example.com/login');
  });

  it('should test login with multiple credentials from external data', () => {
    cy.fixture('loginData.json').then((users) => {
      users.forEach((user) => {
        cy.get('#username').clear().type(user.username);
        cy.get('#password').clear().type(user.password);
        cy.get('#loginBtn').click();

        if (user.expectedOutcome === 'success') {
          cy.url().should('include', '/dashboard');
          // Logout to reset state for next iteration
          cy.get('#logoutBtn').click();
          cy.url().should('include', '/login');
        } else if (user.expectedOutcome === 'failure') {
          cy.get('.error-message').should('be.visible').and('contain.text', 'Invalid credentials');
        }
      });
    });
  });
});

This Cypress test uses an external JSON file named loginData.json to load multiple sets of login credentials. This approach improves maintainability because test data is separated from test logic, making it easier to update or add new test cases without changing the test code.

The beforeEach hook ensures the login page is loaded before each test iteration. The test iterates over each user in the fixture data, enters the username and password, clicks the login button, and then verifies the outcome based on the expected result from the data.

Using clear selectors like #username and #loginBtn ensures the test is easy to read and maintain. Assertions check the URL for successful login or the presence of an error message for failed login.

Resetting the state by logging out after a successful login ensures each test iteration starts fresh, preventing state leakage between tests.

Common Mistakes - 4 Pitfalls

Hardcoding test data inside the test code

Using brittle selectors like absolute XPath

Not resetting application state between test iterations

Not using Cypress commands consistently

Bonus Challenge

Now add data-driven testing with 3 different inputs including valid, invalid, and empty credentials.

Show Hint