BDD Assertions
expect($p).to.have.length(3)
expect($p.first()).to.contain('Hello World')
expect(name).to.not.equal('Jane')
expect('test').to.be.a('string')
expect([1,2,3]).to.include(2)
expect(true).to.be.true
expect(false).to.be.false
expect(null).to.be.null
expect(undefined).to.be.undefined
expect(42).to.equal(42)
expect({ name: 'Jane' }).to.deep.equal({ name: 'Jane' })
expect({ name: 'Jane' }).to.eql({ name: 'Jane' })
expect(10).to.be.greaterThan(5)
expect(5).to.be.lessThan(10)
expect(7).to.be.within(5,10)
expect([1, 2, 3]).to.be.instanceOf(Array)
expect(obj).to.have.property('name')
expect('test').to.have.lengthOf(3)
expect('testing').to.match(/^test/)
expect([1, 2, 3]).to.include.members([3, 2])
expect(2).to.be.oneOf([1,2,3])

.should('be.visible')

.should('have.class', 'open')  

.should('contain', 'Edit User')

.should('have.attr', 'href')  

.should('match', /users/)  

.should('not.be.empty')

.should('be.empty')

.should('be.visible')   

.should('have.css', 'font-family') 

.should('not.have.value', 'Jane')

.should('have.value', 'Jane')

.should('have.focus')

.should('have.id', 'new-user')

cy.title().should('eq', 'My Awesome Application')
cy.title().should('include', 'New User')
cy.get('.error').should('be.empty')                    // Assert that '.error' is empty
cy.contains('Login').should('be.visible')              // Assert that el is visible
cy.wrap({ foo: 'bar' }).its('foo').should('eq', 'bar') // Assert the 'foo' property equals 'bar'

In most cases, .should() yields the same subject it was given from the previous command.
cy
  .get('nav')                       // yields <nav>
  .should('be.visible')             // yields <nav>

  However, some chainers change the subject. In the example below, the second .should() yields the string sans-serif because the chainer have.css, 'font-family' changes the subject.

cy
  .get('nav')                          // yields <nav>
  .should('be.visible')                // yields <nav>
  .should('have.css', 'font-family')   // yields 'sans-serif'
  .and('match', /serif/)               // yields 'sans-serif'


Assert the checkbox is disabled
cy.get(':checkbox').should('be.disabled')

Assert the class is ‘form-horizontal’
cy.get('form').should('have.class', 'form-horizontal')

Assert the value is not ‘Jane’
cy.get('input').should('not.have.value', 'Jane')

The current subject is yielded
cy.get('button').should('have.id', 'new-user').then(($button) => {
  // $button is yielded
})

Assert the href is equal to ‘/users’
// have.attr comes from chai-jquery
cy.get('#header a').should('have.attr', 'href', '/users')

Assert an input is focused after button click
cy.get('#btn-focuses-input').click()
cy.get('#input-receives-focus').should('have.focus') // equivalent to should('be.focused')

Verify length, content, and classes from multiple <p>
<div>
  <p class="text-primary">Hello World</p>
  <p class="text-danger">You have an error</p>
  <p class="text-default">Try again later</p>
</div>
cy
  .get('p')
  .should(($p) => {
    // should have found 3 elements
    expect($p).to.have.length(3)

    // make sure the first contains some text content
    expect($p.first()).to.contain('Hello World')
  })

<div class="docs-header">
  <div class="main-abc123 heading-xyz987">Introduction</div>
</div>
cy.get('.docs-header')
  .find('div')
  // .should(cb) callback function will be retried
  .should(($div) => {
    expect($div).to.have.length(1)

    const className = $div[0].className

    expect(className).to.match(/heading-/)
  })
  // .then(cb) callback is not retried,
  // it either passes or fails
  .then(($div) => {
    expect($div).to.have.text('Introduction')
  })

Example below first asserts that there are 3 elements, and then checks the text contents of each one.
<ul class="connectors-list">
  <li>Walk the dog</li>
  <li>Feed the cat</li>
  <li>Write JavaScript</li>
</ul>
cy.get('.connectors-list > li').should(($lis) => {
  expect($lis).to.have.length(3)
  expect($lis.eq(0)).to.contain('Walk the dog')
  expect($lis.eq(1)).to.contain('Feed the cat')
  expect($lis.eq(2)).to.contain('Write JavaScript')
})

