cy.location() for URL parts in Cypress - Build an Automation Script

Verify URL parts using cy.location() after login

Preconditions (2)

Step 1: Enter 'testuser' in the username input field with id 'username'

Step 2: Enter 'Test@1234' in the password input field with id 'password'

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

Step 4: Wait for navigation to complete

Step 5: Use cy.location() to get the current URL parts

Step 6: Verify the protocol is 'https:'

Step 7: Verify the hostname is 'example.com'

Step 8: Verify the pathname is '/dashboard'

Step 9: Verify the search query string is '?welcome=true'

✅ Expected Result: After login, the URL should have protocol 'https:', hostname 'example.com', pathname '/dashboard', and search query '?welcome=true'

Automation Requirements - Cypress

Assertions Needed:

Assert protocol equals 'https:'

Assert hostname equals 'example.com'

Assert pathname equals '/dashboard'

Assert search equals '?welcome=true'

Best Practices:

Use cy.location() with property argument to get specific URL parts

Use cy.get() with proper selectors for inputs and buttons

Use should() assertions for clear pass/fail results

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Login and verify URL parts', () => {
  it('should login and check URL parts using cy.location()', () => {
    cy.visit('https://example.com/login');

    cy.get('#username').type('testuser');
    cy.get('#password').type('Test@1234');
    cy.get('#loginBtn').click();

    // Verify protocol
    cy.location('protocol').should('eq', 'https:');

    // Verify hostname
    cy.location('hostname').should('eq', 'example.com');

    // Verify pathname
    cy.location('pathname').should('eq', '/dashboard');

    // Verify search query
    cy.location('search').should('eq', '?welcome=true');
  });
});

This test script uses Cypress to automate the login process and verify URL parts.

First, it visits the login page URL.

Then it types the username and password into inputs identified by their IDs.

After clicking the login button, Cypress waits automatically for navigation.

Using cy.location() with specific properties, it checks the protocol, hostname, pathname, and search query string.

Assertions use should('eq', ...) to confirm each URL part matches the expected value.

This approach avoids hardcoded waits and uses clear selectors and assertions for maintainability and readability.

Common Mistakes - 3 Pitfalls

{'mistake': 'Using cy.location() without specifying the property to check', 'why_bad': 'It returns the full location object, making assertions complex and less readable.', 'correct_approach': "Use cy.location('property') to get specific parts like 'protocol', 'hostname', 'pathname', or 'search' for simple assertions."}

Using hardcoded waits like cy.wait(5000) after clicking login

{'mistake': "Using incorrect selectors like cy.get('loginBtn') without # for id", 'why_bad': "Selectors won't find elements, causing test failures.", 'correct_approach': "Use correct CSS selectors, e.g., cy.get('#loginBtn') for id selectors."}

Bonus Challenge

Now add data-driven testing with 3 different sets of valid usernames and passwords, verifying URL parts after each login.

Show Hint