在Next.js中通过ID获取嵌套组件的Cypress测试问询

你需要将现有基于href属性定位元素的Cypress测试，改为通过组件ID查找目标元素并验证导航功能，以下是具体实现方案：

目标Next.js页面组件 #

import Layout from "../../components/layout"
import ActionAreaCard from '../../components/card'
import Grid from '@mui/material/Grid';

export default function HomePage() {
    return (
        <Layout id='layout'>
            <Grid container spacing={2}>
                <Grid item xs={6}>
                    <ActionAreaCard
                       id='action-card-submit'
                       title='Submit Damage Report'
                       href="/view/data-submission"
                       imagePath='/assets/images/car-damage.jpg'
                     />
                </Grid>
                <Grid item xs={6}>
                    <ActionAreaCard
                       id='action-card-view'
                       title='View Damage Reports'
                       href="/view/view-reports"
                       imagePath='/assets/images/damage-report.jpg' />
                </Grid>
            </Grid>
        </Layout>
    )
}

原有测试代码 #

it('should navigate to the data submissions page', () => {
    // Start from the index page
    cy.visit('http://localhost:3000/')

    // Find a button with an href attribute containing "/view/data-submission" and click it
    cy.get('a[href*="/view/data-submission"]').click()
})

修改后的测试代码 #

it('should navigate to the data submissions page', () => {
    // 访问首页
    cy.visit('http://localhost:3000/')

    // 通过组件ID定位目标卡片，再找到内部可点击的链接元素并点击
    cy.get('#action-card-submit').find('a').click()

    // 可选：添加URL断言，验证导航是否成功完成
    cy.url().should('include', '/view/data-submission')
})

关键说明 #

• 直接利用你给ActionAreaCard设置的id='action-card-submit'，通过cy.get('#action-card-submit')精准定位目标组件
• 由于ActionAreaCard内部会将href属性渲染为<a>标签，因此用.find('a')找到实际可触发导航的元素
• 额外添加的URL断言可以避免出现"点击无效但测试通过"的情况，让测试逻辑更严谨

内容的提问来源于stack exchange，提问作者Sajith Wijerathne