Question

我有一个React Hook表单，其中包含“自动完成”材料UI控件。

<img src = "IMAGES/dodecanese.jpg" width=500px>

我想运行一个赛普拉斯测试用例来填写表格并提交。如何使用cypress选择该组件中的第一个选项。

目前，我只是像下面这样尝试运气。

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

Answer 1

我使用了它，并且有效：

exp(sum(ln( . . . )))

Answer 2

假设我们为自动完成提供了一个 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}                 
                />

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

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

Answer 3

添加自定义命令：

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

然后你可以简单地...

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

赛普拉斯选择“自动完成材料UI”的第一项

3 个答案: