How to set HTML element id on tree item?

I would like to implement testing of Tree component based on this article:

This article is clear how to set element ID for simple component like Button:

Button button = new Button("Push Me!"); button.setId("main.button");
Anyway I’m not able to find out how I can set element id for tree items.

Tree generates automatically following IDs for tree items:

My Item

And I would like to change it to id which is present in my BeanItem e.g.:

My Item

Is there any way how to customize how tree generates those HTML element ids?

Tree items id’s are generated with DOM.createUniqueId() in the client side… There is no easy way to customize the id generation. I think, you have left them as is and use some other way (than access them from the TB test for example try something like below

WebElement tree = $(WindowElement.class).$(TreeElement.class).first();
Iterator<WebElement> iterator = tree.findElements(By.className("v-tree-node-caption")).iterator();

Thank you Johannes for reply.

Actually I have used some workaround for this. I’m appending my custom id as an “css style” using my custom ItemStyleGenerator.
Here a simplified example:

Tree myTree = new Tree("My tree");

myTree.setItemStyleGenerator(new ItemStyleGenerator() {
    public String getStyle(Object itemId) {
        if (itemId instanceof BeanItem<?>) {
            BeanItem<?> bi = ((BeanItem<?>) itemId);
            if (bi.getBean() instanceof MyItem) {
                return "itemid_" + ((MyItem)bi.getBean()).getId();
        return null;

Then I’m able to identify the item on page via CSS style “itemid_xyz”.

It would be a nice feature to have a possibility to attach “ItemIdGenerator” in the same way :slight_smile:

That’s nice way to set “ids” to tree items!