我在我的Reaction应用程序中使用了动态类名,它们是由CSS模块生成的.

className={styles.myclass}被编译成class="Myclass__1234",因此 cypress cy.get(.'myclass')将不起作用.

举个例子:

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

const About = () => {

  return (
    <div className={styles.about}>
       <h1 className={styles.title}>About Me Page</h1>
    </div>
  );
};

export default About;

要判断标题文本,您需要执行以下操作:

cy.get('About_title__1234').should('not.be.empty');

这意味着我每次都必须深入开发工具来找到真正的类名.

Is there any other method I could use?

我想cy.get('h1')会工作,但我可能希望在页面上稍后多个h1标签.

推荐答案

显示的示例代码的一些 idea :

Specify the text

cy.contains('h1', 'About Me Page')在逻辑上等同于cy.get('.About_title__1234').should('not.be.empty'),因为它搜索特定文本.

您不必每次都添加显式的.should()断言,查询也有内置的断言.

Use partial class attribute selectors

您可能知道类有About(来自组件名称)和title(在CSS中以语义命名),因此您可以在 Select 器中使用^=来指示应该只匹配类的开始部分-cy.get('[class^="About_title"]').should('not.be.empty')

Traversal of the DOM

不要认为目标元素的属性是孤立的,而是使用它与已知的轻松 Select 的元素的关系来导航DOM树,请参见Examples of traversing DOM elements in Cypress

示例:

cy.get('main')
  .find('h1')
  .first()
  .should('not.be.empty')

更一般地说,Cypress更喜欢data-个属性,见Selecting Elements

Best Practice:使用data-*属性为 Select 器提供上下文,并将它们与CSS或JS更改隔离开来.

测试库的首选是基于角色的 Select 器,参见Priority.

根据指导原则,您的测试应该尽可能类似于用户如何与您的代码(组件、页面等)交互.考虑到这一点,我们推荐以下优先顺序:

getByRole:这可用于查询可访问性树中公开的每个元素.

如果您要向代码添加可访问性属性,这是有意义的(有人说每个网页都应该这样编码).

Reactjs相关问答推荐

如何使用React Router创建响应式主详细信息应用程序?

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

在Redux工具包查询中,是否可以将标记应用到API切片内的所有端点?

在Reaction+Redux+RTKQuery中对API调用进行排序

根据另一个Select中的选定值更改Select中的值

Next.js Next-Auth登录函数重定向到http://localhost:3000/api/auth/error

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

PWA:注册事件侦听器不会被触发

找不到名称setCometChat

React Context API 在 Next.js 中更改路由时获取默认数据

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

将水平滚动视图添加到底部导航选项卡

改变输入的默认值时出现问题:number react-hook-form

React Native Realm 应用程序在发布构建后崩溃

页面加载时不显示数组中的数据

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

如何使图标适合 react-bootstrap 中的行元素

setState 改变对象引用

Lodash 在命名导入中导入整个包

CORS 政策:无访问控制允许来源-AWS 和 Vercel