Assertion

// retry until we find 3 matching <li.selected>
cy.get('li.selected').should('have.length', 3)

// retry until this input does not have class disabled
cy.get('form').find('input').should('not.have.class', 'disabled')

// retry until this textarea has the correct value
cy.get('textarea').should('have.value', 'foo bar baz')

// assert the element's text content is exactly the given text
cy.get('[data-testid="user-name"]').should('have.text', 'Joe Smith')
// assert the element's text includes the given substring
cy.get('[data-testid="address"]').should('include.text', 'Atlanta')
// retry until this span does not contain 'click me'
cy.get('a').parent('span.help').should('not.contain', 'click me')
// the element's text should start with "Hello"
cy.get('[data-testid="greeting"]')
  .invoke('text')
  .should('match', /^Hello/)
// use cy.contains to find an element with its text
// matching the given regular expression
cy.contains('[data-testid="greeting"]', /^Hello/)


// retry until the element with
// data-testid "form-submit" is visible
cy.get('[data-testid="form-submit"]').should('be.visible')
// retry until the list item with
// text "write tests" is visible
cy.contains('[data-testid="todo"] li', 'write tests').should('be.visible')

// retry until SOME elements are visible
cy.get('li').should('be.visible')
// retry until EVERY element is invisible
cy.get('li.hidden').should('not.be.visible')

// retry until loading spinner no longer exists
cy.get('[data-testid="loading"]').should('not.exist')

// retry until our radio is checked
cy.get(':radio').should('be.checked')

// retry until element has matching css
cy.get('[data-testid="completed"]').should(
  'have.css',
  'text-decoration',
  'line-through'
)

// retry while accordion css has the
// "display: none" property
cy.get('[data-testid="accordion"]').should('not.have.css', 'display', 'none')


cy.get('[data-testid="example-input"]')
  .should('be.disabled')
  // let's enable this element from the test
  .invoke('prop', 'disabled', false)

cy.get('[data-testid="example-input"]')
  // we can use "enabled" assertion
  .should('be.enabled')
  // or negate the "disabled" assertion
  .and('not.be.disabled')

cy.get('[data-testid="todo-item"]')
  .should('have.length', 2)
  .and('have.class', 'completed')


cy.contains('first todo').should('not.have.class', 'completed')
cy.get('[data-testid="loading"]').should('not.be.visible')


cy.get('[data-testid="todos"]').should('have.length', 2)
cy.get('[data-testid="new-todo"]').type('Write tests{enter}')

// using a positive assertion to check the
// exact number of items
cy.get('[data-testid="todos"]').should('have.length', 3)

cy.get('[data-testid="todos"]').should('have.length', 2)
cy.get('[data-testid="new-todo"]').type('Write tests{enter}')

// using negative assertion to check it's
// not a number of items
cy.get('[data-testid="todos"]').should('not.have.length', 2)

// at first the item is marked completed
cy.contains('[data-testid="todos"]', 'Write tests')
  .should('have.class', 'completed')
  .find('[data-testid="toggle"]')
  .click()

// the CSS class has been removed
cy.contains('[data-testid="todos"]', 'Write tests').should(
  'not.have.class',
  'completed'
)


cy.get('div').should(($div) => {
  expect($div).to.have.length(1)

  const className = $div[0].className

  // className will be a string like "main-abc123 heading-xyz987"
  expect(className).to.match(/heading-/)
})


cy.get('[data-testid="assertions-link"]')
  .should('have.class', 'active')
  .and('have.attr', 'href')
  .and('include', 'cypress.io')

// ✅ THE CORRECT WAY
cy.get('[data-testid="loading"]').should('be.visible')
cy.get('[data-testid="loading"]').should('not.be.visible')