030、javascrip 操作元素 01、聚集元素到螢幕頂部(縱向滾動)

阿新 • • 發佈：2021-08-20

參考資料：https://blog.csdn.net/for_further/article/details/105790821

　　　　 https://www.cnblogs.com/yoyoketang/p/6188582.html

一、javascrip 操作元素：

　　聚集元素到螢幕頂部(縱向頂部)

 element.scrollIntoView() 引數預設為true
# 引數為true：呼叫該函式，頁面傳送滾動，使element的頂部與檢視(容器)頂部對齊
# 引數為false：使element的底部與檢視(容器)底部對齊

場景：當元素不在當前螢幕，點選此元素會報錯 Element is not clickable at point

當點選看不到的元素時，元素單擊被攔截 element click intercepted: Element is not clickable at point (115, 1137)

# -*- coding:utf-8 -*-
# Author:  Sky
# Email:   [email protected]
# Time:    2021/8/20 17:04
# Project: day01
# Module:  ch_03.py
# Environment: Python3.8.6 , Selenium3 環境 ( 3.141.0 版本)
# Environment: Chrome ( 92.0.4515.131, 正式版本) + chromedriver(92.0.4515.107版本) 


from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://49.235.92.12:8200")
driver.maximize_window()
time.sleep(3)


# driver.find_element_by_link_text("檢視更多機構 >").click()
# 元素看不到時，點選報錯，Message: element click intercepted: Element is not clickable at point (266, 1915) 



time.sleep(3)
driver.quit()

報錯如下：

方法一：執行 Javascipt 指令碼讓元素出現在螢幕上方

　　　　document.getElementsByClassName("more")[1].scrollIntoView();

a、先找到元素 class="more"

b、在console裡面執行程式碼，預演：

document.getElementsByClassName("more")[1].scrollIntoView();

示例程式碼如下：

# -*- coding:utf-8 -*-
# Author:  Sky
# Email:   [email protected]
# Time:    2021/8/20 17:04
# Project: day01
# Module:  ch_03.py
# Environment: Python3.8.6 , Selenium3 環境 ( 3.141.0 版本)
# Environment: Chrome ( 92.0.4515.131, 正式版本) + chromedriver(92.0.4515.107版本)

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://49.235.92.12:8200")
driver.maximize_window()
time.sleep(3)

# driver.find_element_by_link_text("檢視更多機構 >").click()
# 元素看不到時，點選報錯，Message: element click intercepted: Element is not clickable at point (266, 1915)


# 方法1
# 執行 Javascipt 指令碼讓元素出現在螢幕上方
time.sleep(2)
js_1 = 'document.getElementsByClassName("more")[1].scrollIntoView();'
driver.execute_script(js_1)

time.sleep(2)
driver.find_element_by_link_text("檢視更多機構 >").click()

# # 方法2
# time.sleep(2)
# target = driver.find_element_by_link_text("檢視更多機構 >")
# driver.execute_script("arguments[0].scrollIntoView();", target)
# time.sleep(2)
# driver.find_element_by_link_text("檢視更多機構 >").click()


time.sleep(3)
driver.quit()

方法二、可以先定位目標元素，對目標元素執行 Javascript 方法

# -*- coding:utf-8 -*-
# Author:  Sky
# Email:   [email protected]
# Time:    2021/8/20 17:04
# Project: day01
# Module:  ch_03.py
# Environment: Python3.8.6 , Selenium3 環境 ( 3.141.0 版本)
# Environment: Chrome ( 92.0.4515.131, 正式版本) + chromedriver(92.0.4515.107版本)

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://49.235.92.12:8200")
driver.maximize_window()
time.sleep(3)

# driver.find_element_by_link_text("檢視更多機構 >").click()
# 元素看不到時，點選報錯，Message: element click intercepted: Element is not clickable at point (266, 1915)


# # 方法1
# # 執行 Javascipt 指令碼讓元素出現在螢幕上方
# time.sleep(2)
# js_1 = 'document.getElementsByClassName("more")[1].scrollIntoView();'
# driver.execute_script(js_1)
#
# time.sleep(2)
# driver.find_element_by_link_text("檢視更多機構 >").click()


# 方法2、可以先定位目標元素，對目標元素執行 Javascript 方法
# 未顯示的元素也都可以先獲取，比如下面這個：
time.sleep(2)
# 1、先獲取元素
target = driver.find_element_by_link_text("檢視更多機構 >")
# 2、執行 JavaScript 指令碼，arguments[0] 用0 ，如果寫成 1 會報錯
driver.execute_script("arguments[0].scrollIntoView();", target)

time.sleep(2)
driver.find_element_by_link_text("檢視更多機構 >").click()


time.sleep(3)
driver.quit()