cy.location() for URL parts in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following Cypress test code that checks the URL parts using cy.location(). What will be the value of pathname logged?

Cypress

cy.visit('https://example.com/products/item1?ref=123')
  .location('pathname')
  .then(pathname => {
    cy.log(pathname)
  })

A "https://example.com/products/item1"

B "/products/item1?ref=123"

C "/products/item1"

D "example.com/products/item1"

💡 Hint

Remember that pathname returns only the path part of the URL, excluding domain and query parameters.

The pathname property of cy.location() returns the path after the domain, without query strings or protocol. So it is /products/item1.

❓ assertion

intermediate

Which assertion correctly verifies the URL's query string using cy.location()?

You want to check that the current URL contains the query string ?user=admin. Which Cypress assertion is correct?

A cy.location('search').should('eq', '?user=admin')

B cy.location('href').should('contain', '?user=admin')

C cy.location('pathname').should('include', '?user=admin')

D cy.location('host').should('eq', '?user=admin')

💡 Hint

Which part of the URL contains the query string?

The search property of cy.location() returns the query string including the leading question mark. So cy.location('search').should('eq', '?user=admin') is correct.

🔧 Debug

advanced

Why does this Cypress test fail to assert the hostname correctly?

Examine the test code below. It fails even though the URL is correct. What is the reason?

Cypress

cy.visit('https://myapp.test/dashboard')
cy.location('hostname').should('eq', 'myapp.test')

A The test fails because cy.visit() was not chained with cy.location().

B cy.location('hostname') returns the full URL, not just hostname.

C cy.location('hostname') is asynchronous and needs await keyword.

D The expected hostname has an extra slash at the end causing mismatch.

💡 Hint

Check the exact string returned by cy.location('hostname') and compare with the expected value.

The hostname property returns the domain without any trailing slash. The expected value incorrectly includes a slash, so the assertion fails.

🧠 Conceptual

advanced

Which cy.location() property would you use to get the full URL including protocol, domain, path, and query?

You want to capture the entire URL string of the current page in Cypress. Which property of cy.location() gives you this?

A 'origin'

B 'href'

C 'pathname'

D 'host'

💡 Hint

Think about which property includes protocol, domain, path, and query.

The href property returns the full URL string including protocol, domain, path, and query parameters.

❓ framework

expert

In a Cypress test, how do you correctly chain multiple assertions on different URL parts using cy.location()?

You want to assert that the URL's protocol is https: and the pathname is /home. Which code snippet correctly performs both assertions?

A

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

B cy.location('protocol').should('eq', 'https:').location('pathname').should('eq', '/home')

C

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

D

cy.location().then(loc => {
  cy.wrap(loc.protocol).should('eq', 'https:')
  cy.wrap(loc.pathname).should('eq', '/home')
})

💡 Hint

Consider how to access multiple properties from cy.location() in one callback.

Option A uses cy.location() without arguments to get the full location object, then asserts multiple properties inside a single should callback. This is the correct and efficient way.

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