React样式组件/ e2e测试：使用css选择器的最佳方法是什么？

Question

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

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

是否可以在生成的类中添加前缀，以便我可以使用.attributeContains（）断言？

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

Answer 1

Styled-components有前缀类＆＃34; sc - ＆＃34;并且您可以使用.attrs()将自己的classNames添加到样式化组件，或者使用className将自定义className添加到其任何实例。

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

或

<Component className={'PrefixedComponentInstanceClass'} />