Angular应用动态下拉菜单在Cypress中无法识别的问题求助

我有一个基于Angular开发的Web应用，正在使用Cypress进行测试。目前遇到的问题是无法让页面中的下拉菜单显示出来——该下拉菜单需点击三点按钮才会出现。点击三点按钮时，我发现fui-datagrid-action-menu的class属性会变为特定值。因此我在Cypress代码中尝试将该元素的class属性设置为对应值，但运行测试时却报错Expected to find element: fui-dropdown, but never found it.。以下是我的Cypress代码片段，恳请指点哪里出错了，或是针对这类Angular动态元素（如class属性变化等场景）有更优的编码方式。

cy.get('fui-widget-body')
  .within(() => {
    cy.log('user found');
    cy.get('fui-datagrid-action-menu').invoke('show').trigger('mouseover', {force: true});
    cy.get('fui-datagrid-action-menu').invoke('show').click({ force: true });
    cy.get('fui-datagrid-action-menu').invoke('attr', 'class', 'fui-datagrid-body-row-action-menu ' +
      'ng-star-inserted fui-datagrid-action-menu-visible fui-datagrid-action-menu-open')
      .within(($menu) => {
        cy.get('fui-dropdown').invoke('show').click({ force: true });
        // ...后续操作
      });
  });

1. 直接修改class的核心问题 #

你手动修改DOM元素class的方式违背了Angular组件的运行逻辑——Angular组件的状态（包括class变化）是由内部绑定逻辑控制的，强行修改DOM属性不会触发组件内部的渲染流程，所以fui-dropdown并不会因为你改了class就被渲染出来。

2. 正确操作：模拟真实用户行为 #

应该完全复刻用户的操作流程，而非直接篡改DOM：

• 找到触发下拉的三点按钮（如果fui-datagrid-action-menu本身就是触发按钮，直接点击）
• 等待Angular完成组件渲染后，再定位fui-dropdown

优化后的示例代码：

cy.get('fui-widget-body').within(() => {
  cy.log('user found');
  // 先触发按钮（如果需要hover才显示按钮，先加trigger('mouseover')）
  cy.get('fui-datagrid-action-menu').trigger('mouseover').click({ force: true });
  // 延长等待时间，确保Angular完成动态渲染
  cy.get('fui-dropdown', { timeout: 5000 })
    .should('be.visible')
    .click({ force: true });
  // ...后续操作
});

3. 额外优化建议 #

• 避免重复调用cy.get('fui-datagrid-action-menu')，用别名复用元素：

  cy.get('fui-datagrid-action-menu').as('actionMenu');
  cy.get('@actionMenu').trigger('mouseover').click({ force: true });
  

• 如果点击后菜单仍不出现，检查页面是否存在遮挡，或者是否需要先滚动到元素可见区域：

  cy.get('fui-datagrid-action-menu').scrollIntoView().click({ force: true });
  

• 对于Angular动态生成的元素，依赖Cypress的自动等待机制，必要时通过timeout参数延长等待时长，确保组件完成渲染。

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