SAP Hybris+Cypress自动化测试遇元素不可见问题求助

问题核心 #

目标元素CSS属性为display: none，而Cypress的.should('be.visible')断言会严格校验元素可见性（要求display不为none、visibility不为hidden等），同时你错误地将{ force: true }传给了断言（该选项仅适用于click这类命令，不适用于断言），导致测试卡在该步骤。

解决方案 #

1. 修正断言逻辑，跳过不必要的可见性校验 #

既然元素本身是display: none状态，无需断言其可见，改为断言元素存在即可，同时验证目标产品的属性/内容是否存在于列表中。

修改后的代码示例：

cy.get('.ye-default-reference-editor-selected-listbox') // 定位列表容器
  .eq(18) // 注意：依赖索引定位不稳定，建议替换为更唯一的选择器（比如结合父元素标识）
  .scrollIntoView()
  .should('exist') // 仅验证元素存在
  .within(() => {
    // 验证目标产品行存在，并检查title属性是否匹配
    cy.get('tr[title="CAN_BE_REPLACED_BY ->  [] - IQOS ILUMA One Holder Moss Green [G0000607] - Tunisia Product Catalog : Staged"]')
      .should('exist')
      .invoke('attr', 'title')
      .should('include', 'IQOS ILUMA One Holder Moss Green [G0000607]');
    
    // 如果必须点击该元素，添加force:true选项（命令级别的参数）
    // .click({ force: true });
  });

2. 优化定位方式，避免依赖索引 #

eq(18)依赖元素在DOM中的顺序，一旦列表元素数量变化，测试就会失败。建议寻找更稳定的定位方式：

• 结合列表的父容器属性（比如如果该列表属于某个特定模块，用父元素的ID或类组合定位）
• 如果列表有唯一标识（比如data-testid属性），优先使用该属性定位

3. 检查组件是否需要触发显示 #

如果该替换产品列表是需要点击按钮/下拉框才会显示的组件，那你需要先执行触发操作（比如点击展开按钮），让元素从display: none变为可见状态，之后再进行可见性断言和操作：

// 先点击展开替换产品列表的按钮
cy.get('[data-testid="replace-product-toggle"]').click();

// 再定位列表容器，此时元素应该是可见的
cy.get('.ye-default-reference-editor-selected-listbox')
  .should('be.visible')
  .within(() => {
    cy.get('tr[title="xxx"]').should('be.visible').click();
  });

内容的提问来源于stack exchange，提问作者No Tools No Craft