如何使用 Cypress 测试 React Material UI “Select”

Question

我正在映射 json 格式的 Carsdata。无法在 cypress 中对此进行测试。

试过了：

cy.get(#any-make-dropdown).select('chevroletMalibu')

还有其他选项。

<FormControl sx={{ m: 1,width: 300, bgcolor: 'whitesmoke' }}>
        <InputLabel id="demo-simple-select-label">Any Make</InputLabel>
        <Select
          id="any-make-dropdown"
          value={value}
          label="Any Make"
          onChange={handleChange}
        >

          {Carsdata.map((c) => (
              <MenuItem key={c.Id} value={c.Name}>
                {c.Name}
              </MenuItem>
          ))}

        </Select>
</FormControl>

// Carsdata.json 
[
    {
        "Id": 1,
       "Name":"chevroletMalibu",
       "Miles_per_Gallon":18,
       "Cylinders":8,
       "Displacement":307,
       "Horsepower":130,
       "Weight_in_lbs":3504,
       "Acceleration":12,
       "Year":"1970-01-01",
       "Origin":"USA"
    },
    {
        "Id": 2,
       "Name":"buickSkylark",
       "Miles_per_Gallon":15,
       "Cylinders":8,
       "Displacement":350,
       "Horsepower":165,
       "Weight_in_lbs":3693,
       "Acceleration":11.5,
       "Year":"1972-01-01",
       "Origin":"USA"
    },
    {
        "Id": 3,
       "Name":"plymouthSatellite",
       "Miles_per_Gallon":18,
       "Cylinders":8,
       "Displacement":318,
       "Horsepower":150,
       "Weight_in_lbs":3436,
       "Acceleration":11,
       "Year":"1973-01-01",
       "Origin":"USA"
    },
    {
        "Id": 4,
       "Name":"amcRebel",
       "Miles_per_Gallon":16,
       "Cylinders":8,
       "Displacement":304,
       "Horsepower":150,
       "Weight_in_lbs":3433,
       "Acceleration":12,
       "Year":"1974-01-01",
       "Origin":"USA"
    },
    {
        "Id": 5,
       "Name":"ford torino",
       "Miles_per_Gallon":17,
       "Cylinders":8,
       "Displacement":302,
       "Horsepower":140,
       "Weight_in_lbs":3449,
       "Acceleration":10.5,
       "Year":"1975-01-01",
       "Origin":"USA"
    }
]

Answer 1

React 将标记转换为 <div> 而不是 <select> 所以 cy.select() 不起作用。

通过点击，

cy.get('#any-make-dropdown').click()
cy.contains('chevroletMalibu').click()
cy.get('#any-make-dropdown').should('contain', 'chevroletMalibu')

Answer 2

const ServiceType = [
{ id: 'AmbulanceCustomer', title: 'Ambulance User' },
{ id: 'PoliceCustomer', title: 'Police User' },
{ id: 'FireCustomer', title: 'Fire User' },
{ id: 'FarmacyCustomer', title: 'Farmacy User' }

]

< Form onSubmit = { handleSubmit } data-cy="form" >
    <Grid container spacing={6} data-cy="grid1">
        <Grid item lg={6} md={6} sm={12} xs={12} sx={{ mt: 2 }} data-cy="grid2">

            <div data-cy="service_type">
                <Controls.Select
                    name="service_type"
                    label="User Type"
                    options={ServiceType}
                    value={values.service_type}
                    onChange={handleInputChange}
                    error={errors.service_type}
                />
            </div>
        </Grid>
    </Grid>
 </Form >

cy.get('[data-cy^="form"]').get('[data-cy^="grid1"]').get('[data-cy^="grid2"]').get('[data-cy^="service_type"]')
    .get('[name="service_type"]').get('#mui-component-select-service_type', { force: true }).type("Ambulance User{enter}"), { force: true }

Answer 3

解决方案和我的answer here类似，但是适配Material-UI v5。

Cypress documentation 建议为 Cypress 应该与之交互的元素分配一个唯一的 data-cy 属性，因此您应该对 Select、它的 inputProps 和它的每个 MenuItem 都这样做。

组件：

<FormControl sx={{ m: 1, width: 300, bgcolor: 'whitesmoke' }}>
  <InputLabel id="demo-simple-select-label">Any Make</InputLabel>
  <Select
    id="any-make-dropdown"
    data-cy="any-make-dropdown"
    inputProps={{
      'data-cy': `any-make-dropdown-input`
    }}
    value={value}
    label="Any Make"
    onChange={handleChange}
  >

    {Carsdata.map((c) => (
      <MenuItem data-cy={`select-option-${c.Id}`} key={c.Id} value={c.Name}>
        {c.Name}
      </MenuItem>
    ))}

  </Select>
</FormControl>

赛普拉斯测试：

it("should change value of select box", () => {
  /** Confirm that the select box is empty by default */
  cy.get(`[data-cy = "any-make-dropdown-input"]`).should(`have.value`, ``);

  /** Click on the select box, then on the option */
  cy.get(`[data-cy = "any-make-dropdown"]`).click();
  cy.get(`[data-cy = "select-option-2"]`).click();

  /** Assert the new value of the select box */
  cy.get(`[data-cy = "any-make-dropdown-input"]`).should(`have.value`, `buickSkylark`);
});