CODEWITHSUNDEEP
javascriptcss-selectorsqbo3
Eric Patrick
Eric Patrick

Reputation: 2247

qbo3 UI: HTML id attribute

I'm writing UI test scripts for a qbo3 user interface. I've noted that many HTML div tags do not contain an id attribute. Can id attributes be added to all div tags to simplify testing?

Upvotes: 0

Views: 50

Answers (1)

Eric Patrick
Eric Patrick

Reputation: 2247

The qbo3 UI standards recommend against relying on id tags. Frequently, the same UI widget may be used multiple times within a single HTML page. Once upon a time we replied upon id tags, but we found depending on them led to fragility in our JavaScript libraries.

For example, consider the Loan/Search panel below:

enter image description here

In the screen shot above, a basic Loan/Search UI allows a pop-out of any Loan record. In this example, the Loan/Summary UI widget is being rendered twice (for loans 847579790 and 848447735). If there was a common id attribute associated with the Loan/Summary widget, it would not be useful, because there can be more than one.

Instead, tests should be designed using the querySelector functions:

Function Comment
document.querySelector("div.tab-pane") Gets the first match.
document.querySelectorAll("div.tab-pane")[1] Gets the second match.

For complicated landing pages, where there may be multiple search and pop-out tabs, you can nest selectors:

// Find the second dashboard tab, and it's first child pane
document.querySelectorAll("div.dashboard")[1].querySelector("div.tab-pane")

Upvotes: 0

Related Questions