选择框操作

选择框操作

实验目的：了解网页中选择框的特性，掌握对radio框、checkbox框、select框的不同选择操作，包括单选、多选及对select框的去除选中元素和获取已选中元素的方法。

实验要求：在pycharm 环境下完成实验目的中所述各项任务

实验条件：win7/10、pycharm、selenium4.4.0

实验内容及步骤：

在Html网页文件中，经常被操作的一种元素为选择框，常见的选择框包括： radio框、checkbox框、select框。

各选择框的特征属性不同，选取元素的方式也不一样。

一、 radio单选框——在一组备选项中进行单选

radio单选框的特征是：一组备选项的标签名均为input，具有type属性且值为“radio”，它的一组备选项中被默认选中的元素的checked属性值为“checked”。当点击某一备选项时，此选项被选中，其余选项均不被选中。

另外，:checked 是CSS伪类选择，对 radio（ 和 checkbox ）类型的input标签元素有效，表示被选中（ checked 状态）的元素。

例如：在如下单选框中，默认选中的元素为“小凯老师”。

想要先打印输出当前选中的老师名字，再选择“小雷老师”，操作脚本为：

# 获取当前选中的元素
element = wd.find_element(By.CSS_SELECTOR,
                          '#s_radio input[name="teacher"]:checked')
print('当前选中的是：'+element.get_attribute('value'))

# 点选 小雷老师
wd.find_element(By.CSS_SELECTOR, '#s_radio input[value="小雷老师"]').click()

二、 checkbox多选框——在一组备选项中进行多选

checkbox多选框的特征是：一组备选项的标签名均为input，具有type属性且值为“checkbox”，它的一组备选项中被默认选中的元素的checked属性值为“checked”。

在checkbox多选框中，点击操作表示选中和不选中两种状态之间的切换。所以要选中checkbox的一个选项，必须先获取当前该复选框的状态，如果该选项已经勾选了，点击就会取消选择。实际操作中，先把已经选中的选项全部点击一下，确保都是未选状态，再按照实际要求点击需要选择的选项。

例如：在如下多选框中，默认选中的元素为“小凯老师”。

想要只选择“小雷老师”，操作脚本为：

# 先把 已经选中的选项全部点击一下
elements = wd.find_elements(By.CSS_SELECTOR, 
  '#s_checkbox input[name="teacher"]:checked')

for element in elements:
    element.click()

# 再点击 小雷老师
wd.find_element(By.CSS_SELECTOR, 
  "#s_checkbox input[value='小雷老师']").click()

三、 select框——在一个（下拉）列表中进行选择：

select框的特征是：一组备选项的标签名不再是input，而是option，它的备选项中被默认选中的元素的selected属性值为“selected”。select框的选择可以是单选，也可以是多选，多选时具有multiple属性。

对于Select 选择框， Selenium 专门提供了一个 Select类 进行选择或去除操作。使用时需要先导入Select类：from selenium.webdriver.support.ui import Select

Select类 具有多种选择元素的方法：

根据选项的 value属性值 选择元素：select_by_value

根据选项的 可见文本选择元素：select_by_visible_text

根据选项的 排列次序（从0开始）选择元素：select_by_index

例如：在如下select框中，默认选中的元素为“小凯老师”。

想要选择“小雷老师”，操作脚本为：

# 导入Select类
from selenium.webdriver.support.ui import Select

# 创建Select对象
select = Select(wd.find_element(By.ID, "ss_single"))

# 通过 Select 对象选中小雷老师
select.select_by_visible_text("小雷老师")

Select类 还具有多种去除选中元素的方法：

根据选项的 value属性值 去除元素：deselect_by_value

根据选项的 可见文本去除元素：deselect_by_visible_text

根据选项的 排列次序（从0开始）去除元素：deselect_by_index

去除选中的所有元素：deselect_all

对于select多选框，想要选中某几个选项，要注意去掉原来已经选中的选项，再进行选择才能保证正确性。

例如：想要选择“小雷老师”和“小凯老师”，需要先删除所有已选中的选项，然后再选择指定备选项，操作脚本为：

# 导入Select类
from selenium.webdriver.support.ui import Select
# 创建Select对象
select = Select(wd.find_element(By.ID, 'ss_multi'))
# 清除所有 已经选中的选项
select.deselect_all()
# 选择小雷老师 和 小凯老师
select.select_by_visible_text('小雷老师')
select.select_by_visible_text('小凯老师')

Select类 还提供了多种返回选项元素的方法：

返回select框中选中的第一个选项：first_selected_option

返回select框中选中的所有选项：all_selected_options

返回select框中的所有选项：options

# 创建Select对象
select = Select(wd.find_element(By.ID, 'ss_multi'))

# 获取当前选中的元素并输出
for option in select.all_selected_options:
    print('当前select多选框选中的是：' + option.text)
  

四、 冻结界面

把鼠标放在有些网站的元素上时，会动态弹出一些内容。想要用 selenium 自动化 点击这些动态弹出内容，就需要用 F12 查看这个元素的特征。但是当鼠标从目标项移开，动态弹出内容就整个消失了，没法查看其对应的 HTML。

