2017-02-08 170 views
0

我正在使用IDE自动化Web应用程序。我被卡在日期输入。在通过自动化脚本输入日期(输入日期而不是从日历中选取日期)后,日历弹出窗口出现,并且在进入另一个应用程序区域后不会关闭。我在一个屏幕上有大约6个日期条目,并且在脚本运行时所有日历都显示为打开,这看起来很奇怪。现在,当脚本停止,并且当我点击屏幕上的任何地方时,输入的日期将被清除,文本框显示为空白。这阻止了脚本进一步屏蔽为日期抛出验证消息。但是,当我手动输入日期并继续到其他区域时,日历弹出窗口会关闭,日期将保存在文本框中。使用Selenium IDE输入日期

注意:选择日期而不是键入不起作用,因为它需要许多点击才能滚动以获取月份和年份,特别是如果要选择过去的日期。

如何在每次输入日期后关闭保存的日期和日历弹出窗口。

谢谢。

回答

0

这个问题的答案很大程度上取决于您使用的日历插件。

要重新创建您的问题,我已经在Semantic UI前端框架中使用了this date-picker(语义UI很整洁,请检查它:))。无论如何,为了更清楚地了解发生的事情,我还建议在你的mozilla浏览器上安装Firebug和Firepath插件。

假设你已经完成了这个安装,现在你的生活应该很简单。就我而言,弹出窗口只是一个带链接的日期表。所以我做了以下几点:

  1. 首先我点击输入框打开弹出窗口。我在我的Firepath插件中找到输入框。请参阅下面的屏幕截图:The input box selected in Firepath with popup highlighted 注意:突出显示的区域是我的弹出窗口,当前处于隐藏状态,我仍然没有点击输入框!
  2. 接下来,我搜索Firepath以找到我想要取的日期。假设我希望挑2月1日我的日期,如红圈所示: Date I want to pick using selenium 所以我需要找到在日期表中对应于这个日期这基本上是一个表元素的元素,如下图所示: Firepath of the date i wish to pick using selenium
  3. 接下来,我需要表中此日期元素的x路径,以便我可以使用Selenium IDE执行单击操作。为了得到x-path,我所做的就是右键点击元素,如下图所示: click on td of the corresponding date
  4. 现在有了所有这些信息,我做了以下工作:首先我使用点击命令点击输入框,然后使用clickAt函数来单击对应于首选日期的表格元素。弹出窗口出现在输入框上的单击命令上,弹出窗口在所需日期的clickAt命令后消失。代码如下: The final Selenium IDE window

注:这是按日期选取器我选择了复制你的问题,如果你愿意,我可以做你的使用也是如此,但你必须分享完成你的网页的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>

+1

由于阿比纳夫。我可以从日历中进行选择,并且无需使用“点击”打开弹出式窗口。但是,如果我必须选择一些前几个月或几年(比如说六月或者可能是前一年),那么我需要对这些文件的Xpaths进行修改,或者必须多次使用滚动的Xpath并将其包含在我的脚本中。 (如果比现在早几个月,我想我不能保持脚本的简短)。因此,我选择'输入'日期,以便即使必须通过更改日期来修改脚本,我也可以更新'值'。在这种情况下,我无法关闭弹出式窗口。 – Ses

+0

嗨Ses,请谅解迟到的回应,但如果我理解正确,您必须输入一个需要大量点击日历弹出窗口的日期,并且您想通过直接键入日期来绕过此问题。 好吧,完全误解了您的在第一时间查询! 无论如何要输入日期,您可以使用2 命令:首先输入日期,然后按下输入键($ {KEY_ENTER})。这对我有用,试试吧!只需检查日期格式是否准确,或者您可能会收到数据验证错误。 –

+0

非常感谢Abhinav :)。 命令工作,我现在能够继续没有日期问题。 – Ses