CODEWITHSUNDEEP
reactjsmaterial-uiautocompletecypressreact-hook-form
Missak Boyajian
Missak Boyajian

Reputation: 2245

Select first item of Autocomplete Material UI

I have a react hook forms that contains Autocomplete material UI controls.

    <Controller
      as={
        <Autocomplete
          data-cy="profileCountry"
          options={countries}
          getOptionLabel={option => option.name}
          renderInput={params => (
            <TextField
              {...params}
              label="* Country"
              placeholder="Select a Country"

              InputLabelProps={{
                shrink: true
              }}
              variant="outlined"
            />
          )}
        />
      }
      rules={{ required: true }}
      onChange={([, data]) => data}
      defaultValue={{ id: 0, name: "" }}
      getOptionSelected={(option, value) => option.id === value.id}
      name="country"
      id="country"
      control={control}
    />

I want to run a cypress test case to fill up the form and submit. How can I select like the first option in this component using cypress.

Currently I just tried my luck like the following.

cy.get("[data-cy=profileCountry]").select("Germany");

Upvotes: 7

Views: 8093

Answers (6)

Jishnu Raj
Jishnu Raj

Reputation: 220

First click on the autocomplete to make the options popup

cy.get('[data-testing=\'currency-picker\']').click();

And then find the specific option you want to choose, and click on it.

cy.contains('Indian Rupee').click();

Just like a human would do. What is so confusing about it 🤔

Upvotes: 0

N-DEV
N-DEV

Reputation: 37

You need the follwing:

cy.wait(2000) // waiting for ajax to complete (till the request is resolved)
cy.get('#The MUI ID').click({force:true}).focused().type('Germany');
cy.contains('Germany').click({force:true});

Upvotes: -1

umit
umit

Reputation: 57

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

Upvotes: -1

AndrewMcLagan
AndrewMcLagan

Reputation: 13987

Add a custom command:

Cypress.Commands.add('getDropdownOptions', () => {
  return cy.get('.MuiAutocomplete-popper [role="listbox"] [role="option"]', {
    timeout: 10000,
  });
});

Then you can simply...

cy.getDropdownOptions().contains('Germany').click();

Upvotes: 7

Byron
Byron

Reputation: 771

Assuming we give an id to the autocomplete such as

              id="pool-leg-autoComplete"
              freeSolo
              options={legOptions.map((option) => option.title)}
              onChange={updateNewLegItemText}
              renderInput={(params: any) => (
                <TextField
                  {...params}
                  label="Add a leg to the pool"
                  margin="normal"
                  autoFocus
                  variant="outlined"
                  value={newLegItemText}                 
                />

cy.get('#pool-leg-autoComplete-option-0').click();

Where the index of the item is 0 in this case.

Upvotes: -2

Jakub Bartosik
Jakub Bartosik

Reputation: 111

I used this and it works:

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

Upvotes: 11

Related Questions