REACT MUI-卡内容测试
我正在尝试根据该卡的标题从页面中选择React材料-UI卡。在该卡中,我需要验证食谱文本。
<Card sx={{ maxWidth: 345 }}>
<CardHeader
avatar={
<Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
<CardMedia
component="img"
height="194"
image="/static/images/cards/paella.jpg"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
This impressive paella is a perfect party dish and a fun meal to cook
together with your guests. Add 1 cup of frozen peas along with the mussels,
if you like.
</Typography>
这是我已经尝试过的测试,但是失败了
cy.get('[title="Shrimp and Chorizo Paella"]')
.siblings()
.contains('This impressive paella is a perfect party dish')
I'm trying to select a React Material-UI card from the page based on the title of the card. Within that card I need to verify the recipe text.
<Card sx={{ maxWidth: 345 }}>
<CardHeader
avatar={
<Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
<CardMedia
component="img"
height="194"
image="/static/images/cards/paella.jpg"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
This impressive paella is a perfect party dish and a fun meal to cook
together with your guests. Add 1 cup of frozen peas along with the mussels,
if you like.
</Typography>
This is my test I already tried, but it's failing
cy.get('[title="Shrimp and Chorizo Paella"]')
.siblings()
.contains('This impressive paella is a perfect party dish')
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
MUI卡的标题属性将转换为运行时网页上的A
&gt;
,因此您不能使用selector[title =“ shrimp and chorizo paella”] 。
我建议针对
muicardheader
,因为它是内容部分的兄弟姐妹,使用.contains()
来确保选择正确的卡。The title attribute of the MUI-card is transformed into a
<span>
on the runtime web page, so you cannot use the selector[title="Shrimp and Chorizo Paella"]
.I would suggest targeting the
MuiCardHeader
since it is a sibling of the content section, using.contains()
to ensure the correct card is selected.