Checking for missing debug IDs

General
1

Hello!

I have a web application and want it to be testable with Selenium.

I want every UI control to have a debug ID.

Is there an automated way to find out, which controls don’t have explicitly set debug IDs?

Thanks in advance

Dmitri

2

Hello,

I don’t think there are any ready-made tools for this, but you could pretty easily create a javascript function that traverses the DOM and lists all elements without IDs that have stylenames beginning with “v-”. This gives you a list that ought to be pretty close to what you would like.

As a side-note I’d like to recommend
TestBench
, which is a fork of Selenium extended with explicit support for Vaadin as well as other nice features.

HTH,
/Jonatan

3

Well, there isn’t - but you could create one.

http://vaadin.com/forum/-/message_boards/message/278258 covers some utilities that I’ve used to create and assign DebugID’s automatically; there’s code in there that iterates the complete component tree.

p.s. Are you sure you want absolutely every component to have a debug ID? What about Layouts that the user can’t see, and that might change as you maintain your application ?

HTH a little, or at least points you in the right direction.

Cheers,

Charles.

4

Hello!

Thanks all for the help!

Well, the very purpose of debug IDs is to reduce maintenance efforts in future. Imagine, I create the GUI now, create a lot of Selenium tests for it and then, some day, the GUI changes.

Let’s say that some controls are moved from panel A to panel B.

Suddenly, none of the GUI tests are working.

If every control has a debug ID, I can figure out, which controls the GUI tests are trying to access.

Without debug IDs, I have no chance to do it in reasonable time (I speak from experience of automating GUI tests of a software without unique control IDs).

Best regards

Dmitri

5

Hi,

My point is that (in this context) Panel A and Panel B wouldn’t need debug-ID’s. If your textfield has a debug-id, the tests won’t fail.

In Vaadin, for example, A Panel, contains a Layout which Contains components.If you never need to address the panel and layout in the tests, they don’t need debug-IDs; there would be lots of components that don’t need addressing in this way. Maintaing those IDs can become very awkward and time-consuming if every component has an ID - remember, every debug-ID in a window must be completely unique across the entire window component hierarchy.

That’s the kind of motivation for the library I’ve coded (or sketched out, rather); you can implement different naming strategies - and avoid naming some components or not as you like.

Anyway, it sounds like you know what you’re talking about, whereas I am imagining problems that I can see arising.

Cheers,

Charles

6

Hello!

Thanks for your answer.

So, if my GUI tests only

a) press buttons and
b) enter values into text fields,

and only buttons and text fields have debug IDs, the test cases will still work, even if the layout of the page is completely changed (but the text boxes and buttons are still present and their debug IDs untouched) ?

Let’s look at a concrete example. I have some text field, into which I want to type in some text (“An interesting task”):

selenium.type("//div[@id='1.0']
/div[2]
/div/div/div[1]
/div/div/div/div[1]
/div/div/div[2]
/div/div/div[1]
/div/div/div[2]
/div/div/div[2]
/div/div/div/div[1]
/div/textarea", "An interesting task");

Now, imagine I add a debug ID to the last element of the path (textarea) and that code part looks like

selenium.type("//div[@id='1.0']
/div[2]
/div/div/div[1]
/div/div/div/div[1]
/div/div/div[2]
/div/div/div[1]
/div/div/div[2]
/div/div/div[2]
/div/div/div/div[1]
/div/textarea[@id='2.0']
", "An interesting task");

Let’s assume that this test case runs now. And then I change the layout of the page - the text area is still there, but at a different place, in a different panel.

Is it correct that the test case will still be running successfully (yes/no answer is sufficient :grin: )?

Thanks in advance

Dmitri

7

Hi,

the DebugId attribute maps directly to the HTML ID attribute on the element. ID attributes are unique in the DOM → you can use selectors in your test tool to find the element without worrying about the hierarchy.

So you should be able to use a Selenium selector that just says identifer=2.0.

Vaadin’s Test Bench has extensions to Selenium to make that clearer; I have to admit, I am not very well versed in Selenium, but I am pretty sure there is some selector syntax that says simply “ID=2.0”! I think, with a bit of googling, the syntac is

selenium.type( "id=2.0", "An interesting task");

You should definitely be able to do an xpath of //@id=2.0 as well.

In either case, if that element is then moved to a different hierarchy, but retains the same ID, then no change is needed.

If you can find the right Selenium syntax, yes!

Have a good weekend!

Cheers,

Charles.

8

Thanks!

Dmitri