How to do acceptance test with utility-first CSS framework like Tailwind CSS

[hoppergee]

After using @tailwindcss, I meet an issue with the acceptance test. Usually, when I do the feature test, I will use the CSS class or id to select a target element and do some action or expect on it.

# Example:
find("span.switch-button").click

Currently, the HTML doesn't have any specific class name like the ".my-switch-button" when I start to use tailwindcss.

  <span class="border rounded-full border-grey flex items-center cursor-pointer w-12 bg-green justify-end">
    <span class="rounded-full border w-6 h-6 border-grey shadow-inner bg-white shadow">
    </span>
  </span>

Is it worth to just add a specific class for testing? Or add a data attribute like "data-name='switch-button'". Just want to know how you guys do acceptance test with Tailwinds CSS.

[CvX]

I'm using data attributes, like this:

<span class="…" data-test-switch-button></span>

find('[data-test-switch-button]').click();

(and since I'm also using https://github.com/simplabs/ember-test-selectors it removes those from the production build)

I like this solution because it clearly separates test information and classes that are used in CSS.

[hacknug]

Same as @CvX here. I try to only use class for things that apply styles and then use data-attributes or ID's to identify elements or components. When those components have multiple parts (children I have to do something with) I give their data-attributes a value to describe what that part is.

[hoppergee]

@CvX @hacknug Thanks~ I will start to use the data-attributes.