CODEWITHSUNDEEP
autocompletematerial-uicypress
OnePiece
OnePiece

Reputation: 518

Cypress test material ui autocomplete

How can I get a value from the dropdown in cypress for the material ui autocomplete.

Currently it gets to the selection of the autocomplete but I cant seem to get to the dropdown or type anything. There will always be a test user called "ntest_user" so I thought maybe I can autocomplete it instead of clicking dropdown but no dice

  <Autocomplete
    id="combo-box"
    data-testid="tagAutocomplete"
    options={userz}
    getOptionLabel={(option) => option}
    value={userId}
    onChange={viewUserz}
    renderInput={(params) => <TextField {...params}
      label="User Id"
      variant="outlined" />}
  />
</FormControl>


cy.get('.tagAutocomplete li[data-option-index="0"]').click();

Upvotes: 3

Views: 3987

Answers (1)

Alapan Das
Alapan Das

Reputation: 18626

You can do something like this:

cy.get("#combo-box").click();
cy.get("li[data-option-index="0"]").contains("ntest_user").then((option) => {
   option[0].click();
})

OP was able to solve by this:

cy.get("#combo-box").click();
cy.contains("ntest_user").then((option) => {
   option[0].click();
})

Upvotes: 2

Related Questions