For clarity you can pass a string message as a second argument to any expect assertion, see Chai#expect.
cy.get('.connectors-list > li').should(($lis) => {
  expect($lis, '3 items').to.have.length(3)
  expect($lis.eq(0), 'first item').to.contain('Walk the dog')
  expect($lis.eq(1), 'second item').to.contain('Feed the cat')
  expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
})

Compare text values of two elements
The example below gets the text contained within one element and saves it in a closure variable. Then the test gets the text in another element and asserts that the two text values are the same after normalizing.

<div class="company-details">
  <div class="title">Acme Developers</div>
  <div class="identifier">ACMEDEVELOPERS</div>
</div>
const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()

// will keep text from title element
let titleText

cy.get('.company-details')
  .find('.title')
  .then(($title) => {
    // save text from the first element
    titleText = normalizeText($title.text())
  })

cy.get('.company-details')
  .find('.identifier')
  .should(($identifier) => {
    // we can massage text before comparing
    const idText = normalizeText($identifier.text())

    // text from the title element should already be set
    expect(idText, 'ID').to.equal(titleText)
  })

In this example we use .and() which is identical to .should().
// our subject is not changed by our first assertion,
// so we can continue to use DOM based assertions
cy.get('option:first').should('be.selected').and('have.value', 'Metallica')

cy.get('.main-nav').find('li').first().as('firstNav') // Alias first 'li' as @firstNav
cy.route('PUT', 'users', 'fx:user').as('putUser')     // Alias that route as @putUser
cy.stub(api, 'onUnauth').as('unauth')                 // Alias that stub as @unauth
cy.spy(win, 'fetch').as('winFetch')                   // Alias that spy as @winFetch

Aliasing a DOM element and then using cy.get() to access the aliased element.
it('disables on click', function () {
  cy.get('button[type=submit]').as('submitBtn')
  cy.get('@submitBtn').click().should('be.disabled')
})

Aliasing a route and then using cy.wait() to wait for the aliased route.

cy.route('PUT', 'users', 'fx:user').as('userPut')
cy.get('form').submit()
cy.wait('@userPut')
  .its('url').should('contain', 'users')

Aliasing cy.fixture() data and then using this to access it via the alias.

beforeEach(function () {
  cy.fixture('users-admins.json').as('admins')
})

it('the users fixture is bound to this.admins', function () {
  cy.log(`There are ${this.admins.length} administrators.`)
})

Remember that Cypress commands are async, including .as().
Because of this you cannot synchronously access anything you have aliased. You must use other asynchronous commands such as .then() to access what you’ve aliased.
Here are some further examples of using .as() that illustrate the asynchronous behavior.

describe('A fixture', () => {

  describe('alias can be accessed', () => {
    it('via get().', () => {
      cy.fixture('admin-users.json').as('admins')
      cy.get('@admins')
        .then((users) => {
          cy.log(`There are ${users.length} admins.`)
        })
    })

    it('via then().', function () {
      cy.fixture('admin-users.json').as('admins')
      cy.visit('/')
        .then(() => {
          cy.log(`There are ${this.admins.length} admins.`)
        })
    })
  })

  describe('aliased in beforeEach()', () => {
    beforeEach(function () {
      cy.fixture('admin-users.json').as('admins')
    })

    it('is bound to this.', function () {
      cy.log(`There are ${this.admins.length} admins.`)
    })
  })
})

Alias several routes

cy.route(/company/, 'fixture:company').as('companyGet')
cy.route(/roles/, 'fixture:roles').as('rolesGet')
cy.route(/teams/, 'fixture:teams').as('teamsGet')
cy.route(/users\/\d+/, 'fixture:user').as('userGet')
cy.route('PUT', /^\/users\/\d+/, 'fixture:user').as('userPut')

cy.get('[type="checkbox"]').check()  

cy.get('[type="radio"]').first().check()  

cy.get('#saveUserName').check()

cy.get('[type="radio"]').check('US')

cy.get('[type="checkbox"]').check(['ga', 'ca'])

cy.get('.action-checkboxes').should('not.be.visible')

cy.get('[type="text"]').clear()        // Clear text input

