reactjs - React 样式组件/e2e 测试 : What is the best way to use css selector?

Question

我使用styled-components在 React 应用程序中，我遇到了 e2e 测试问题。

由于 styled-components 生成散列类，因此很难使用 nightwatch CSS 选择器。

是否可以向生成的类添加前缀，以便我可以使用 .attributeContains() 断言？

或者有更好的解决方案吗？

Answer 1

Styled-Components 的类带有“sc-”前缀，您可以使用 .attrs() 将自己的类名添加到 styled-components 中。或者使用 className 将自定义类名添加到它的任何实例中.

const Component = styled.div.attrs({
  className: 'PrefixedComponentClass',
})`
  color: pink;
`;

或

<Component className={'PrefixedComponentInstanceClass'} />