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

Practice

1. What does cy.location('pathname') return in a Cypress test?

easy

A. The path part of the current URL, like /home

B. The full URL including protocol and hostname

C. Only the domain name without protocol

D. The query parameters after ?

Solution

1. Step 1: Understand cy.location() usage

   The cy.location() command gets parts of the current URL in Cypress tests.

2. Step 2: Identify what 'pathname' returns

   The 'pathname' is the part of the URL after the domain, showing the path like /home or /about.

3. Final Answer:

   The path part of the current URL, like /home -> Option A

4. Quick Check:

   cy.location('pathname') = path part [OK]

Hint: Remember 'pathname' means the URL path after domain [OK]

Common Mistakes:

• Confusing 'pathname' with full URL
• Thinking 'pathname' returns query parameters
• Mixing 'hostname' with 'pathname'

2. Which of the following is the correct syntax to get the hostname using cy.location()?

easy

A. cy.location('hostname')

B. cy.location('host')

C. cy.location.hostname()

D. cy.location('domain')

Solution

1. Step 1: Recall correct property names for URL parts

   The correct property to get the domain name is 'hostname', not 'host' or 'domain'.

2. Step 2: Check syntax for cy.location()

   The syntax is cy.location('hostname') to get the hostname string.

3. Final Answer:

   cy.location('hostname') -> Option A

4. Quick Check:

   Use 'hostname' string inside cy.location() [OK]

Hint: Use exact property names like 'hostname' inside cy.location() [OK]

Common Mistakes:

• Using 'host' instead of 'hostname'
• Calling cy.location as a function property
• Using 'domain' which is invalid

3. Given the URL https://example.com/products?item=123#details, what will cy.location('search') return?

medium

A. example.com

B. #details

C. /products

D. ?item=123

Solution

1. Step 1: Identify the 'search' part of the URL

   The 'search' part is the query string starting with ?, here it is ?item=123.

2. Step 2: Confirm what cy.location('search') returns

   This command returns the query string including the ? symbol.

3. Final Answer:

   ?item=123 -> Option D

4. Quick Check:

   cy.location('search') = query string [OK]

Hint: Remember 'search' means query string starting with ? [OK]

Common Mistakes:

• Confusing 'search' with 'hash'
• Returning path instead of query string
• Omitting the leading '?' in the answer

4. You wrote cy.location('hash').should('eq', 'details') to check the URL hash #details. Why does this test fail?

medium

A. Because should('eq') cannot compare strings

B. Because cy.location('hash') returns the pathname, not the hash

C. Because the hash value includes the # symbol, so it should be '#details'

D. Because the hash is not part of the URL

Solution

1. Step 1: Understand what cy.location('hash') returns

   It returns the hash part of the URL including the # symbol, e.g., #details.

2. Step 2: Check the assertion value

   The test compares to 'details' without #, so it fails because the strings don't match exactly.

3. Final Answer:

   The hash value includes the # symbol, so it should be '#details' -> Option C

4. Quick Check:

   Hash includes '#' in cy.location('hash') [OK]

Hint: Include '#' when asserting hash values [OK]

Common Mistakes:

• Forgetting '#' in hash comparison
• Confusing hash with pathname
• Using wrong assertion method

5. You want to verify that after clicking a link, the URL changes to https://shop.com/cart?item=5#checkout. Which chained Cypress commands correctly check the protocol, pathname, search, and hash parts?

hard

A. cy.location('protocol').should('eq', 'https:')
.location('pathname').should('eq', '/cart')
.location('search').should('eq', '?item=5')
.location('hash').should('eq', '#checkout')

B. cy.location('protocol').should('eq', 'https:')
cy.location('pathname').should('eq', '/cart')
cy.location('search').should('eq', '?item=5')
cy.location('hash').should('eq', '#checkout')

C. cy.location('protocol').should('eq', 'https')
cy.location('pathname').should('eq', 'cart')
cy.location('search').should('eq', 'item=5')
cy.location('hash').should('eq', 'checkout')

D. cy.location().should('eq', 'https://shop.com/cart?item=5#checkout')

Solution

1. Step 1: Understand how to check multiple URL parts with cy.location()

   Each call to cy.location() returns a promise, so you call them separately for each part.

2. Step 2: Check the correctness of values and chaining

   cy.location('protocol').should('eq', 'https:') cy.location('pathname').should('eq', '/cart') cy.location('search').should('eq', '?item=5') cy.location('hash').should('eq', '#checkout') calls cy.location() separately for each part with correct expected values including ':' in protocol and leading '/' in pathname.

3. Step 3: Identify errors in other options

   cy.location('protocol').should('eq', 'https:') .location('pathname').should('eq', '/cart') .location('search').should('eq', '?item=5') .location('hash').should('eq', '#checkout') chains location() calls incorrectly (no chaining support). cy.location('protocol').should('eq', 'https') cy.location('pathname').should('eq', 'cart') cy.location('search').should('eq', 'item=5') cy.location('hash').should('eq', 'checkout') misses ':' and leading characters. cy.location().should('eq', 'https://shop.com/cart?item=5#checkout') compares full URL string which is not supported by cy.location().

4. Final Answer:

   Separate calls to cy.location() with correct expected values -> Option B

5. Quick Check:

   Use separate cy.location() calls for each URL part [OK]

Hint: Call cy.location() separately for each URL part [OK]

Common Mistakes:

• Trying to chain cy.location() calls
• Missing ':' in protocol value
• Omitting leading '/' in pathname
• Comparing full URL string with cy.location()