cy.get('textarea').type('Hi!').clear() // Clear textarea

cy.focused().clear()                   // Clear focused input/textarea

cy.get('textarea').clear().type('Hello, World')

cy.get('input[name="name"]').clear().type('Jane Lane')

cy.get('button').click()          // Click on button

cy.focused().click()              // Click on el with focus

cy.contains('Welcome').click()    // Click on first el containing 'Welcome'

cy.get('button').click()

cy.get('button').click({ force: true })

cy.get('button').click({ multiple: true }) // Click all buttons found on the page

cy.get('.nav').contains('About')  // Yield el in .nav containing 'About'

cy.contains('Hello')              // Yield first el in document containing 'Hello'

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
</ul>

// yields <li>apples</li>
cy.contains('apples')

<div id="main">
  <form>
    <div>
      <label>name</label>
      <input name="name" />
    </div>
    <div>
      <label>age</label>
      <input name="age" />
    </div>
    <input type="submit" value="submit the form!" />
  </form>
</div>

// yields input[type='submit'] element then clicks it
cy.get('form').contains('submit the form!').click()

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>
// yields <button>
cy.contains(4)

Specify a selector to return a specific element
Technically the <html>, <body>, <ul>, and first <li> in the example below all contain “apples”.
Normally Cypress would return the first <li> since that is the deepest element that contains “apples”.
To override the element that is yielded we can pass ‘ul’ as the selector.

<html>
  <body>
    <ul>
      <li>apples</li>
      <li>oranges</li>
      <li>bananas</li>
    </ul>
  </body>
</html>

// yields <ul>...</ul>
cy.contains('ul', 'apples')

Keep the form as the subject
Here’s an example that uses the selector to ensure that the <form> remains the subject for future chaining.

<form>
  <div>
    <label>name</label>
    <input name="name" />
  </div>
  <button type="submit">Proceed</button>
</form>

cy.get('form')                  // yields <form>...</form>
  .contains('form', 'Proceed')  // yields <form>...</form>
  .submit()                     // yields <form>...</form>

cy.contains('Log In')

cy.get('#checkout-container').contains('Buy Now')

cy.contains('Delete User').click()

<ul id="header">
  <li>Welcome, Jane Lane</li>
</ul>
<div id="main">
  <span>These users have 10 connections with Jane Lane</span>
  <ul>
    <li>Jamal</li>
    <li>Patricia</li>
  </ul>
</div>

The below example will return the <li> in the #header since that is the first element that contains the text “Jane Lane”.
// yields #header li
cy.contains('Jane Lane')

If you wanted to select the <span> instead, you could narrow the elements yielded before the .contains().
// yields <span>
cy.get('#main').contains('Jane Lane')

<nav>
  <a href="/users">
    <span>Users</span>
  </a>
  <a href="/signout">
    <span>Sign Out</span>
  </a>
</nav>

// yields <a>
cy.get('nav').contains('Sign Out').should('have.attr', 'href', '/signout')

cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'

cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'

Find the 2nd element within the elements
<ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>
cy.get('li').eq(1).should('contain', 'siamese') // true


Make an assertion on the 3rd row of a table
<table>
  <tr>
    <th>Breed</th>
    <th>Origin</th>
  </tr>
  <tr>
    <td>Siamese</td>
    <td>Thailand</td>
  </tr>
  <tr>
    <td>Sphynx</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Persian</td>
    <td>Iran</td>
</table>
cy.get('tr').eq(2).should('contain', 'Canada')  //true


Find the 2nd from the last element within the elements
<ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>
cy.get('li').eq(-2).should('contain', 'sphynx') // true

Find the 4th <li> in the navigation
cy.get('.left-nav.nav').find('>li').eq(3)

cy.get('td').filter('.users') // Yield all el's with class '.users'

Filter the current subject to the elements with the class ‘active’
<ul>
  <li>Home</li>
  <li class="active">About</li>
  <li>Services</li>
  <li>Pricing</li>
  <li>Contact</li>
</ul>
// yields <li>About</li>
cy.get('ul').find('>li').filter('.active')

cy.get('.left-nav>.nav').find('>li').filter('.active')

cy.get('.article').find('footer') // Yield 'footer' within '.article'

