Как обрабатывать поле фильтра, которое появляется при использовании python селена?

Question

Я иду к web page в chrome, используя selenium python. Перейдя на страницу, я нажимаю на элемент под названием «поиск». Когда я нажимаю на нее, filterbox появляется, как показано ниже

Что мне нужно сделать, чтобы щелкнуть ограничение по date и заполнить значения внутри from и to и отправьте, используя selenium python? К сожалению, я новичок в selenium, я не могу найти примеры, которые удовлетворяют моим требованиям. С этим блоком фильтра не связан URL-адрес.

Вот исходный код серверной части, который я нашел:

<div class="hd" id="alert_search_dialog_h" style="cursor: move;">
                    Search Criteria
                </div>

<form action="/portal/alerts" id="alert_search_form" method="get" onsubmit="new Ajax.Request('/portal/alerts', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">            <input id="search_startTimeXml" name="search[startTimeXml]" type="hidden">
            <input id="search_endTimeXml" name="search[endTimeXml]" type="hidden">
            <input id="search_limit" name="search[limit]" type="hidden" value="50">
            <input id="search_offset" name="search[offset]" type="hidden" value="0">

    <fieldset><legend><input class="restrict_checkboxes" id="include_id" name="include_id" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;id_field&quot;);" type="checkbox" value="1">Restrict by ID</legend>
        <div id="id_field" class="disabled">
            <label for="alert_id">Alarm ID</label>
            <input id="search_alert_id" name="search[alert_id]" type="text" disabled="">
        </div>
    </fieldset>
    <fieldset><legend><input class="restrict_dropdown" id="include_route" name="include_route" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;type_drop_down_list&quot;);" type="checkbox" value="1">Restrict by route</legend>

         <input id="search_route_min_distance" name="search[route_min_distance]" type="hidden">
         <input id="search_route_max_distance" name="search[route_max_distance]" type="hidden">
         <input id="search_route_min_velocity" name="search[route_min_velocity]" type="hidden">
         <input id="search_route_max_velocity" name="search[route_max_velocity]" type="hidden">
        <div id="type_drop_down_list" class="dropdown_list disabled">
            <table>
                <tbody><tr>
                    <th>Route ID</th>
                    <td>

                        <select id="search_route_id" name="search[route_id]" onchange="change_route_directions(this.value)"><option value="">--All--</option>
</select>
                    </td>
                </tr>
                <tr>
                    <th>Route direction</th>
                    <td>


                        <select id="search_route_direction" name="search[route_direction]"><option value="">--All--</option>
