Finding Components in webdriver tests

(Macrozone) #1

I am using webdriver to do acceptance-testing.

Sometimes you want to find certain elements on the page. Usually you do this by xpath, classes, names, etc. But since I often use inline-styling, it’s not easy to use classes to find a certain element.

So my question is, if there is a way to find a element on the page by it’s react-component (DisplayName or so). :eyeglasses:

(Sophie Alpert) #2

I’d suggest adding data-testid or similar to your components – searching by display name would be pretty fragile in the case that you rename any variables in your source files.

(Macrozone) #3

Hi spicyj,

thank you for your answer.

Problem with this approach is that you bloat your code with something you only need for tests and you have to invent a new “name” for this (or you reuse the displayName, but then they might diverge)

(Joe) #4

We use the data-testid approach and it’s awesome.

Yes, you add some test-only attributes to your markup, but they’re worth their weight in gold.

  • “Bloat” is a bit of an exaggeration, IMO
  • UI tests become more resilient than when relying on CSS classes

We use test markers for as many of our UI test selectors as we can, decoupling the styling from the test hooks.