Get li’s within parent
<ul id="parent">
  <li class="first"></li>
  <li class="second"></li>
</ul>
// yields [<li class="first"></li>, <li class="second"></li>]
cy.get('#parent').find('li')

cy.get('nav a').first()     // Yield first link in nav

Get the first list item in a list
<ul>
  <li class="one">Knick knack on my thumb</li>
  <li class="two">Knick knack on my shoe</li>
  <li class="three">Knick knack on my knee</li>
  <li class="four">Knick knack on my door</li>
</ul>
// yields <li class="one">Knick knack on my thumb</li>
cy.get('li').first()

Find the first input in the form
cy.get('form').find('input').first()

cy.get('input').first().focus() // Focus on the first input

Focus on an input
cy.get('[type="input"]').focus()

Focus, type, and blur a textarea
// yields the <textarea> for further chaining
cy.get('textarea').focus().type('Nice Product!').blur()

Focus the textarea
cy.get('[name="comment"]').focus()

cy.get('.err')

cy.get('#header a')

cy.get('button[type=submit]')

cy.get('form').submit()

cy.get('[type="email"]')

cy.get('[name="comment"]')

cy.get('input:first')

cy.get('[type="checkbox"]')

cy.get('[type="radio"]')

cy.get('[name="comment"]').focus().type('Nice Product!')

Get an input and assert on the value
cy.get('input[name="firstName"]').should('have.value', 'Homer')

<ul show-authed="false" class="nav navbar-nav pull-xs-right" style="display: inherit;">
  <li>Home</li>
</ul>
cy.get('[show-authed="false"]').contains('Home')

Get the input element
cy.get('input').should('be.disabled')

Find the first li descendent within a ul
cy.get('ul li:first').should('have.class', 'active')

Find the dropdown-menu and click it
cy.get('.dropdown-menu').click()

Find 5 elements with the given data attribute
cy.get('[data-test-id="test-example"]').should('have.length', 5)

Finding elements with two classes
cy.get('.logo-font.ng-binding').contains('conduit')

cy.wrap({ width: '50' }).its('width') // Get the 'width' property

Get property
cy.wrap({ age: 52 }).its('age').should('eq', 52) // true


Get property
cy.wrap({ age: 52 }).its('age').should('eq', 52) // true


Get the user object of the response’s body
cy
  .request(...)
  .its('body.user')
  .then(user => ...)

alternatively, use destructuring
cy
  .request(...)
  .its('body')
  .then(({user}) => ...)

Get length of title
cy.title().its('length').should('eq', 24)

You can drill into nested properties by using dot notation.

const user = {
  contacts: {
    work: {
      name: 'Kamil'
    }
  }
}

cy.wrap(user).its('contacts.work.name').should('eq', 'Kamil') // true

cy.get('nav a').last()     // Yield last link in nav

Get the last list item in a list
<ul>
  <li class="one">Knick knack on my thumb</li>
  <li class="two">Knick knack on my shoe</li>
  <li class="three">Knick knack on my knee</li>
  <li class="four">Knick knack on my door</li>
</ul>

// yields <li class="four">Knick knack on my door</li>
cy.get('li').last()

Find the last button in the form
cy.get('form').find('button').last()

cy.get('nav a:first').next() // Yield next link in nav

Find the element next to .second
<ul>
  <li>apples</li>
  <li class="second">oranges</li>
  <li>bananas</li>
</ul>

// yields <li>bananas</li>
cy.get('.second').next()

Find the very next sibling of each li. Keep only the ones with a class selected
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li class="selected">pineapples</li>
</ul>

// yields <li>pineapples</li>
cy.get('li').next('.selected')

Find the element next to the .active li
cy.get('.left-nav').find('li.active').next()

cy.get('.active').nextAll() // Yield all links next to `.active`

Find all of the element’s siblings following .second
<ul>
  <li>apples</li>
  <li class="second">oranges</li>
  <li>bananas</li>
  <li>pineapples</li>
  <li>grapes</li>
</ul>

// yields [<li>bananas</li>, <li>pineapples</li>, <li>grapes</li>]
cy.get('.second').nextAll()

Find all of the following siblings of each li. Keep only the ones with a class selected
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li class="selected">pineapples</li>
  <li>grapes</li>