</select>
                    </td>
                </tr>
                <tr>
                    <th>Distance(<span>m</span>)</th>
                    <td>
                        min
                        <input id="search_route_min_distance_" name="search[route_min_distance_]" size="8" type="text" disabled="">
                        max
                        <input id="search_route_max_distance_" name="search[route_max_distance_]" size="8" type="text" disabled="">
                    </td>
                </tr>
                <tr>
                    <th>
                        Velocity (m/s):
                    </th>
                    <td>
                        min
                        <input id="search_route_min_velocity_" name="search[route_min_velocity_]" size="8" type="text" disabled="">
                        max
                        <input id="search_route_max_velocity_" name="search[route_max_velocity_]" size="8" type="text" disabled="">
                    </td>
                </tr>

            </tbody></table>
        </div>
    </fieldset>
    <fieldset><legend><input class="restrict_checkboxes" id="include_type" name="include_type" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;type_check_box_list&quot;);" type="checkbox" value="1">Restrict by alarm type</legend>
        <div id="type_check_box_list" class="checkbox_list disabled" style="max-height:100px;-webkit-columns: 100px 2;">

                <input id="search_name_" name="search[name][]" type="checkbox" value="digging_alert" disabled="">
                Digging<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="fibre_break_alert" disabled="">
                Fibre Break<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="helios" disabled="">
                Helios Unit Failure<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="mech_digging_alert" disabled="">
                Mechanized Digging<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="panoptes" disabled="">
                Panoptes Failure<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="unknown_alert" disabled="">
                Unknown<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="vehicle_alert" disabled="">
                Vehicle<br>

                <input id="search_name_" name="search[name][]" type="checkbox" value="walk_alert" disabled="">
                Walking<br>

        </div>
    </fieldset>
    <fieldset><legend><input class="restrict_checkboxes" id="include_threat" name="include_threat" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;threat_check_box_list&quot;);" type="checkbox" value="1">Restrict by threat level</legend>
    <div id="threat_check_box_list" class="checkbox_list disabled" style="-webkit-columns: 100px 2;">

                <input id="search_threat_level_" name="search[threat_level][]" type="checkbox" value="red" disabled="">
                Red<br>

                <input id="search_threat_level_" name="search[threat_level][]" type="checkbox" value="amber" disabled="">
                Amber<br>

                <input id="search_threat_level_" name="search[threat_level][]" type="checkbox" value="green" disabled="">
                Green<br>

                <input id="search_threat_level_" name="search[threat_level][]" type="checkbox" value="clear" disabled="">
                Clear<br>

    </div>
    </fieldset>
    <fieldset><legend><input class="restrict_checkboxes" id="include_status" name="include_status" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;status_check_box_list&quot;);" type="checkbox" value="1">Restrict by alarm status</legend>
        <div id="status_check_box_list" class="checkbox_list disabled" style="-webkit-columns: 100px 3;">

                <input id="search_status_" name="search[status][]" type="checkbox" value="acknowledged" disabled="">
                Acknowledged<br>

                <input id="search_status_" name="search[status][]" type="checkbox" value="new" disabled="">
                New<br>

                <input id="search_status_" name="search[status][]" type="checkbox" value="resolved" disabled="">
                Resolved<br>

        </div>
    </fieldset>
    <fieldset><legend><input class="restrict_checkboxes" id="include_date" name="include_date" onclick="javascript: admin.alerts.SearchDialog.disableByCheckbox(this, &quot;date_table&quot;);" type="checkbox" value="1">Restrict by date</legend>

        <table id="date_table" class="disabled">
            <tbody><tr>
                <td><label for="start_time">From</label></td>
                <td>            <input type="text" name="start_time" id="start_timeId" size="12" value="" disabled="">
                <img alt="Img" id="start_timeImg" onmouseout="this.style.background='';" onmouseover="this.style.background='red';" src="/javascripts/fotech/common_gui/jscalendar/img.gif?1570706592" style="cursor: pointer;" title="Select min date/time">
            <script type="text/javascript">
                _fotechSetupCalendar('start_time',{}); 
            </script>
</td>
                <td><label for="end_time">To</label></td>
                <td>            <input type="text" name="end_time" id="end_timeId" size="12" value="" disabled="">
                <img alt="Img" id="end_timeImg" onmouseout="this.style.background='';" onmouseover="this.style.background='red';" src="/javascripts/fotech/common_gui/jscalendar/img.gif?1570706592" style="cursor: pointer;" title="Select max date/time">
            <script type="text/javascript">
                _fotechSetupCalendar('end_time',{}); 
            </script>
</td>
            </tr>
        </tbody></table>
    </fieldset>

    <table>
        <tbody><tr>
            <th><label for="search_order_by">Order by</label></th>
            <td>
                <select id="search_order_by" name="search[order_by]"><option value="time">Time</option>
<option value="name">Alarm type</option>
<option value="status">Status</option></select>
                <select id="search_order_dir" name="search[order_dir]"><option value="asc">Ascending</option>
<option value="desc">Descending</option></select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input id="search_include_suppressed" name="search[include_suppressed]" type="checkbox" value="1">
                <label for="search_include_suppressed">Include suppressed</label>
            </td>
        </tr>
    </tbody></table>
</form>

Answer 1

Вам нужно сначала поработать с Chrome, чтобы понять структуру сайта и понять, что и как вы хотите щелкнуть, и только потом написать код, который будет работать с селеном.

Chrome DevTools - этонабор инструментов для веб-разработчиков, встроенный непосредственно в Google Chrome

Если вы хотите работать с DOM или CSS, щелкните правой кнопкой мыши элемент на странице и выберите «Проверка», чтобы перейти на панель «Элементы». Или нажмите Command + Option + C (Mac) или Control + Shift + C (Windows, Linux, Chrome OS).

Chrome DevTools