将 cy.get() 与动态类名一起使用？

Question

我在我的 React 应用程序中使用动态类名称，它们是由 CSS 模块生成的。

编译className={styles.myclass}成class="Myclass__1234"这样，cypresscy.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');

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

我还可以使用其他方法吗？

我想cy.get('h1')可以，但稍后我可能需要在页面上使用多个 h1 标签。

Answer 1

显示的示例代码的一些想法：

指定文本

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

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

使用分部类属性选择器

您可能知道该类具有About（来自组件名称）和title（在 CSS 中语义命名），因此您可以^=在选择器中使用来指示仅应该匹配类的开头 -cy.get('[class^="About_title"]').should('not.be.empty')

DOM 的遍历

不要考虑目标元素的属性是隔离的，而是使用它与已知的容易选择的元素的关系来导航 DOM 树，请参阅在 Cypress 中遍历 DOM 元素的示例

例子：

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

更一般地说，Cypress 更喜欢data-属性，请参阅选择元素

最佳实践：使用 data-* 属性为选择器提供上下文，并将它们与 CSS 或 JS 更改隔离。

测试库首选是基于角色的选择器，请参阅优先级。

根据指导原则，您的测试应尽可能类似于用户与代码（组件、页面等）的交互方式。考虑到这一点，我们建议采用以下优先顺序：

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

如果您要向代码添加可访问性属性，这是有意义的（有人说每个网页都应该以这种方式编码）。