</ul>

// yields <li>pineapples</li>
cy.get('li').nextAll('.selected')

Find all elements following the .active li
cy.get('.left-nav').find('li.active').nextAll()

cy.get('div').nextUntil('.warning') // Yield siblings after 'div' until '.warning'

Find all of the element’s siblings following #veggies until #nuts
<ul>
  <li id="fruits" class="header">Fruits</li>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li id="veggies" class="header">Vegetables</li>
  <li>cucumbers</li>
  <li>carrots</li>
  <li>corn</li>
  <li id="nuts" class="header">Nuts</li>
  <li>walnuts</li>
  <li>cashews</li>
  <li>almonds</li>
</ul>

//returns [<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
cy.get('#veggies').nextUntil('#nuts')

cy.get('input').not('.required') // Yield all inputs without class '.required'

Yield the elements that do not have class active
<ul>
  <li>Home</li>
  <li class='active'>About</li>
  <li>Services</li>
  <li>Pricing</li>
  <li>Contact</li>
</ul>

cy.get('ul>li').not('.active').should('have.length', 4) // true

Find all buttons that are not of type submit
cy.get('form').find('button').not('[type="submit"]')

cy.get('header').parent() // Yield parent el of `header`

Get the parent of the active li
cy.get('li.active').parent()

Get the parent with class nav of the active li
cy.get('li.active').parent('.nav')

Assert on the parent of the active li
cy.get('li.active').parent().should('have.class', 'nav')

cy.get('tr.highlight').prev() // Yield previous 'tr'

Find the previous element of the element with class of active
<ul>
  <li>Cockatiels</li>
  <li>Lorikeets</li>
  <li class="active">Cockatoos</li>
  <li>Conures</li>
  <li>Eclectus</li>
</ul>

// yields <li>Lorikeets</li>
cy.get('.active').prev()

Find the previous element with a class of active
<ul>
  <li>Cockatiels</li>
  <li>Lorikeets</li>
  <li class="active">Cockatoos</li>
  <li>Conures</li>
  <li>Eclectus</li>
</ul>

// yields <li>Cockatoos</li>
cy.get('li').prev('.active')

Find the previous element of the active li

cy.get('.left-nav').find('li.active').prev()

cy.get('.active').prevAll() // Yield all links previous to `.active`

Find all of the element’s siblings before .third
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li class="third">bananas</li>
  <li>pineapples</li>
  <li>grapes</li>
</ul>

// yields [<li>apples</li>, <li>oranges</li>]
cy.get('.third').prevAll()

Find all of the previous siblings of each li. Keep only the ones with a class selected
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li class="selected">pineapples</li>
  <li>grapes</li>
</ul>

// yields <li>pineapples</li>
cy.get('li').prevAll('.selected')

Find all elements before the .active li
cy.get('.left-nav').find('li.active').prevAll()

cy.get('p').prevUntil('.intro') // Yield siblings before 'p' until '.intro'

Find all of the element’s siblings before #nuts until #veggies
<ul>
  <li id="fruits" class="header">Fruits</li>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li id="veggies" class="header">Vegetables</li>
  <li>cucumbers</li>
  <li>carrots</li>
  <li>corn</li>
  <li id="nuts" class="header">Nuts</li>
  <li>walnuts</li>
  <li>cashews</li>
  <li>almonds</li>
</ul>

// yields [<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
cy.get('#nuts').prevUntil('#veggies')

cy.reload()

Reload the page as if the user clicked ‘Refresh’
cy.visit('http://localhost:3000/admin')
cy.get('#undo-btn').click().should('not.be.visible')
cy.reload()
cy.get('#undo-btn').click().should('not.be.visible')

Reload the page without using the cache
cy.visit('http://localhost:3000/admin')
cy.reload(true)

cy.get('select').select('user-1') // Select the 'user-1' option

//select the option with the text apples
<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// yields <option value="456">apples</option>
cy.get('select')
  .select('apples').should('have.value', '456')

  Select the option with the value “456”
<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// yields <option value="456">apples</option>
cy.get('select')
  .select('456').should('have.value', '456')

Select the options with the texts “apples” and “bananas”
<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('select')
  .select(['apples', 'bananas']).invoke('val')
  .should('deep.equal', ['456', '458'])

