End-to-end testing

[claudiamatosa]

Hey,

First of all, thank you for the great library! I am considering moving from aphrodite to glamour, but there is a requisite for end-to-end testing (in this case, Selenium). The tests need identifiers to be able to get elements from the DOM (class, id, etc). How have people been handling this? Does glamour provide a way to add an identifing className or attribute without having to write it manually? For example, to make the output be navigation css-23r9ue (and allow navigation to be stripped in production).

I was thinking of creating a helper wrapper around css(), but am wondering if there is a more straightforward way of doing this:

// styles.js
const stylesheet = {
  navigation: { /* ...rules */},
  links: { /* ...rules */},
};

// component
<nav className={getClassNames(stylesheet, 'navigation')}>

// utility
function getClassNames(stylesheet, property) {
  return `${property} ${css(stylesheet[property])}`;
}

// output
<nav class="navigation css-9uie3">

[ChristopherBiscardi]

You may be able to use labels for this:

<li {...css({ label: 'things', backgroundColor: 'red' })}>
          This is red.
</li>

note the value of the data attribute:

<li data-css-1i0516a="things">This is red.</li>

[donaldpipowitch]

The tests need identifiers to be able to get elements from the DOM (class, id, etc).

Even before Glamor we used dedicated class names just for E2E tests to handle this. This worked really well in our experience as we don't break our E2E tests just because we changed some class name (or because we switched from CSS to Glamor 😄). Basically every class which is used by an E2E test is prefixed with .e2e-. This makes writing Selenium tests a lot easier.
It can also be useful to create data-e2e-* attributes just for Selenium. You can sometimes place useful values there.

So basically we do this:

const fooStyle = css({ ... });

<Foo
  {...fooStyle}
  className="e2e-foo"
/>

[claudiamatosa]

Thank you @ChristopherBiscardi and @donaldpipowitch. We ended up going for dedicated class names for e2e tests, as it will indeed bring a better separation of concerns.