JavaScript操作日期控件

一、日期控件只读

例如12306网站的日期控件，属性为只读模式，此时是不能直接通过手动去编辑日期。若要实现能编辑，需要去掉只读模式。一般操作的顺序是先定位到该元素，然后用JS在浏览器console中执行脚本，去掉只读属性，再尝试手动编辑。

通过观察发现，元素定位有ID属性，此时可以采用元素的JS方法去掉readonly属性，如下：

js_of_remove = "document.getElementById('train_date').removeAttribute('readonly')" # 去掉readonly属

若此处没有ID属性，可以采用jQuery定位方法定位元素，并去掉readonly属性，如下：

$('input[id=train_date]').attr('readonly',false) # id去掉readonly属
或者
$('input[class=input]').attr('readonly',false) # class去掉readonly属

去掉readonly属性过后，可以手动编辑日期控件。

示例代码：

from time import sleep
from selenium import webdriver

class TestTrain:

    def setup(self):
        self.url = "https://www.12306.cn/index/"
        self.driver = webdriver.Chrome()
        self.driver.set_window_size(800, 1000)
        self.driver.get(self.url)
        self.driver.implicitly_wait(5)

    def teardown(self):
        sleep(3)
        self.driver.quit()

    def test_locator_by_js_05(self):
        js_of_remove = "document.getElementById('train_date').removeAttribute('readonly')"  # 去掉readonly属
        self.driver.execute_script(js_of_remove)
        sleep(2)
        self.driver.find_element_by_xpath('//*[@id="train_date"]').clear()
        self.driver.find_element_by_xpath('//*[@id="train_date"]').send_keys("2020-11-11")
        sleep(2)
        self.driver.find_element_by_xpath('//*[@id="train_date"]').clear()

二、日期控件添加属性

若日期属性没有特别的ID属性时，可以手动添加一个ID属性，再根据ID属性定位元素，取消只读属性，并进行后续的操作。

示例代码：

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

class TestTrain:

    def setup(self):
        self.url = "https://www.12306.cn/index/"
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.get(self.url)
        self.driver.implicitly_wait(5)

    def teardown(self):
        sleep(3)
        self.driver.quit()

    def add_attribute(self, selector, attribute_name, value):
        """
        封装向页面标签添加新属性的方法调用JS给页面标签添加新属性，
        arguments[0]~arguments[2]分别会用后面的element，attributeName和value参数进行替换
        添加新属性的JS代码语法为：element.attributeName=value
        比如input.name='test'
        """
        element = self.driver.find_element(*selector)
        self.driver.execute_script("arguments[0].%s=arguments[1]" % attribute_name, element, value)

    def test_locator_by_js_02(self):
        locator = (By.XPATH, "//*[@id='train_date']") #xpath定位
        self.add_attribute(locator,"id","123456") #修改id属性
        js_of_remove = "document.getElementById('123456').removeAttribute('readonly')"  # 根据修改的id属性去掉readonly属性js
        self.driver.execute_script(js_of_remove)
        sleep(2)
        self.driver.find_element_by_xpath('//*[@id="123456"]').clear()
        self.driver.find_element_by_xpath('//*[@id="123456"]').send_keys("2020-11-11")
        sleep(200)

结果，可以看到ID属性已经被修改成了123456，readonly属性也已经被移除