Select the options with the values “456” and “457”
<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('select')
  .select(['456', '457']).invoke('val')
  .should('deep.equal', ['456', '457'])

Select the option with the text “Homer Simpson”
cy.get('select').select('Homer Simpson')

cy.get('td').siblings()           // Yield all td's siblings
cy.get('li').siblings('.active')  // Yield all li's siblings with class '.active'

Get the siblings of each li
<ul>
  <li>Home</li>
  <li>Contact</li>
  <li class="active">Services</li>
  <li>Price</li>
</ul>

// yields all other li's in list
cy.get('.active').siblings()

Get siblings of element with class active
// yields <li class="active">Services</li>
cy.get('li').siblings('.active')

Get the siblings of element with class active
cy.get('.left-nav').find('li.active').siblings()

cy.get('form').submit()   // Submit a form

Submit can only be called on a single form
<form id="contact">
  <input type="text" name="message">
  <button type="submit">Send</button>
</form>

cy.get('#contact').submit()

Submit a form
cy.route('POST', '/users', 'fixture:user').as('userSuccess')
cy.get('form').submit()

Assert that the document’s title is “My Awesome Application”
cy.title().should('eq', 'My Awesome Application')
Assert that the document’s title includes ‘New User’
cy.title().should('include', 'New User')

cy.get('input').type('Hello, World') // Type 'Hello, World' into the 'input'

Type into a textarea.
cy.get('textarea').type('Hello world') // yields <textarea>

Each keypress is delayed 10ms by default in order to simulate how a very fast user types!
cy.get('[contenteditable]').type('some text!')

Type into a non-input or non-textarea element with tabindex
<body>
  <div id="el" tabindex="1">
    This div can receive focus!
  </div>
</body>

cy.get('#el').type('supercalifragilisticexpialidocious')

cy.get('[type="checkbox"]').uncheck()   // Unchecks checkbox element

Uncheck all checkboxes
cy.get(':checkbox').uncheck()

Uncheck element with the id ‘saveUserName’
cy.get('#saveUserName').uncheck()

Uncheck the checkbox with the value of ‘ga’
cy.get('input[type="checkbox"]').uncheck(['ga'])

Uncheck the checkboxes with the values ‘ga’ and ‘ca’
cy.get('[type="checkbox"]').uncheck(['ga', 'ca'])

Uncheck the first checkbox
cy.get('[data-js="choose-all"]').click()
  .find('input[type="checkbox"]').first().uncheck()

cy.url()    // Yields the current URL as a string

Assert the URL is http://localhost:8000/users/1/edit
// clicking the anchor causes the browser to follow the link
cy.get('#user-edit a').click()
cy.url().should('include', '/users/1/edit') // => true
cy.url().should('eq', 'http://localhost:8000/users/1/edit') // => true

Given the remote URL, http://localhost:8000/index.html, all 3 of these assertions are the same.
cy.location('href').should('include', '/index.html')
cy.location().its('href').should('include', '/index.html')
cy.url().should('include', '/index.html')

cy.url().should('contain', '#users/new')

//This wil NOT work since contains only checks DOM elements and cy.url does not return a DOM element
cy.url().contains('#users/new')

cy.visit('http://localhost:3000')    // Yields the window of the remote page

// Wait 30 seconds for page 'load' event
cy.visit('/index.html', { timeout: 30000 })

cy.visit('https://www.acme.com/', {
  auth: {
    username: 'wile',
    password: 'coyote'
  }
})

// this is the same thing as providing the auth object
cy.visit('https://wile:coyote@www.acme.com')

Submit a form
To send a request that looks like a user submitting an HTML form, use a POST method with a body containing the form values:

cy.visit({
  url: 'http://localhost:3000/cgi-bin/newsletterSignup',
  method: 'POST',
  body: {
    name: 'George P. Burdell',
    email: 'burdell@microsoft.com'
  }
})

cy.wrap({ name: 'Jane Lane' })

invoke the function on the subject in wrap and return the new value
const getName = () => {
  return 'Jane Lane'
}

cy.wrap({ name: getName }).invoke('name').should('eq', 'Jane Lane') // true

cy.wrap({ amount: 10 })
  .should('have.property', 'amount')
  .and('eq', 10)