Дата ввода с использованием Selenium IDE

Question

Я работаю над автоматизацией веб-приложения с использованием IDE. Я застрял в записи даты. После ввода даты с помощью автоматического сценария (ввод даты вместо выбора из календаря) всплывающее окно календаря появляется и не закрывается после перехода в другие области приложения. У меня около 6 записей даты на одном экране, и все календари открываются во время выполнения скриптов, которые выглядят странно. Теперь, когда сценарий остановлен, и когда я нажимаю в любом месте экрана, введенные даты стираются, а текстовое поле отображается пустым. Это препятствует тому, чтобы скрипт переходил на другие экраны, бросая сообщения проверки для дат. Однако, когда я вводил даты вручную и переходил в другие области, всплывающие окна календаря закрываются, а даты сохраняются в текстовом поле.

Примечание: выбор даты вместо ввода не работает, так как для ее прокрутки требуется несколько кликов, чтобы получить месяцы и годы, особенно если выбраны прошлые даты.

Как я могу продолжить сохранение дат и всплывающее окно календаря после каждой записи даты.

Спасибо.

Answer 1

Ответ на этот вопрос очень сильно зависит от используемого вами плагина календаря.

Чтобы воссоздать вашу проблему, я использовал this сборщик дат в интерфейсе интерфейса Semantic UI (семантический интерфейс является опрятным, проверьте его тоже :)).

В любом случае, чтобы получить более ясное представление о том, что происходит, я также предлагаю установить плагины Firebug и Firepath в вашем браузере Mozilla.

Предполагая, что вы сделали эту установку, ваша жизнь должна быть простой. В моем случае появляется всплывающее окно, которое представляет собой ни что иное, как таблицу дат со ссылками. Поэтому я делаю следующее:

1. Сначала я нажимаю на поле ввода, чтобы открыть всплывающее окно. Я размещаю поле ввода в своем плагине Firepath. Смотрите скриншот ниже: Примечание: выделенная область - это мое всплывающее окно, которое в настоящее время скрыто, я до сих пор не нажал кнопку ввода!
2. Далее я просматриваю Firepath, чтобы найти дату, которую я хочу забрать. Предположим, я хочу, чтобы выбрать 1-го февраля, как моя дата, как показано ниже в красном круге: Так что нужно найти элемент в таблице даты, соответствующий этой дате, которая в основном элемент таблицы, как показано ниже:
3. Далее, мне нужен x-путь этого элемента date в таблице, поэтому я могу выполнить действие click с использованием Selenium IDE. Чтобы получить x-path, все, что я делаю, это щелкнуть правой кнопкой мыши по элементу, как показано ниже:
4. Теперь со всей этой информацией я делаю следующее: Сначала я использую команду щелчка, чтобы щелкнуть по полю ввода, а затем использовать clickAt чтобы щелкнуть элемент таблицы, соответствующий предпочтительной дате. Всплывающее окно появляется в команде щелчка в поле ввода, и всплывающее окно исчезает после команды clickAt на нужной дате. Код, как показано ниже:

Примечания: Это в соответствии с выбором даты я выбрал воспроизвести вашу проблему, если вы хотите, я могу сделать это на вашем прецеденту тоже, но вам придется поделиться полный html вашей страницы для меня, чтобы помочь вам!

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

Код jsbin выглядит следующим образом:

$('#example1').calendar(); 
 
$('#example2').calendar({ 
 
    type: 'date' 
 
}); 
 
$('#example3').calendar({ 
 
    type: 'time' 
 
}); 
 
$('#rangestart').calendar({ 
 
    type: 'date', 
 
    endCalendar: $('#rangeend') 
 
}); 
 
$('#rangeend').calendar({ 
 
    type: 'date', 
 
    startCalendar: $('#rangestart') 
 
}); 
 
$('#example4').calendar({ 
 
    startMode: 'year' 
 
}); 
 
$('#example5').calendar(); 
 
$('#example6').calendar({ 
 
    ampm: false, 
 
    type: 'time' 
 
}); 
 
$('#example7').calendar({ 
 
    type: 'month' 
 
}); 
 
$('#example8').calendar({ 
 
    type: 'year' 
 
}); 
 
$('#example9').calendar(); 
 
