CEF-based 應用程式的自動化測試 – Accessibility 篇

Accessibility 是 CEF-based application 自動化測試的方法之一,下面用 OS X 的 cefclient 來做說明。

Note 在實務上我們通常無法單獨選用一種方法來實作自動化測試,因為 CEF-based application 類似手機上的 hybrid apps,都是用 WebView (在這裡是 CEF) 將網頁內容內嵌在 native UI 中,在一個測試中要交互操作 native UI 跟 web UI 的情況 (切換 context) 並不少見。

Tip cefclient 是 CEF 提供的 test app,可以取得原始碼後自行編譯,或是從這裡下載已經編譯好的版本。它用 CEF 包裝了一個非常陽春的瀏覽器,一打開就可以看到網頁。

直接從 command line 啟動 cefclient,然後用 Accessibility Inspector 觀察網頁的部份,會發現網頁的部份被視為單一個元件,細部的組成無法被識別出來。

$ Release/cefclient.app/Contents/MacOS/cefclient
accessibility/single-element.png
Figure 1. 從 accessibility 的角度來看,網頁只是一個可以捲動的區塊 (AXScrollArea)

細節無法被識別出來是因為 accessibility 沒有啟用的關係 (Chromium 的 accessibility 只有偵測到 assistive technology 時才會啟用),只要在命令列加上 –force-renderer-accessibility 就可以強制啟用 accessibility。

$ Release/cefclient.app/Contents/MacOS/cefclient --force-renderer-accessibility
accessibility/content-identified.png
Figure 2. 強制啟用 accessibility 後便可以識別出個別的元件,例如這裡的文字輸入框 (AXTextField)
Important

不過,雖然啟用 accessibility 後,工具就能識別出網頁細部的組成,但真正能夠用來找尋元件的 attribute 並不多,加上 inspector 視窗下方 “Warning And Errors" 顯示的警告 “Missing value for AXTitle, AXDescription, AXTitleUIElement",實務上要用 accessibility 來找特定的元件並不容易。

對照 HTML 原始碼後,會發現 accessibility 這一層所揭露出來的資訊太少,尤其是 idname 等識別度很高的 HTML attribute 從 accessibility 都看不到。

<input id="searchInput" name="search" type="search" size="20" autofocus="autofocus"
       accesskey="F" dir="auto" results="10" autocomplete="off" list="suggestions">

這也就是為什麼會建議在實作 CEF-based application 的自動化測試時,只將 accessibility 用在 native UI,至於 web UI 還是交由 WebDriver 來處理會比較輕鬆;因為 WebDriver 可以存取網頁完整的資訊,最重要的是可以混用多達 8 種的 locator strategies 來找元件,包括 ID、name、CSS、XPath 等。

Note 理論上,accessibility 的做法可以同時應付 native UI 跟 web UI,但前提是 web UI 的內容不能太複雜;矛盾的是,實務上會採用 hybrid 的做法 (混用 native/web UI),背後的理由通常是為了能表現更豐富的 UI。

當然,這篇文件的重點在於如何(強制)啟用 CEF 對 accessibility 的支援,一旦啟用之後,透過 accessibility 操作 native UI 或 web UI 的方法並沒有不同 (除了 web UI 所提供的資訊較少)。

參考資料

其他文件
  • CEF Application automation : Automation Tools | Ranorex Forum (2015-01-14) – Ranorex 的 support team 回覆目前不支援 CEF,但在 build CEF-based app 時如果加上 force-renderer-accessibility 就可以讓 Ranorex 看到瀏覽器的細部。(另一種方式是透過 chrome://accessibility 啟用 Global Accessibility Mode)

廣告

One thought on “CEF-based 應用程式的自動化測試 – Accessibility 篇

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s