解决方法：

在开发者工具栏 console 里面执行如下js代码：

setTimeout(function(){debugger}, 5000)

表示在 5000毫秒后，执行 debugger 命令，即：使浏览器会进入debug状态。

debug状态有个特性，此状态下界面被冻住，不管我们怎么点击界面都不会触发事件。

操作方法：先输入上面代码并回车，执行后将鼠标立即放在能够动态弹出内容处。等待 5秒 到了以后，界面就会因为执行了 debugger 命令而被冻住。我们再点击 开发者工具栏的查看箭头，指向要查看的动态内容，就可以查看其属性了。

练习1：登录 https://cdn2.byhy.net/files/selenium/test2.html

在radio框中选择“小江老师”；

在checkbox框中选择“小江老师”和“小雷老师”；

在select框的单选下拉列表中选择“小雷老师” ；

多选列表中选择全部选项；

要求：每完成一项上述操作，输出选中的元素。

提交代码

import time

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select

driver = webdriver.Chrome()
# 练习一
driver.get("https://cdn2.byhy.net/files/selenium/test2.html")
driver.find_element(By.CSS_SELECTOR, '#s_radio input[value="小江老师"]').click()
element = driver.find_element(By.CSS_SELECTOR, '#s_radio input[name="teacher"]:checked')
print('当前选中的是: ' + element.get_attribute('value'))



elements = driver.find_elements(By.CSS_SELECTOR,'#s_checkbox input[name="teacher"]:checked')
for element in elements:
    element.click()
driver.find_element(By.CSS_SELECTOR,"#s_checkbox input[value='小江老师']").click()
driver.find_element(By.CSS_SELECTOR,"#s_checkbox input[value='小雷老师']").click()
elements = driver.find_elements(By.CSS_SELECTOR, '#s_checkbox input[name="teacher"]:checked')
for element in elements:
    print('当前选中的是: ' + element.get_attribute('value'))


select = Select(driver.find_element(By.ID, "ss_single"))
select.select_by_visible_text("小雷老师")
for option in select.all_selected_options:
    print('当前选中的是: '+ option.text)

select = Select(driver.find_element(By.ID, "ss_multi"))
select.deselect_all()
select.select_by_visible_text("小江老师")
select.select_by_visible_text("小雷老师")
select.select_by_visible_text("小凯老师")
for option in select.all_selected_options:
    print('当前选中的是：' + option.text)

练习2：（先将selector.html文件放置在D盘根目录中）根据自己存放文件的路径，在谷歌浏览器中打开’D:\selector.html’网页，完成下列操作：按照自己的性别、爱好进行单选、多选（至少选择两项）按钮选择；对于目标城市选择框，先清除全部选项，再分别使用value属性值、可见文本、排列次序三种方法各选择一个城市，然后使用排列次序去除的方法去掉用value属性值选中的选项；最后打印输出选中的性别、爱好及目标城市中选中的第一个选项。

提交代码

import time
from time import sleep
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select

driver = webdriver.Chrome()
driver.get("D:\桌面\selector.html")
sleep(1)
driver.find_element(By.CSS_SELECTOR, "input[name='name']").send_keys('王敖杰')
driver.find_element(By.CSS_SELECTOR, 'input[name="pw"]').send_keys('20062218')
element = driver.find_element(By.CSS_SELECTOR, '#sexual input[value="男"]')
element.click()
driver.find_element(By.CSS_SELECTOR,"#hobby input[value='Java']").click()
driver.find_element(By.CSS_SELECTOR,"#hobby input[value='PHP']").click()
select1 = Select(driver.find_element(By.ID, 'citys'))
select1.deselect_all()
select1.select_by_value('上海')
select1.select_by_visible_text("广州")
select1.select_by_index(3)
select1.deselect_by_index(1)
print(element.get_attribute('value'))
elements = driver.find_elements(By.CSS_SELECTOR, '#hobby input[type="checkbox"]:checked')


for element in elements:
    print('当前选中的是: ' + element.get_attribute('value'))
print(select1.all_selected_options[0].text)

driver.quit()

练习3：以管理员身份登录 http://127.0.0.1:8047/mgr/sign.html，用户名 ：byhy 密码： 88888888。在系统中添加3种药品，依次为：‘头孢盒装1’,‘YP-20023524’,‘头孢他啶注射液，每支15ml，10支装’； ‘头孢盒装2’,‘YP-20023525’,‘头孢他啶注射液，每支15ml，20支装’； ‘头孢盒装3’,‘YP-20023526’,‘头孢他啶注射液，每支15ml，30支装’。在系统中添加3个客户，依次为：‘南京鼓楼区中医院1’,‘2583426507’,‘江苏省-南京市-鼓楼区-中山北路-253’； ‘南京鼓楼区中医院2’,‘2583426508’,‘江苏省-南京市-鼓楼区-中山北路-254’； ‘南京鼓楼区中医院3’,‘2583426509’,‘江苏省-南京市-鼓楼区-中山北路-255’ 。进入订单管理界面，添加一个订单，具体内容为：订单名称为 南京鼓楼中院头孢；客户选择 南京鼓楼区中医院2；药品选择头孢盒装1和头孢盒装2；每种药品数量填入 100盒。预期结果为：成功登录后，添加订单成功。

