Try   HackMD

驗證網頁元素可見性

verifyVisibility指令可被使用來驗證一個目標元素是否可見,而可見狀態值亦可使用storeIsVisible指令來取得。本文將介紹在Rapi中,元素被判定為可見或不可見的情況準則。

可見元素

情況1:目標元素位於最上層

這是最明顯的案例,如下圖所示,Target Element位於所有元素上方,其上方沒有其他元素。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

情況2:所有覆蓋元素皆為完全透明

Target Element不在最上層,但其上所有的覆蓋元素皆為隱藏或全透明狀態。下圖範例顯示,Target Element雖然其上有Another Element,但由於Another Element為全透明狀態,因此Target Element被判定為可見元素。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

假設Target Element的一部分超出網頁視窗,但位於視窗內的部分滿足情況1與情況2,則仍被判定為可見。

不可見元素

情況3:目標元素為隱藏狀態或不存在

當目標元素的CSS Style設定為display:nonevisibility:hidden,則視為隱藏狀態。

情況4:目標元素為全透明

目標元素的CSS Style中opacity為0或顏色為transparent

情況5:目標元素完全位於網頁視窗外

目標元素沒有任何一部分位於網頁視窗內。

情況6:目標元素整個或部分被非全透明元素覆蓋

如下圖所示,Target Element的一部分被Another Element所覆蓋,並且Another Element為非透明的元素,因此Target Element被判定為不可見。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →