常见控件应用

1.操作Ajax选项
2.滑动滑块操作

1.操作Ajax选项

Ajax即Asynchronous JavaScript and XML（异步JavaScript和XML），是指一种创建交互式、快速动态网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着Ajax可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新。搜狗搜索的搜索框使用了Ajax。被测地址为https://www.sogou.com/。单击一下搜狗搜索框，切换到搜索框后，会弹出推荐搜索的热词，这个效果就是Ajax效果。

在这里插入图片描述

通过模拟键盘输入下键（↓）进行选项选择

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('https://www.sogou.com/')

ele1 = driver.find_element(By.ID,"query")
ele1.click()
sleep(1)
ele1.send_keys(Keys.ARROW_DOWN)
ele1.send_keys(Keys.ARROW_DOWN)
ele1.send_keys(Keys.ARROW_DOWN)
sleep(5)
driver.quit()

通过模糊匹配选择选项。

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('https://www.sogou.com/')
driver.find_element(By.ID,'query').send_keys('storm')
sleep(1)
sercont = driver.find_element(By.XPATH,'//*[@id="vl"]/div[1]/ul/li[contains(.,"形容词")]').click()
sleep(5)
driver.quit()

上述代码先在搜索框中输入了“storm”，然后从匹配的选项中选择了带有“形容词”字样的选项，再进行搜索操作（搜索“storm+形容词”）。

固定选择某一个位置的选项。
Ajax悬浮框的内容会发生变化（根据一定的推荐算法），而某些时候你可能只是想固定选择悬浮框中的某一个选项，如第二项，这时可以参考下面的代码

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.sogou.com/')
driver.find_element('id','query').send_keys('storm')
sleep(1)
sercont = driver.find_element('xpath','//*[@id="vl"]/div[1]/ul/li[2]').click() # li[2]选择第2项
sleep(5)
driver.quit()

2.滑动滑块操作

在实际项目中，你可能会遇到以下场景：在某些页面中需要从左到右拖动滑块进行验证，然后才能进行下一步操作。
在这里插入图片描述

可以看出，无论是滑块本身，还是滑块所在的框，都是div元素。

操作思路
- 定位到滑块。
- 计算滑块框的宽度。
- 然后将滑块向右拖动框的宽度的距离。

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('https://passport.ctrip.com/user/reg/home')
driver.find_element(By.XPATH,'//*[@id="agr_pop"]/div[3]/a[2]').click()
sleep(2)
# 获取滑块
slider = driver.find_element(By.XPATH,'//*[@id="slideCode"]/div[1]/div[2]')
# 获取整个滑块框
ele = driver.find_element(By.ID,'slideCode')
# 需要使用到Actions的方法来进行拖动
ActionChains(driver)\
    .drag_and_drop_by_offset(slider,ele.size['width'], ele.size ['height'])\
    .perform()
# 这样也行，向右拖动一定的距离，长度是滑块框的宽度
# ActionChains(driver).drag_and_drop_by_offset(slider,ele.size['width'], 0).perform()
sleep(2)
driver.quit()