React正在将标记转换为
我正在映射为json的Carsdata。无法在柏树中进行测试。
尝试：
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"
}
]
<div>而不是<select>，因此cy.select()不起作用。
点击，
cy.get('#any-make-dropdown').click()
cy.contains('chevroletMalibu').click()
cy.get('#any-make-dropdown').should('contain', 'chevroletMalibu')
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 }
该解决方案与我在这里的回答类似，但适用于Material UI v5。
Cypress文档建议为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>
Cypress测试：
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`);
});