I am currently utilizing Material UI with React using Typescript and I am looking to create a test for the autocomplete functionality using Cypress. Here is the approach I have taken:
- Identifying the Autocomplete component and opening it,
- Choosing an option,
- Verifying the value in the input field.
Source Code:
<div class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-4ec9ly-MuiAutocomplete-root" role="combobox" aria-expanded="false" xpath="1">
<div class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root">
<label class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-root MuiFormLabel-colorPrimary css-577pmh-MuiFormLabel-root-MuiInputLabel-root" data-shrink="false" for="movies-filter" id="movies-filter-label" style="">Movies
</label>
<div class="MuiInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiAutocomplete-inputRoot css-4op3e8-MuiInputBase-root-MuiInput-root">
<input aria-invalid="false" autocomplete="off" id="movies-filter" placeholder="Start typing" type="text" class="MuiInput-input MuiInputBase-input MuiInputBase-inputSizeSmall MuiAutocomplete-input MuiAutocomplete-inputFocused css-nz481w-MuiInputBase-input-MuiInput-input" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="" style="">
</div>
</div>
</div>
movie.cy.ts
- First Attempt:
cy.contains('.MuiAutocomplete-root', 'Movies').click(); // Identify Autocomplete component and open it
cy.contains('A1-Test1').click(); // Choose an option
cy.contains('.MuiAutocomplete-root', 'Movies')
.find('input')
.should('have.value', 'Movie1'); // Verify the value in the input field
https://i.stack.imgur.com/KS7HI.png
- Second Attempt:
cy.get('#Movies-filter').click().focused().type('Mo');
cy.contains('Movie1').click();