Python自动化测试（05）如何处理日期选择框

野性酷女 2022-12-25 09:57 312阅读 0赞

## 一、问题溯源 ##

在自动化测试时，最重要的是测试思路和用例设计，位居其次的就是框架的设计和使用，再往下，就是基础的定位方法了。很多盆友可能会在刚刚入门的时候卡在定位元素里出不来，经常遇见有些元素定位不到，或者定位了点击不到，或者定位到了一操作就报错的情况。

那么今天我们就来一起看一下【日期下拉选择框】这种组件在自动化测试中要如何处理呢？

## 二、解决方案 ##

三种方法：

### ① 干就完了 ###

最基础的方式就是——直接点击。  
第一步点击下拉框，打开下拉窗口；第二步点击其中的日期。一路click，比较常规的操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70]  
代码样例如下：

import time
    from selenium import webdriver
    
    driver = webdriver.Chrome()
    driver.get("https://www.xxx.com/esp/index.html")
    driver.find_element_by_xpath('/html/body/div/div[2]/form/div[1]/input').click()  # 点击日期选择框
    driver.find_element_by_xpath('/html/body/div[2]/div[2]/table/tbody/tr[5]/td[2]').click()  # 选择日期
    sleep(3)
    driver.quit()

但这种点击操作，对于某些组件可能并不生效，会有点了没反应的情况。

那么这时候我们想到，这个框，它不仅是个下拉框，它也是个输入框！  
如果可以直接往里面输入日期，不就方便得多了吗？还可以自由控制输入哪一天。

但看了一下F12，显然并不可行，里面有一个属性“**readonly**=“**readonly**””，也就是**只读**，具有这种属性的输入框是无法进行input操作的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 1]  
但对于我们测试人员来说，这是事吗？这不是事。方法②，上js：

### ② 使用js ###

直接上代码，使用js去除：

import time
    from selenium import webdriver
    
    driver = webdriver.Chrome()
    driver.get("https://www.xxx.com/esp/index.html")
    js = "$('input:eq(0)').removeAttr('readonly')"  # 使用js临时移除readonly属性
    driver.execute_script(js)  # 执行js
    input_date = driver.find_element_by_xpath('/html/body/div/div[2]/form/div[1]/input')  # 定位日期下拉框（此时的下拉框已经可以输入了）
    input_date.send_keys("2020-12-16")  # 输入完执行点击，使数据存入
    input_date.click()
    sleep(3)
    driver.quit()

重点就在于这两句，使用js临时移除readonly属性：

js = "$('input:eq(0)').removeAttr('readonly')"  # 使用js临时移除readonly属性
    driver.execute_script(js)  # 执行js

以上方式对于市面上多数的输入框都是生效的。  
但如果你系统的前端是用vue写的，那可能就不生效了，会报错如下：

selenium.common.exceptions.JavascriptException: 
    Message: javascript error: $ is not defined

于是我们用到了终极大法：

### ③ js+class定位 ###

还是直接上代码：

import time
    from selenium import webdriver
    
    driver = webdriver.Chrome()
    driver.get("https://www.xxx.com/esp/index.html")
    # 需要注意ClassName后的那个[0]代表dom中的第一个class，如果你要使用第二个，那就写[1]。
    js = 'document.getElementsByClassName("ivu-input ivu-input-default ivu-input-with-suffix")[0].removeAttribute("readOnly")'  # 使用js结合className临时移除readonly属性。
    driver.execute_script(js)  # 执行js
    input_date = driver.find_element_by_xpath("(//input[@type='text'])[2]")  # 定位日期下拉框（此时的下拉框已经可以输入了）
    input_date.send_keys("2020-12-16")
    input_date.click()  # 输入完再次点击日期下拉框，使数据存入
    sleep(3)
    driver.quit()

对于vue这种没有唯一的class、id的代码形式，使用③的方式可以顺利实现日期输入。

以上三种方法，在实际操作中可选择最合适的使用，感谢阅读。

\-Over-

--------------------

软件测试工程师一只，也在不断的学习阶段，平时的小经验不定期分享。
    博主经验有限，若有不足，欢迎交流，共同改进~
    有意可加Q群 908417285 交流学习。
    乾坤未定，你我皆是黑马

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70]: /images/20221120/fa80c94b88e94071abe37d941a20d588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 1]: /images/20221120/3d3200c871b449ae81404857d5f29c1c.png