Cypress如何通过部分style属性（如背景色、高度）定位元素？

你不需要写完整的style属性值做匹配，以下三种方案都可以实现更简洁的样式定位，稳定性远高于全量字符串匹配：

方案1：CSS属性通配符匹配（最轻量） #

CSS选择器支持*=语法匹配属性中包含的指定子串，你只需要从style属性里挑一段不会和其他元素重复的特征片段即可，不需要写全所有样式：

// 示例：匹配包含指定斜纹渐变背景的甘特图事件
cy.get('[style*="rgb(249, 30, 26) 20px"]')

// 示例：匹配高度为18px的同类元素
cy.get('.Gantt-event[style*="height: 18px"]')

注意：这种写法要尽量选无格式差异的特征值（比如固定色值、固定像素值），避开容易因为代码格式化变动的空格、换行片段。

方案2：filter方法匹配计算样式（最稳定） #

如果怕style字符串的格式变动影响匹配，可以先选中所有同类型元素，再通过读取DOM实际渲染的样式值做过滤，完全不受style属性的书写顺序、空格、换行影响：

cy.get('.example-event.Gantt-event')
  .filter((_, el) => {
    const $el = Cypress.$(el)
    // 按需读取要匹配的单个样式属性
    const elHeight = $el.css('height')
    const elBg = $el.css('background-image')
    // 自定义匹配规则
    return elHeight === '18px' && elBg.includes('rgb(255, 243, 204)') && elBg.includes('rgb(249, 30, 26)')
  })

这种写法和全量style匹配的效果完全一致，但冗余度极低，后续维护只需要调整对应要匹配的样式值即可。

方案3：优先使用自带属性定位（最推荐） #

你提供的元素上自带了多个稳定的自定义属性、title属性，这类属性的定位稳定性远高于样式匹配，只要对应属性在同类元素中唯一，优先用这类选择器：

// 示例：通过title属性匹配对应事件
cy.get('.Gantt-event[title="SEPP-16288"]')

// 示例：通过data属性组合匹配
cy.get('.Gantt-event[data-work-status="1"][data-is-people="true"]')

注意：全量匹配style属性的写法维护成本极高，只要前端调整了样式属性顺序、新增了一个样式属性、改动了代码格式化的空格/换行，选择器就会直接失效，不建议在项目中大量使用。

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