cy.location() for URL parts in Cypress

Introduction

We use cy.location() to check parts of the web page URL during tests. It helps us make sure the page is where we expect it to be.

To verify the current page URL after clicking a link.

To check if the user is redirected to the correct page after login.

To confirm query parameters are present in the URL after a search.

To test if the URL path changes correctly when navigating through the app.

To ensure the protocol (http or https) is correct for security checks.

Syntax

Cypress

cy.location([options])

// options can include { timeout: number }

// To get a specific part of the URL:
cy.location('pathname')
cy.location('hostname')
cy.location('protocol')
cy.location('search')
cy.location('hash')

cy.location() returns a Location object representing the current URL.

You can pass a string to get a specific part like 'pathname' or 'hostname'.

Examples

Check that the URL path is exactly '/home'.

Cypress

cy.location().should((loc) => {
  expect(loc.pathname).to.eq('/home')
})

Check that the hostname part of the URL is 'example.com'.

Cypress

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

Verify the URL uses HTTPS protocol.

Cypress

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

Check that the URL query string includes '?q=testing'.

Cypress

cy.location('search').should('include', '?q=testing')

Sample Program

This test visits a URL and checks that the path is '/home' and the protocol is 'https:'.

Cypress

describe('URL parts test', () => {
  it('checks URL pathname and protocol', () => {
    cy.visit('https://example.com/home?user=123')
    cy.location('pathname').should('eq', '/home')
    cy.location('protocol').should('eq', 'https:')
  })
})

Important Notes

Use cy.location() inside a test after navigation or actions that change the URL.

Remember that cy.location() commands are asynchronous and return chainable Cypress objects.

Use assertions like .should() to verify URL parts.

Summary

cy.location() helps check parts of the current URL in tests.

You can get specific parts like pathname, hostname, protocol, search, and hash.

Use it to confirm navigation and URL changes work as expected.

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