bem类名断言是最稳定可复用的css自动化测试方式，因其不依赖dom结构、computedstyle或构建压缩，仅需验证类名存在即可；应优先用classlist.contains而非getcomputedstyle，并在编译阶段用postcss-bem-linter拦截非法写法，同时显式覆盖modifier组合状态。
直接用 BEM 类名做断言，是目前最稳定、最可复用的 CSS 自动化测试方式。它不依赖 DOM 结构、不依赖 getComputedStyle 解析、不依赖构建产物是否压缩——只要类名存在且被正确添加，测试就可靠。
为什么 classList.contains 比 getComputedStyle 更可靠
运行时验证 Modifier 是否生效，classList.contains('button--disabled') 是确定性判断；而 getComputedStyle(el).opacity 会因多种原因返回非预期值：
- 浏览器可能压缩声明值（如
opacity: 0.5→opacity: .5），正则匹配易失败 - CSS 变量未被 JS 设置时，
getComputedStyle返回空字符串或默认值，和真实渲染不一致 - 继承、层叠、媒体查询激活状态都会干扰
computedStyle的稳定性，CI 中复现率低
如何在 Jest / Cypress 中精准命中 BEM 类名
BEM 类名本身具备强语义和唯一性，测试时应直接利用这点，而不是绕路查样式效果：
- Jest + RTL：用
screen.getByRole('button', { name: /submit/ }).classList.contains('button--disabled') - Cypress：用
cy.get('button').should('have.class', 'button--disabled')，避免.should('have.css', 'opacity', '0.5') - 快照测试中，
expect(container).toMatchSnapshot()能天然捕获button--primary button--large这类组合，无需额外逻辑
PostCSS 插件如何在编译阶段卡住不可测的写法
很多“看似能测”的 BEM 写法，实际破坏了测试前提——比如修饰符叠加、后代选择器退化。这类问题必须在代码提交前拦截：
-
postcss-bem-linter可拒绝.button--primary--disabled（多--）、.modal--open .modal__content（含空格，退化为后代选择器） - 规则需显式配置
ignoreSelectors: ["/^\..+:(hover|focus)/"]，否则伪类会被误报 - 禁止
.card__title strong这类依赖标签的选择器——它让card__title--highlighted在不同 HTML 结构下行为不一致，根本无法构造稳定断言
真正难测的不是单个类名，而是 Modifier 组合互斥性
测试 button--disabled 单独存在没问题，但当它和 is-loading 同时加在元素上时，样式是否按预期覆盖？这需要显式构造多状态组合：
- 不要只测
button--disabled，要测button--disabled is-loading和button--primary button--disabled - Modifier 之间不能有隐式依赖（比如
button--disabled里写&:hover { opacity: ... }），否则测试无法覆盖所有视觉路径
Modifier 组合的覆盖完整性，往往比类名是否存在更难保障——它要求你主动枚举状态交集，而不是被动等待某个 class 出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
