How to get and display QML objectName in application

在做自動化 UAT 時，最常做的事便是拿 HANDLE，這在以前傳統的 GUI Framework 只要用 Spy++ 或其它開發工具都很容易做到。

但現在 QML 不一樣了，QML 裡頭已經沒有所謂的 window handle，比較接近的是 objectName，你可以用 objectName 來對該元件進行操作（get property, call method…)，問題是要怎麼樣拿到 objectName 呢？最直覺的作法就是直接看 QML source code，有錢一點的可能是用 Squish 之類的工具去做。但是直接看 QML source code 其實是比較花時間的，而 Squish 則是價格比較高，因此我實作了一個 JavaScript Library 可以讓你在 UI 上顯示每個 QML component 的 objectName。

例如你的 GUI Application 原本看起來是這樣：

在呼叫了 LabelQML.addObjectNameFlag(this); 之後，它便會在所有有 objectName 的元件上顯示一個小紅點：

當你滑鼠移至小紅點上方時，便會在畫面中央顯示它的 objectName：

完整程式碼及範例：

https://github.com/diro/LabelQMLComponent

其實作法很簡單，基本上就是 recursive 去列舉所有的 component，並檢查是否有 objectName，若有則建立一個 dynamic QML component（小紅點），當滑鼠移至小紅點時，便會在預先建立的 displayBoard 元件中顯示 objectName。