PF4 testability for integration UI tests

Hi, we’re facing some issues with writing integration UI tests (tests that use real browsers) for our PF4/React based application. The problem is in the selectors. We currently need to strongly rely on CSS classes and element sequence so most of our selectors now look like this:

*[@id='main_react_container']//header/div[@class='pf-l-toolbar__item pf-m-mobile']/div[contains(@class, 'pf-c-dropdown')]/ul/nav/ul/li

This is quite unusable for us in long term. All it takes to break a test will be just minor change to the UI, like adding a button or a class name change with a PF4 update. Also writing the selectors this way is very time consuming as it requires deep DOM investigation.

We’d like to use the ID attributes to select elements as the most robust way. However, the issue with this is that even though IDs are present on most of the elements, they’re generated and therefore dynamic.

This issue doesn’t seem to affect only a specific component but rather petternfly-react in general.

Are we missing something? Can we somehow force the components to use static IDs?

We’re using Selenium Webdriver and the testsuite is Java.

[dgutride]

Hi @vmuzikar - we directly support using OUIA tags with our components to support automated test suites. You can read more about those in this issue on the forum: https://forum.patternfly.org/t/open-web-ui-design-specification-for-enabling-automation-ouia/154

and this closed issue that resulted in a way to turn OUIA tags on for discoverability when running automated tests - https://github.com/patternfly/patternfly-react/issues/2303. We chose not to include them by default with the components in order not to add bloat to the DOM when reusing components.

Defining selectors the way you have them is problematic since structure can change periodically and using classes instead of definitive id’s is not great (as you mentioned). @quarckster has done quite a bit of the work contributing to these components as well.

All that being said - we also do support using id’s on the components. I’d recommend enabling OUIA and using those attributes to select after you get to a parent component with an id.

[vmuzikar]

@tlabaj Thanks for the confirmation!