[TOC] ## **4.18 滑動解鎖** 滑動解鎖是目前比較流行的解鎖方式，如圖 4-11 所示。  當我們單擊滑塊時，改變的只是 CSS 樣式，HTML 代碼段如下。 ``` <div class="slide-to-unlock-progress" style="background-color: rgb(255, 233, 127); height: 36px; width: 0px;"> </div> <div class="slide-to-unlock-handle" style="background-color: rgb(255, 255, 255); height: 38px; line-height: 38px; width: 37px; left: 0px;"> </div> ``` slide-to-unlock-handle 表示滑塊。在滑動過程中，滑塊的左邊距會逐漸變大，因為它在向右移動。 slide-to-unlock-progress 表示滑過之后的背景色，背景色的區域會逐漸增加，因為滑塊在向右移動。 ``` from time import sleep from selenium import webdriver from selenium.webdriver import ActionChains from selenium.common.exceptions import UnexpectedAlertPresentException driver = webdriver.Chrome() driver.get("https://www.helloweba.com/demo/2017/unlock/") # 定位滑動塊 slider = driver.find_elements_by_class_name("slide-to-unlock-handle")[0] action = ActionChains(driver) action.click_and_hold(slider).perform() for index in range(200): try: action.move_by_offset(2, 0).perform() except UnexpectedAlertPresentException: break action.reset_actions() sleep(0.1) # 等待停頓時間 # 打印警告框提示 success_text = driver.switch_to.alert.text print(success_text) ``` 在這個腳本中，用到下面幾個方法。 * click_and_hold()： 單擊并按下鼠標左鍵，在鼠標事件中介紹過。 * move_by_offset()：移動鼠標，第一個參數為 x 坐標距離，第二個參數為 y 坐標距離。 * reset_action()：重置 action。 執行完成，滑動效果如圖 4-12 所示。  接下來，再看另外一種應用，上下滑動選擇日期，如圖 4-13 所示。  參考前面的操作，通過 ActionChains 類可以實現上下滑動選擇日期，但是這里要介紹另外一種方法，即通過 TouchActions 類實現上下滑動選擇日期。 ``` from selenium import webdriver from selenium.webdriver import ActionChains driver = webdriver.Chrome() driver.get("https://www.baidu.com") # 定位到要懸停的元素 above = driver.find_element_by_link_text("新聞") # 對定位到的元素執行鼠標懸停操作 ActionChains(driver).move_to_element(above).perform() ``` 這里使用 TouchActions 類中的 scroll_from_element()方法滑動元素，參數如下。 * on_element：滑動的元素。 * xoffset：x 坐標距離。 * yoffset：y 坐標距離。