提交代码

from selenium import webdriver
from time import sleep
# 导入Select类
from selenium.webdriver.support.ui import Select
from selenium.webdriver.common.by import By

# 创建 WebDriver 实例对象，指明使用chrome浏览器驱动
wd = webdriver.Chrome()
# WebDriver 实例对象的get方法 可以让浏览器打开指定网址
wd.get('http://127.0.0.1:8047/mgr/sign.html')
# 设置最大等待时长为 10秒
wd.implicitly_wait(10)
#最大化窗口
wd.maximize_window()
#登录白月黑羽系统
elementuser = wd.find_element(By.ID, 'username')
elementuser.send_keys('byhy')
elementpass = wd.find_element(By.ID, 'password')
elementpass.send_keys('88888888')
elementbutton=wd.find_element(By.TAG_NAME, 'button')
elementbutton.click()
#在系统中添加3种药品
wd.find_element(By.CSS_SELECTOR, 'a[href="#/medicines"]> span').click()
wd.find_element(By.CSS_SELECTOR, '.col-lg-12 button .glyphicon').click()
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(1) input').send_keys('头孢盒装1')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(2) input').send_keys('YP-20023524')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(3) textarea').send_keys('头孢他啶注射液，每支15ml，10支装')
wd.find_element(By.CSS_SELECTOR, 'button.btn-xs:nth-child(1)').click()
sleep(2)
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(1) input').send_keys('头孢盒装2')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(2) input').send_keys('YP-20023525')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(3) textarea').send_keys('头孢他啶注射液，每支15ml，20支装')
wd.find_element(By.CSS_SELECTOR, 'button.btn-xs:nth-child(1)').click()
sleep(2)
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(1) input').send_keys('头孢盒装3')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(2) input').send_keys('YP-20023526')
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(3) textarea').send_keys('头孢他啶注射液，每支15ml，30支装')
wd.find_element(By.CSS_SELECTOR, 'button.btn-xs:nth-child(1)').click()
#添加3个客户
wd.find_element(By.CSS_SELECTOR, '[href="#/customers"] span').click()
sleep(2)
wd.find_element(By.CSS_SELECTOR, '.col-lg-12>button').click()
infors=wd.find_elements(By.CSS_SELECTOR, 'input.form-control')
infors[0].send_keys('南京鼓楼区中医院1')
infors[1].send_keys('2583426507')
wd.find_element(By.CSS_SELECTOR, 'textarea').send_keys('江苏省-南京市-鼓楼区-中山北路-253')
wd.find_element(By.CSS_SELECTOR, 'button.btn.btn-green.btn-outlined.btn-xs').click()
sleep(2)
infors[0].send_keys('南京鼓楼区中医院2')
infors[1].send_keys('2583426508')
wd.find_element(By.CSS_SELECTOR, 'textarea').send_keys('江苏省-南京市-鼓楼区-中山北路-254')
wd.find_element(By.CSS_SELECTOR, 'button.btn.btn-green.btn-outlined.btn-xs').click()
sleep(2)
infors[0].send_keys('南京鼓楼区中医院3')
infors[1].send_keys('2583426509')
wd.find_element(By.CSS_SELECTOR, 'textarea').send_keys('江苏省-南京市-鼓楼区-中山北路-255')
wd.find_element(By.CSS_SELECTOR, 'button.btn.btn-green.btn-outlined.btn-xs').click()
sleep(2)
#添加订单
wd.find_element(By.CSS_SELECTOR, '[href="#/orders"] span').click()
wd.find_element(By.CSS_SELECTOR, '.col-lg-12 span').click()
wd.find_element(By.CSS_SELECTOR, '.col-lg-8 div:nth-child(1) input').send_keys('订单1')
#创建Select对象
select1 = Select(wd.find_element(By.CSS_SELECTOR, ".col-lg-8 div:nth-child(2) .xxx"))

select1.select_by_visible_text('南京鼓楼区中医院2')

select2 = Select(wd.find_element(By.CSS_SELECTOR, ".col-lg-8 div:nth-child(3) .xxx"))

select2.select_by_visible_text('头孢盒装1')

wd.find_element(By.CSS_SELECTOR, "input[type='number']").send_keys('100')

select3 = Select(wd.find_element(By.CSS_SELECTOR, ".col-lg-8 div:nth-child(3) .xxx"))
select3.select_by_visible_text('头孢盒装2')

wd.find_element(By.CSS_SELECTOR, ".col-lg-8 div div:nth-child(2) input").send_keys('100')

wd.find_element(By.CSS_SELECTOR, 'button.btn-xs:nth-child(1)').click()
wd.quit()