Cypress中如何校验点击表格行后折线图是否完成渲染更新

别上来就写固定时长的cy.wait(3000)硬等，数据量波动、测试机性能差异都会让这种用例稳定性极差，按你项目的实际情况选下面的方案就行： #

1. 能拿到图表实例时优先用实例事件校验（稳定性最高） #

现在主流的折线图库（ECharts、Chart.js、AntV G2等）都会暴露渲染完成的事件，直接监听这个事件比啥都准：

• 以最常用的ECharts为例，一般项目都会把图表实例挂在容器DOM的属性上，点击行之后等实例的finished事件触发，就说明折线图已经完全渲染完，连动画都跑完了：

// 点击目标表格行，示例是点第二行
cy.get('[data-testid="data-table"] tbody tr').eq(1).click()
// 等图表渲染完成
cy.get('#line-chart').then($chartDom => {
  const chart = $chartDom[0].echartsInstance // 换成你项目实际存实例的属性名
  return new Cypress.Promise(resolve => {
    chart.on('finished', resolve)
  })
})
// 到这一步渲染已经完成，再写你要的内容校验逻辑就行

• 如果用Chart.js，就等实例的animation回调触发，或者判断chart.animating属性为false即可。

2. 拿不到图表实例时，校验渲染产物的变化 #

如果项目里没暴露图表实例，直接从最终渲染出来的内容判断更新状态即可：

• 要是图表是SVG渲染的：点击行之前先存一份当前折线path的d属性值、或者坐标轴标签、数值点位的文本，点击之后断言这些值已经变成和目标行匹配的新值就行。

// 存点击前的旧折线路径
let oldLinePath
cy.get('#line-chart svg path.series-line').invoke('attr', 'd').then(d => oldLinePath = d)
// 点击行
cy.get('[data-testid="data-table"] tbody tr').eq(1).click()
// 断言折线路径已经更新，不是旧值
cy.get('#line-chart svg path.series-line').invoke('attr', 'd').should('not.equal', oldLinePath)
// 进一步可以校验图上的数值和点击行的数据完全匹配
cy.get('[data-testid="data-table"] tbody tr').eq(1).find('td.target-col').invoke('text').then(cellText => {
  cy.get('#line-chart .value-label').should('contain', cellText.trim())
})

• 要是图表是Canvas渲染的：没法直接读DOM子元素，就点击前先拿一次Canvas的toDataURL()值存下来，点击之后等Canvas的toDataURL()返回值和旧值不一致就说明更新了。记得测试环境把图表动画关掉，不然动画过程中快照会一直变，容易误判。

3. 数据是点击后接口拉取的场景 #

如果点表格行之后才会发请求拉对应行的图表数据，先等接口返回，再配合Cypress自带的重试机制做断言就行，不用额外加等待：

// 先拦截图表数据请求
cy.intercept('GET', '/api/report/line-chart*').as('fetchChartData')
// 点击目标行
cy.get('[data-testid="data-table"] tbody tr').eq(1).click()
// 等接口返回
cy.wait('@fetchChartData')
// 利用should的自动重试能力，等图表状态符合预期，默认4秒超时足够覆盖常规渲染耗时
cy.get('#line-chart').should($chart => {
  // 先确认图表loading消失
  expect($chart.find('.chart-loading')).to.not.exist
  // 再确认目标数据已经渲染在图上
  expect($chart.text()).to.include('你点击的那行数据的标识字段')
})

注意：所有判断逻辑尽量写在should回调里，Cypress会自动轮询执行直到断言通过，不要自己写setTimeout或者自定义轮询逻辑，稳定性会差很多。

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