hypeJunction

<label>
  Search
  <input type="search" value="bear" aria-busy aria-describedby="search-progress" />
</label>
<div role="progressbar" class="spinner" aria-label="Searching for bear" />
<ul aria-label="Search Results" aria-busy aria-describedby="search-progress">
  <li>Elephant</li>
</ul>

hypeJunction

cy.getInput('Add File').attach('elephant.pdf');

cy.getInput('Add File')
  .alerts()
  .should('include', 'PDF files are not supported');
  
cy.getList('File List')
  .getListItem('elephant.pdf')
  .alerts()
  .should('include', 'PDF files are not supported');

hypeJunction

<label>
  Add File
  <input type="file" 
         accepts="image/*" 
         aria-invalid 
         aria-describedby="file-input-help file-2-error" 
         aria-errormessage="file-2-error"
  />
</label>
<span id="file-input-help">Please add 1 or more image files</span>

hypeJunction

cy.getForm('Login').within(() => {
  cy.getInput('Username').type('john.doe');
  cy.getInput('Password').type('secret');
  cy.getButton('Submit').press();
})

hypeJunction

cy.getForm('Add To-Do Item').within(() => {
   cy.getInput('To-Do Item').type('Buy Milk');
   cy.getButton('Add').press();
})

cy.getList('To-Do List').within(() => {
   cy.getListItem('Buy Milk').should('exist');
   cy.getInput('Buy Milk').check();
});

hypeJunction

<div id="list-id">To-Do List</div>
<ul aria-labelledby="list-id">
  <li aria-labelledby="item-1">
    <label>
       <input type="checkbox" />
       <span id="item-1">Do Laundry</span>
    </label>
  </li>
  <li aria-labelledby="item-2">
    <label>

hypeJunction

<form>
  <label>Username<input /></label>
  <label>Password<input/ ></label>
  <button type="submit">Submit</button>
</form>

hypeJunction

* I see a "Login" form
* I enter "john.doe" in "Username" input
* I enter "secret" in "Password" input
* I press "Submit" button

hypeJunction

cy.getForm('Login');
cy.getInput('Username').type('john.doe');
cy.getInput('Password').type('secret');
cy.getButton('Submit').press();

hypeJunction

cy.findByRole('form', { name: 'Login' }).as('landmark');
cy.get('@landmark').findByLabelText('Username').type('johh.doe');
cy.get('@landmark').findByLabelTest('Password').type('secret');
cy.get('@landmark').findByRole('button', { name: 'Submit' }).click();