Why cy.location() for URL parts in Cypress? - Purpose & Use Cases

The Big Idea

What if you could check every URL change perfectly without ever looking at the browser address bar?

The Scenario

Imagine you are testing a website manually and need to check if the URL changes correctly after clicking a button. You open the browser, click the button, then carefully look at the address bar to see if the URL is right. You repeat this for many buttons and pages.

The Problem

This manual checking is slow and tiring. You might miss small changes in the URL or make mistakes typing them down. It's hard to keep track of many URL parts like the path, query, or hash. This makes testing unreliable and frustrating.

The Solution

Using cy.location() in Cypress lets you automatically get parts of the URL during tests. You can check the exact path, query parameters, or hash without guessing or looking manually. This makes tests faster, more accurate, and easy to repeat.

Before vs After

✗ Before

Click button
Look at browser URL
Write down if URL is correct

✓ After

cy.get('button').click()
cy.location('pathname').should('eq', '/expected-path')

What It Enables

It enables automatic, precise checks of URL parts during tests, making your testing smarter and less error-prone.

Real Life Example

When testing a shopping site, you click a product category and want to confirm the URL path changes to /category/electronics. Using cy.location('pathname') you can quickly verify this in your test script.

Key Takeaways

Manual URL checks are slow and error-prone.

cy.location() extracts URL parts automatically.

This makes tests faster, reliable, and easier to maintain.

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()