• 案例需求

  1. 登录后台
  2. 管理中心-点击商品管理
  3. 点击‘添加商品’
  4. 输入商品名称
  5. 选择商品分类
  6. 选择商品品牌
  7. 点击提交按钮

 

  • 技术点：
  1. 验证码处理思路
  2. 嵌套网页怎么定位元素
  3. 元素高级操作-双击
  4. css selector的使用

 

 

  • 验证码处理：
  • 方法思路：
  1. 通过第三方图片识别文字的工具---准确率低，有学习成本（对自己公司的项目做自动化，精力不该放这上面）
  2. 通过第三方网站识别---准确率高，但是人工识别要收费
  3. 设置万能验证码（推荐）
  4. 测试环境中屏蔽验证码（推荐）
  5. 绑定ip地址
  6. 读取cookie和缓存---需要手动登录，勾选自动登录
  7. 在脚本输入验证码前，加一个等待时间，手动输入验证码

 

  • 如何判断系统是否存在万能验证码：
  1. 需要知道项目源代码位置
  2. 为了看懂源代码，需要了解MVC设计模式：
  1. M代表：模型层--主要用于和数据库打交道
  2. V代表：视图层--主要用于收集和显示用户数据
  3. C代表：控制器（Controller）--主要用于处理业务逻辑（验证码判断就在该层）
  1. Controller层负责系统所有业务逻辑，要找到后台登录的代码，需要分析网址：
  • 网址五部分：
  1. http--协议
  2. 域名或ip地址
  3. 路径
  4. 参数
  5. 端口号
  • 案例中主要分析-参数“&m=admin&c=public&a=login”：
  1. m--模块的意思，一个模块就是一个文件夹
  2. c--controlle的意思，一个控制器就是一个文件
  3. a--action的意思，一个action就是代码中的一个
  • 截图：

 

  • 嵌套网页的元素定位操作：
  • 鼠标放在网页根节点的body上，如果网页部分高亮，说明存在子页面
  • 网页元素：
  • 代码： 
# 存在页面嵌套，需要切换到子页面，通过iframe标签中的name或id定位
adm_wdr.switch_to.frame('mainFrame')

# 输入商品名称
adm_wdr.find_element_by_css_selector('[nullmsg="请输入商品名称！"]').send_keys('春季爆款--小白鞋，踩屎感满满的...')
  • 选择分类：
  • 截图
  • 代码：
# 选择商品分类
adm_wdr.find_element_by_id('3').click()
adm_wdr.find_element_by_id('4').click()
adm_wdr.find_element_by_id('7').click()

 

  • 元素高级操作：双击
  • 截图
  • 代码： 
# 元素高级操作
'''
ActionChains中封装了所以可以对页面元素进行的高级操作

用法：ActionChains(webdriver)
    :Action -- 动作行为
    :Chains -- 链表
    :webdriver -- 代表了当前浏览器
    ：合起来就是，把当前浏览器转换成可以执行各种操作行为的链

'''
# 把当前浏览器转换成行为链，对adm_wdr.find_element_by_id('8')进行双击操作
# 用perform进行结尾标识

ActionChains(adm_wdr).double_click(adm_wdr.find_element_by_id('8')).perform()
  • 如何上传商品图片：
  • 网页元素：
  • 分析元素：发现label标签里无法定位，找父节点id是动态变化的，需要在往上找父节点
  • 代码： 
# 进入商品图册
adm_wdr.find_element_by_link_text('商品图册').click()
# 点击选择图片按钮
# 先找祖先元素filePicker，再找子孙label标签
adm_wdr.find_element_by_css_selector('#filePicker label').click()
  • css selector 的使用
  • copy的方式获取：右键检查元素，选择copy，在选择copy selector
  • 手写的方法：
  • 标签名可以直接在css selector中使用
  • 在css中，需要在class属性前面加一个小数点（结算页面使用过）
  • 在css中，需要在id属性前面加#号
  • 大于号>，表示前面是父元素
  • 空格，表示祖先元素和子孙元素

  • 上面通过css selector打开系统弹窗，selenium无法操作
  • 截图

 

  • 继续分析网页元素：
  • 截图
  • 页面上蓝色按钮不是真正的文件上传按钮，而是input的标签，删除它里面的class="webuploader-element-invisible"后，蓝色按钮上展示了真正的文件上传控件
  • 代码： 
# 进入商品图册
adm_wdr.find_element_by_link_text('商品图册').click()
# 上传图片路径
adm_wdr.find_element_by_name('file').send_keys(r'C:\Users\testKK\Desktop\图片\小白鞋.jpg')

# 点击 开始上传按钮
adm_wdr.find_element_by_css_selector('.uploadBtn.state-finish.state-ready').click()
  • 上传效果截图
  • 处理alert弹框
  • 代码： 
# 处理alert弹框
# 添加显示等待
WebDriverWait(adm_wdr,30,0.5).until(expected_conditions.alert_is_present())
# 切换到alert弹框点击确定
adm_wdr.switch_to.alert.accept()

# 点击提交按钮#filePicker
adm_wdr.find_element_by_class_name('button_search').click()