React MUI-Card content testing

user_19373867 0
Viewed 40

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')
cypress
1 Answers

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')
user_169977070
Related