How to generate unique IDs for UI components of Vaadin applications?

Question

Normally a Vaadin application sets a sequential ID for each user interface component of the application. Unfortunately these IDs are not very useful for the purpose of test automation as they are generated dynamically and may change during runtime (per session or when new components are added etc.).

For test automation one need (at least per application) unique and static ID for each component.

A) Can Vaadin's setId() method [1] be utilized to generate test automation friendly component IDs?

B) Can Vaadin's addStyleName() or setStyleName() be useful by generating a custom CSS style which later could be "abused" as an ID?

Some design ideas as discussed in [3]:

• separate id creation from id assignment
• use a naming strategy to create the id
• assign the id at component attach time

---

[1] https://vaadin.com/api/7.7.3/com/vaadin/ui/Component.html#setId-java.lang.String-

[2] https://vaadin.com/api/7.7.3/com/vaadin/ui/Component.html#setStyleName-java.lang.String-

[3] https://vaadin.com/forum#!/thread/278068

Answer 1

A) Can Vaadin's setId() method [1] be utilized to generate test automation friendly component IDs?

Yes, it replaced the deprecated setDebugId() . From its javadoc:

Description copied from interface: com.vaadin.ui.Component

Adds an unique id for component that is used in the client-side for testing purposes. Keeping identifiers unique is the responsibility of the programmer.

We did not use it with any kind of naming strategy automation "framework" as it's discussed in your 3rd link. We manually set component IDs according to an internal agreement. Please be aware that not all components can be assigned IDs, eg menu items .

---

B) Can Vaadin's addStyleName() or setStyleName() be useful by generating a custom CSS style which later could be "abused" as an ID?

You could, but it's more or less the same with A). You can then find elements using findElement(By.className("some-class")) ;

public static By className(@NotNull String className)

Finds elements based on the value of the "class" attribute. If an element has many classes then this will match against each of them. For example if the value is "one two onone", then the following "className"s will match: "one" and "two"

---

Another option would be using xpath, eg findElement(By.xpath("//*[contains(@class, 'column-hiding-toggle')]/span/div[text()='Name']")) .

Although very powerful and flexible (if I'm not mistaking both By.id & By.className are implemented with xpaths underneath the hood), its downside is that it can become high maintenance if the structure of your user interfaces changes frequently.