如何檢查一個元素是否在屏幕上完全可見？

Question

我在OS X上使用Selenium WebDriver和Chrome驅動程序，在Python中實現。

我試圖寫一個測試，驗證是否爲各種HTML元素是完全在屏幕上（例如，我有一個標籤雲，並且因爲我的執行不力，有時一些字滑關閉瀏覽器窗口的邊緣，因此它們是半透明的）。

driver.find_element_by_css_selector("div.someclass").is_displayed()，這是我可以在其他地方找到的唯一解決方案，似乎並不奏效;即使元素部分可見，也會返回True。

是否有一種方法可以檢查整個元素（包括填充等）在標準瀏覽器視口中是否可見？

我在Python中實現，所以Python風格的答案將是最有用的。

Answer 1

您可以獲取元素的位置和大小以及窗口當前的X/Y偏移（位置）和大小，以確定元素是否完全在視圖中。

有了這些信息，就可以得出這樣的結論，爲了使元素到窗口內完全，則必須滿足以下條件：

• 窗口的左界必須小於或等於該元素的左邊界
• 窗口的右邊界必須大於或等於元素的右邊界
• 窗口的上邊界必須小於或等於元素的上邊界。
• 窗口的下界必須大於或等於元素的下界。

首先，獲取元素的位置和大小。 location屬性將爲您提供畫布中元素左上角的座標。 size屬性會給你元素的寬度和高度。

elem = driver.find_element_by_id('square100x100') 
elem_left_bound = elem.location.get('x') 
elem_top_bound = elem.location.get('y') 

elem_width = elem.size.get('width') 
elem_height = elem.size.get('height') 

您可以通過獲取X/Y偏移（位置）和窗口大小來確定當前窗口視圖是否符合此標準。

你可以通過執行一些javascript來獲得偏移量。以下內容適用於所有兼容的瀏覽器。我親自在Chrome，Firefox和Safari中進行測試。我知道IE可能需要一點點按摩。

win_upper_bound = driver.execute_script('return window.pageYOffset') 
win_left_bound = driver.execute_script('return window.pageXOffset') 
win_width = driver.execute_script('return document.documentElement.clientWidth') 
win_height = driver.execute_script('return document.documentElement.clientHeight') 

通過以上，我們確定了元素的大小和位置以及查看窗口的大小和位置。從這些數據中，我們現在可以做一些計算來判斷元素是否在視圖中。

def element_completely_viewable(driver, elem): 
    elem_left_bound = elem.location.get('x') 
    elem_top_bound = elem.location.get('y') 
    elem_width = elem.size.get('width') 
    elem_height = elem.size.get('height') 
    elem_right_bound = elem_left_bound + elem_width 
    elem_lower_bound = elem_top_bound + elem_height 

    win_upper_bound = driver.execute_script('return window.pageYOffset') 
    win_left_bound = driver.execute_script('return window.pageXOffset') 
    win_width = driver.execute_script('return document.documentElement.clientWidth') 
    win_height = driver.execute_script('return document.documentElement.clientHeight') 
    win_right_bound = win_left_bound + win_width 
    win_lower_bound = win_upper_bound + win_height 

    return all((win_left_bound <= elem_left_bound, 
       win_right_bound >= elem_right_bound, 
       win_upper_bound <= elem_top_bound, 
       win_lower_bound >= elem_lower_bound) 
      ) 

這還包括填充和元素邊界，但不包括邊距。如果您想要考慮邊距，您需要獲取相關CSS屬性的值。

此外，你可能想要檢查其他東西，如不透明度，是否顯示，z-index等。