# Location
Examples of get the url within your application in Cypress, for a full reference of commands, go to docs.cypress.io (opens new window)
# cy.hash() (opens new window)
To get the current URL hash, use the cy.hash()
command.
// https://on.cypress.io/hash
cy.hash().should('be.empty')
# cy.location() (opens new window)
To get window.location
, use the cy.location()
command.
cy.visit('https://example.cypress.io/commands/location')
// https://on.cypress.io/location
cy.location().should((location) => {
// returns an object with every part of the URL
expect(location.hash).to.be.empty
expect(location.href).to.eq(
'https://example.cypress.io/commands/location',
)
expect(location.host).to.eq('example.cypress.io')
expect(location.hostname).to.eq('example.cypress.io')
expect(location.origin).to.eq('https://example.cypress.io')
expect(location.pathname).to.eq('/commands/location')
expect(location.port).to.eq('')
expect(location.protocol).to.eq('https:')
expect(location.search).to.be.empty
})
# location part
You can pass an argument to return just the part you are interested in
cy.visit(
'https://example.cypress.io/commands/location?search=value#top',
)
// yields a specific part of the location
cy.location('protocol').should('equal', 'https:')
cy.location('hostname').should('equal', 'example.cypress.io')
cy.location('pathname').should('equal', '/commands/location')
cy.location('search').should('equal', '?search=value')
cy.location('hash').should('equal', '#top')
# parsed search
If you want to check a specific value inside the search part of the URL, use the browser built-in object URLSearchParams (opens new window)
// the full URL includes several search terms
cy.visit(
'https://example.cypress.io/commands/location?search=value&id=1234',
)
cy.location('search')
.should('equal', '?search=value&id=1234')
// let's parse the search value
.then((s) => new URLSearchParams(s))
.invoke('get', 'id') // check a specific key
.should('equal', '1234')
We can convert the URLSearchParams
into a plain object using the bundled Lodash function
// tip: move the conversion from the search string to
// a plain object to an utility function
cy.location('search').should((search) => {
const parsed = new URLSearchParams(search)
const pairs = Array.from(parsed.entries())
const plain = Cypress._.fromPairs(pairs)
expect(plain, 'search params').to.deep.equal({
search: 'value',
id: '1234',
})
})
# Fluent chained commands
The above test can also be written using fluent chain of commands. Each command changes the current subject via cy.then(callback)
parameter or by invoking a method on the current subject via cy.invoke('method name', ...)
command. Find this example explained in the video Fluent Cypress Command Chains (opens new window).
// the full URL includes several search terms
cy.visit(
'https://example.cypress.io/commands/location?search=value&id=1234',
)
cy.location('search')
.should('include', 'search=')
.then((s) => new URLSearchParams(s))
.invoke('entries')
.then(Array.from)
.then(Cypress._.fromPairs)
.then((o) => {
Cypress._.updateWith(o, 'id', Number)
})
.then(console.log)
.should('deep.equal', {
search: 'value',
id: 1234,
})
# Another chained commands example
You can watch the next test examples in the video Check Part Of The URL Using Chained Commands (opens new window).
// mock the cy.location command to set up the rest of the test
cy.stub(cy, 'location')
.withArgs('pathname')
.returns(cy.wrap('/api/v1/item/470'))
Let's say our current url is <host>/api/v1/item/N
and we want to get the number N
and confirm it is 470
. We can get the pathname and extract the item number.
cy.location('pathname')
.should('include', '/item/')
.then((pathname) => {
const parts = pathname.split('/')
return parts[parts.length - 1]
})
.should('equal', '470')
The actions inside the .then(callback)
can be written directly through the Cypress commands like cy.invoke
, each command passing the modified subject to the next.
cy.location('pathname')
.should('include', '/item/')
// subject is a string "..."
.invoke('split', '/')
// subject is string[]
.should('not.be.empty')
// we can use Lodash _.last
// to yield the last element
.then(Cypress._.last)
// subject is a string
.should('equal', '470')
# Match regular expression
You can watch this example explained in the video Extract A Part Of The Current Url Using A Regular Expression (opens new window).
// mock the cy.location command to set up the rest of the test
cy.stub(cy, 'location')
.withArgs('pathname')
.returns(
cy.wrap('/sell/item10001/confirmation', { log: false }),
)
Let's say we want to confirm we are on the right page, but we do not control the item ID, but we know it is of the form "item(several digits)"
// yields a string
cy.location('pathname')
.should('match', /\/sell\/item\d+\/confirmation/)
// now let extract the item ID and store it using an alias
// we extract the id using a named capture group
.invoke('match', /\/sell\/item(?<id>\d+)\/confirmation/)
.its('groups.id')
// use an assertion to print the extracted ID
// to the Cypress Command Log
.should('be.a', 'string')
.as('itemId')
// now let's use the alias "itemId"
// just need "function () { ... }" callback to be able
// to access "this.itemId" value
cy.log('confirmed the URL').then(function () {
cy.log(`the item: ${this.itemId}`)
})
We can also get the aliased value using cy.get(alias)
command, which yields the value to the next command or assertion.
cy.get('@itemId')
.should('be.a', 'string')
.and('have.length', 5)
// convert the string value to a number
.then(Number)
.then((id) => {
expect(id, 'id as a number').to.be.within(1_000, 20_000)
})
For more information about aliases, see Aliasing.
To get more information about named capture groups, see JavaScript.info Capturing groups (opens new window).
# cy.url() (opens new window)
To get the current URL string, use the cy.url()
command.
cy.visit('https://example.cypress.io/commands/location')
// https://on.cypress.io/url
cy.url().should(
'eq',
'https://example.cypress.io/commands/location',
)