Selenium2 Learning (17)--JS Processing Calendar control (modify readonly properties)

Objective

Calendar control is a Web site often encounter a scene, some input boxes can be directly entered the date, some cannot, with our frequent ticket to the 12306 site as an example, detailed how to solve the Calendar control for the ReadOnly property problem.

Basic idea: First use JS to remove the ReadOnly attribute, and then directly enter the date text content

One, Calendar control

1. Open the 12306 ticket query interface, cannot enter the time directly in the Departure date input box

2. The general idea is to open the Calendar control pop-up box, from the Calendar control point date, so the operation is more irritable, and we test the focus is not on the calendar control, just want to enter a time, do the next action

3. Use Firebug to view the properties of the input box: readonly= "readonly", as follows:

<InputId= "Train_date "Class= "inp-txt " type="text " value="" name="leftticketdto.train_date " Autocomplete= "off" maxlength= "ten" readonly= "readonly">

Second, remove the ReadOnly attribute

1. It is obvious that the attribute of this element is readonly, the input box cannot be entered directly, it is necessary to remove the element's ReadOnly attribute, then you can enter it.

2. Click the "Edit button" in the lower left corner of the Firebug to find the corresponding element and delete it directly. readonly= "readonly" and then enter.

3. In the page departure date location input: Wang Try, hey, there is no discovery can enter success. Of course, this is just to verify that you can enter the content, and the test date when you enter the test.

Third, use JS to remove the ReadOnly attribute

1. Use JS to remove the basic idea of element attributes: first locate the element and then delete the attribute with the RemoveAttribute ("ReadOnly") method.

2. Departure Yen Vegetarian ID: train_date, corresponding JS code: ' document.getElementById ("Train_date"). RemoveAttribute ("readonly"); '

Iv. Input Date

1. Before entering the date, be sure to clear the text first, or you will not be able to enter a successful.

2. Enter the date here, will automatically pop up the Calendar control, casually click on the other location is good, next will use the JS method in the date, will not play!

Five, JS method input Date

1. You can also use the JS method to enter the date, in fact, it is very simple, directly change the value of the input box element can be

Six, the reference code is as follows:

# Coding:utf-8
From selenium import Webdriver
Driver = Webdriver. Firefox ()
Driver.get ("Https://kyfw.12306.cn/otn/index/init")
# Remove the ReadOnly attribute of the element
JS = ' document.getElementById ("Train_date"). RemoveAttribute ("readonly"); '
Driver.execute_script (JS)

# Enter the date with the JS method
Js_value = ' document.getElementById ("Train_date"). Value= "2018-02-25"
Driver.execute_script (Js_value)

# # Enter values after emptying text
# driver.find_element_by_id ("Train_date"). Clear ()
# driver.find_element_by_id ("Train_date"). Send_keys ("2018-02-25")

The small friends have learned, can also rob the ticket as soon as possible!

Selenium2 Learning (17)--JS Processing Calendar control (modify readonly properties)