Reactjs Cypress选择自动完成物料界面的第一项

我有一个包含自动完成材质UI控件的react钩子窗体

    <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}
    />

---

我用了这个，它很管用：

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

---

我用了这个，它很管用：

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

---

假设我们给自动完成提供一个id，比如

              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}                 
                />

id=“池腿自动完成”
自由女神
options={legOptions.map（（option）=>option.title）}
onChange={UpdateNewRegitemText}
renderInput={（参数：any）=>(

cy.get（“#pool-leg-autoComplete-option-0”）。单击（）；

---

在这种情况下，项目的索引为0。

假设我们为自动完成提供了一个id，例如

              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}                 
                />

id=“池腿自动完成”
自由女神
options={legOptions.map（（option）=>option.title）}
onChange={UpdateNewRegitemText}
renderInput={（参数：any）=>(

cy.get（“#pool-leg-autoComplete-option-0”）。单击（）；

在这种情况下，项目的索引为0。

添加自定义命令：

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

然后你可以简单地

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

添加自定义命令：

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

然后你可以简单地

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

---

可以制作一个codesanbox这样更容易复制吗？可以制作一个codesanbox这样更容易复制吗？