如何在Cypress中为元素新增display:none样式且保留原有样式？

你的代码无效是因为invoke('addClass')的作用是给元素添加CSS类名，而非直接操作内联style属性，传入'style'和'display: none'属于错误用法。下面是几种可行的解决办法：

方法1：直接操作内联样式（推荐） #

使用Cypress的invoke('css')方法单独设置display属性，该方法不会覆盖元素已有的内联样式：

cy.get('#my-element').invoke('css', 'display', 'none');

方法2：通过对象批量设置样式（适合多属性场景） #

如果后续需要同时调整多个样式，可传入样式对象，同样不会覆盖原有属性：

cy.get('#my-element').invoke('css', {
  display: 'none'
});

方法3：通过CSS类控制（符合样式分离原则） #

先在项目CSS文件中定义隐藏类：

.hidden {
  display: none;
}

再在Cypress中给元素添加这个类：

cy.get('#my-element').invoke('addClass', 'hidden');

若原有样式中display属性优先级较高，可给类内样式加上!important确保生效：

.hidden {
  display: none !important;
}

验证样式是否正确设置 #

可通过断言确认原有样式和新增样式均存在：

cy.get('#my-element')
  .should('have.css', 'max-height', '100px')
  .and('have.css', 'min-width', '200px')
  .and('have.css', 'display', 'none');

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