$('#example10').calendar({ 
 
    on: 'hover' 
 
}); 
 
var today = new Date(); 
 
$('#example11').calendar({ 
 
    minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5), 
 
    maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5) 
 
}); 
 
$('#example12').calendar({ 
 
    monthFirst: false 
 
}); 
 
$('#example13').calendar({ 
 
    monthFirst: false, 
 
    formatter: { 
 
    date: function (date, settings) { 
 
     if (!date) return ''; 
 
     var day = date.getDate(); 
 
     var month = date.getMonth() + 1; 
 
     var year = date.getFullYear(); 
 
     return day + '/' + month + '/' + year; 
 
    } 
 
    } 
 
}); 
 
$('#example14').calendar({ 
 
    inline: true 
 
}); 
 
$('#example15').calendar();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    
 
    <div class="ui container"> 
 
    <h1>Calendar examples</h1> 
 
    
 
    <h3>Input</h3> 
 
    <div class="ui calendar" id="example1"> 
 
    <div class="ui input left icon"> 
 
     <i class="calendar icon"></i> 
 
     <input type="text" placeholder="Date/Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Date only</h3> 
 
    <div class="ui calendar" id="example2"> 
 
    <div class="ui input left icon"> 
 
     <i class="calendar icon"></i> 
 
     <input type="text" placeholder="Date"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Time only</h3> 
 
    <div class="ui calendar" id="example3"> 
 
    <div class="ui input left icon"> 
 
     <i class="time icon"></i> 
 
     <input type="text" placeholder="Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Range</h3> 
 
    <div class="ui form"> 
 
    <div class="two fields"> 
 
     <div class="field"> 
 
     <label>Start date</label> 
 
     <div class="ui calendar" id="rangestart"> 
 
      <div class="ui input left icon"> 
 
      <i class="calendar icon"></i> 
 
      <input type="text" placeholder="Start"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="field"> 
 
     <label>End date</label> 
 
     <div class="ui calendar" id="rangeend"> 
 
      <div class="ui input left icon"> 
 
      <i class="calendar icon"></i> 
 
      <input type="text" placeholder="End"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Year first</h3> 
 
    <div class="ui calendar" id="example4"> 
 
    <div class="ui input left icon"> 
 
     <i class="calendar icon"></i> 
 
     <input type="text" placeholder="Date/Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Initial value</h3> 
 
    <div class="ui calendar" id="example5"> 
 
    <div class="ui input left icon"> 
 
     <i class="calendar icon"></i> 
 
     <input type="text" placeholder="Date" value="5/30/2015 3pm"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>24-hour</h3> 
 
    <div class="ui calendar" id="example6"> 
 
    <div class="ui input left icon"> 
 
     <i class="time icon"></i> 
 
     <input type="text" placeholder="Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Month and year</h3> 
 
    <div class="ui calendar" id="example7"> 
 
    <div class="ui input left icon"> 
 
     <i class="time icon"></i> 
 
     <input type="text" placeholder="Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Year only</h3> 
 
    <div class="ui calendar" id="example8"> 
 
    <div class="ui input left icon"> 
 
     <i class="time icon"></i> 
 
     <input type="text" placeholder="Time"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Button</h3> 
 
    <div class="ui calendar" id="example9"> 
 
    <div class="ui button">Select date</div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Hover</h3> 
 
    <div class="ui calendar" id="example10"> 
 
    <div class="ui button">Hover me</div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Min/Max date</h3> 
 
    <div class="ui calendar" id="example11"> 
 
    <div class="ui input"> 
 
     <input type="text" placeholder="Date"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Day first</h3> 
 
    <div class="ui calendar" id="example12"> 
 
    <div class="ui input"> 
 
     <input type="text" placeholder="Date"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Custom format</h3> 
 
    <div class="ui calendar" id="example13"> 
 
    <div class="ui input"> 
 
     <input type="text" placeholder="Date"> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Inline</h3> 
 
    <div class="ui calendar" id="example14"> 
 
    </div> 
 
    <br/> 
 
    
 
    <h3>Implicit inline (no popup activator)</h3> 
 
    <div class="ui calendar" id="example15"> 
 
    </div> 
 
    <br/> 
 
    
 
    </div> 
 
</body> 
 
</html>