Selenium+Python (Js handles calendar controls)
The calendar control is a scene that is often encountered on web sites. Some input boxes can directly enter the date, and some cannot. Taking the 12306 website where we often grab tickets as an example, we will explain in detail how to solve the problem that the calendar control is a readonly attribute.
Basic idea: first use js to remove the readonly attribute, and then directly enter the date text content
1. Calendar control
1. Open the ticket query interface of 12306, you cannot directly input the time in the departure date input box
2. The conventional idea is to open the calendar control pop-up box and click the date from the calendar control. This operation is more irritating, and the focus of our test is not on the calendar control, just want to enter a time and do the next operation.
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=”10”readonly=”readonly”>
Second, remove the readonly attribute
1. It is obvious that the attribute of this element is readonly, and the input box cannot be directly entered. At this time, you need to remove the readonly attribute of the element first, and then you can enter it.
2. Click the "edit button" of firebug in the lower left corner, find the corresponding element, delete readonly=" readonly" directly, and then press Enter.
3. Enter: yoyoketang in the position of the departure date on the page, try it, hey, have you found that you can enter it successfully. Of course, this is just to verify that the content can be entered, and the date of the test is still entered during the test.
Third, use js to remove the readonly attribute
1. The basic idea of using js to remove element attributes: first locate the element, and then use the removeAttribute("readonly") method to delete the attribute.
2. The element id of the departure day is: train_date, and the corresponding js code is: 'document.getElementById("train_date").removeAttribute("readonly");'
Fourth, enter the date
1. Before entering the date, be sure to clear the text first, otherwise the input will not be successful.
2. After entering the date here, the calendar control will pop up automatically, just click on any other location, and then use the js method to pass in the date, so it won't play!
Five, js method input date
1. You can also use the js method to enter the date here. In fact, it is very simple. You can directly change the value of the input box element.
Reference source:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
# coding:utf-8
from
selenium
import
webdriver
import
time
driver
=
webdriver.Firefox()
driver.get(
"https://kyfw.12306.cn/otn/index/init"
)
# 处理开始时间
# js去掉readonly属性
js
=
'document.getElementById("train_date").removeAttribute("readonly");'
driver.execute_script(js)
# js添加时间
js_value
=
'document.getElementById("train_date").value="2017-12-10"'
driver.execute_script(js_value)
# 处理返程时间
js2
=
'document.getElementById("back_train_date").removeAttribute("readonly");'
driver.execute_script(js2)
js2_value
=
'document.getElementById("back_train_date").value="2017-12-25"'
driver.execute_script(js2_value)
time.sleep(
5
)
driver.close()
|
The execution result is as follows:
