python—web自动化（3）—验证码，嵌套页面（商城-后台添加商品，小案例）

案例需求

登录后台
管理中心-点击商品管理
点击‘添加商品’
输入商品名称
选择商品分类
选择商品品牌
点击提交按钮

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

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

- - 如何判断系统是否存在万能验证码：
    1. 需要知道项目源代码位置
    2. 为了看懂源代码，需要了解MVC设计模式：
    - - M代表：模型层--主要用于和数据库打交道
        
        V代表：视图层--主要用于收集和显示用户数据
        
        C代表：控制器（Controller）--主要用于处理业务逻辑（验证码判断就在该层）
    1. Controller层负责系统所有业务逻辑，要找到后台登录的代码，需要分析网址：
    - - 网址五部分：
        
        http--协议
        
        域名或ip地址
        
        路径
        
        参数
        
        端口号
        
        案例中主要分析-参数“&m=admin&c=public&a=login”：
        
        m--模块的意思，一个模块就是一个文件夹
        
        c--controlle的意思，一个控制器就是一个文件
        
        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属性前面加一个小数点（https://www.cnblogs.com/testKK/p/17052099.html，结算页面使用过）
    - 在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()

posted @ 2023-01-15 12:21 沐沂阅读(193) 评论(0) 收藏举报

刷新页面返回顶部

testKK

python—web自动化（3）—验证码，嵌套页面（商城-后台添加商品，小案例）

公告