測所翻譯 – Testing on the Toilet: Web Testing Made Easier: Debug IDs

原文網址:https://testing.googleblog.com/2014/08/testing-on-toilet-web-testing-made.html

Tuesday, August 12, 2014
by Ruslan Khamitov

在每個元素中增加 id 可以讓針對網頁的測試更易於操作 DOM
(e.g. WebDriver tests)。考慮到下面兩個只有內文有差異的 DOM:

Save button Edit button

在這個例子中,你會如何使用 WebDriver 來與 “Save” 按鈕互動呢?你有許多的選項。其中一個選擇是使用 CSS selector 來互動

但是,這個方法並不足以認出一個特定的按鈕,而且沒有其他機制可以讓你在 CSS 中以其中的文字過濾。另一個選樣是使用 XPath,這個方法非常的脆弱且不鼓勵使用:

你的最佳選擇是增加一個獨特的階層式分類 ID,每個 widget 會有一個 base ID,而這個 base ID 會成為其子元素的前綴。以剛剛的按鈕為例,他們的 ID 將會是:

在 Google Web Toolkit (GWT) 中,你可以在你的 widgets 覆寫 onEnsureDebugId() 來達成這個目的。這允許你可以自行選擇該如何在子元素的 ID 中使用 base ID :

換另一個例子,我們來幫 Angular 的 ng-repeat 中的重複元素們添加 ID。設定一個 index 可以讓我們清楚的辨別出每一個在 ng-repeat 中的元素:

在 GWT 中你可以使用 ensureDebugId() 來達成。讓我們來為每個 table cells 設定 ID:

小結:Debug IDs 的設定很簡單,而且讓測試的難易度有巨大的改變。請及早加入他們。




如果你覺得這篇文章不錯,歡迎打賞 IOTA:RFHEIVXVIZWJFXTZORZZRCMHZF9PSGFUFWAAKXTFNZE9JQUY9HFQREJYYSPSXDRLECKXCAQQDOMSMYJYDKPCKWXBKD

或是點選下方圖片贊助我一杯咖啡:

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.