REACT MUI-卡内容测试

发布于 2025-02-12 03:40:38 字数 1170 浏览 0 评论 0原文

我正在尝试根据该卡的标题从页面中选择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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

十年九夏 2025-02-19 03:40:38

MUI卡的标题属性将转换为运行时网页上的A &gt;,因此您不能使用selector [title =“ shrimp and chorizo​​ paella”] 。

我建议针对muicardheader,因为它是内容部分的兄弟姐妹,使用.contains()来确保选择正确的卡。

cy.contains('.MuiCardHeader-root', 'Shrimp and Chorizo Paella')
  .siblings()
  .contains('This impressive paella is a perfect party dish')

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.

cy.contains('.MuiCardHeader-root', 'Shrimp and Chorizo Paella')
  .siblings()
  .contains('This impressive paella is a perfect party dish')
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文