title: using styled-components or custom component with cypress
body: <p>Cypress selector is easy, just do <code>cy.get('.myComp')</code> and <code>&lt;input className="myComp" /&gt;</code> will be selected but with styled-component</p>
  
  <p>maybe we need to use custom attribute like cy-data, cy-testid etc. I guess there's no other shortcut than flood our component with those custom attribute right?</p>
  
  <p>The other hassle using cypress is when you use css module, where the class is generated differently every build, and imagine your component is , then you need to pass your the custom attribute all the way down </p>
  
  <pre><code>&lt;Custom cy-data="btn1" /&gt;
  
  const Custom = ({cy-data}) =&gt; &lt;button cy-data={cy-data} /&gt;
  </code></pre>
  
  <p>any workaround to avoid this pain?</p>