选择自动完成材质 UI 的第一项

Question

我有一个包含自动完成材质 UI 控件的反应挂钩表单。

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

我想运行 cypress 测试用例来填写表单并提交。我如何使用 cypress 选择此组件中的第一个选项。

目前我只是尝试一下运气，如下所示。

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

Answer 1

我用过这个并且它有效：

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

Answer 2

添加自定义命令：

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

然后你可以简单地...

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