React中CSS Modules动态类名适配Cypress cy.get()的方案

方法1：添加测试专用属性（最推荐） #

直接给需要测试的元素加上data-testid这类仅用于测试的属性，完全不影响样式和业务逻辑，定位也最稳定。

修改组件代码：

import styles from 'styles/About.module.css';

const About = () => {
  return (
    <div className={styles.about} data-testid="about-container">
       <h1 className={styles.title} data-testid="about-title">About Me Page</h1>
    </div>
  );
};

export default About;

测试代码里直接用属性定位：

cy.get('[data-testid="about-title"]').should('not.be.empty');

方法2：在测试文件中导入CSS Modules的styles #

把组件用的样式文件导入到测试代码里，直接通过styles.title拿到编译后的类名，不用手动查找。

测试代码示例：

import styles from '../src/styles/About.module.css'; // 路径根据你的项目结构调整

describe('About Page', () => {
  it('should display title', () => {
    cy.visit('/about');
    cy.get(`.${styles.title}`).should('not.be.empty');
  });
});

这种方式的好处是，只要组件里的类名不变，哪怕CSS Modules生成的哈希值变了，测试代码也不用改。

方法3：结合父元素层级定位 #

如果不想加额外属性或导入样式，也可以通过父元素的动态类名（同样可以用方法2的方式获取）配合标签来定位：

import styles from '../src/styles/About.module.css';

cy.get(`.${styles.about}`).find('h1').should('not.be.empty');

不过这种方式依赖DOM结构，后续如果页面结构调整，测试可能会失效，优先级低于前两种方法。

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