結束了 TS 測試，來到了 UI 測試，今日課程如下：

• Grabbing Components From The UI

常見 DOM 元素取得方式

在進行 UI 測試前我們先來認識這些方法、使用情境和差異。

(1) query, querySelector: 會返回查詢符合條件的「第一個」element，兩者差異的地方是，第一個返回的是 debug element, 第二個是返回 selector functions

(2) queryAll, querySelectorAll，會回傳「所有」符合條件的 element

(3) query 和 querySelector 差異是，前者返回的是「debugElement」，同時可以取得 typescript class，對子元件做操作；後者返回的是「HTML元素」

(4) 當我們從 HTML 取得 debugElement，就可以拿到 native element (原生元素)的屬性和 typescript class

(5) query 和 querySelector 還有差異的地方是，前者回傳元素的 reference，所以查詢取得的元素會與 UI 中所有任何有 change 的地方保持更新；後者是回傳 query selector 函式的 copy，那麼當 UI 元素有變更時，不會同步更新，因為回傳的是 query 元素當下的 copy

如何使用 query, querySelector

query 元素的方法，常用的就是id, class, html tag

• query 和 querySelector 用 ID 查詢

query(By.css('#title'))
querySelector('#title')

• query 和 querySelector 用 Class 查詢

query(By.css('.title')) and queryAll(By.css('.title'))
querySelector('#title') and querySelectorAll('.title')

• query 和 querySelector 用 Selector 查詢

query(By.css('div')) and queryAll(By.css('div'))
querySelector('div') and querySelectorAll('div')

今日心得

前端工程師對於元素的取得一定不陌生，但今天 Neil 提到 query, querySelector 差異的地方是前者拿到的是「reference」，所以即使 UI 元件有更新，也能拿到最新的狀態；後者拿到的是元素的「copy」，所以遇到需要即時知道狀態的可以用 query，反之用 querySelector 就好。

之前操作元素沒有觀察到這深入，今天也是收穫滿滿。