Question

我正在使用IDE自动化Web应用程序。我被困在日期入境。通过自动脚本输入日期（键入日期而不是从日历中选择）时，日历弹出窗口将显示，并在进入其他应用程序区域后不会关闭。我在一个屏幕上有大约6个日期条目，所有日历都显示为打开，而脚本运行看起来很奇怪。现在，当脚本停止时，当我单击屏幕上的任何位置时，输入的日期将被清除，文本框显示为空白。这会阻止脚本继续进一步投放日期的验证消息。但是，当我手动输入日期并前往其他区域时，日历弹出窗口将关闭，日期将保存在文本框中。

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

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

感谢。

Answer 1

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

要重新创建您的问题，我在语义用户界面前端框架中使用了this日期选择器（语义用户界面很整齐，请检查它）。）。

无论如何，为了更清楚地了解正在发生的事情，我还建议在你的mozilla浏览器上安装Firebug和Firepath插件。

假设您已完成此安装，您的生活现在应该很简单。就我而言，会出现一个弹出窗口，它只是一个带链接的日期表。所以我做了以下几点：

首先，我点击输入框打开弹出窗口。我在Firepath插件中找到了输入框。请参见下面的屏幕截图：注意：突出显示的区域是我的弹出窗口，当前是隐藏的，我还没有点击输入框！
接下来，我搜索Firepath以找到我想要的日期。假设我希望选择2月1日作为我的日期，如下面的红圈所示：所以我需要在日期表中找到与该日期对应的元素，该日期基本上是一个表元素，如下所示：
接下来，我需要表中此日期元素的x路径，以便我可以使用Selenium IDE执行单击操作。要获取x路径，我只需右键单击元素，如下所示：
现在有了所有这些信息，我会执行以下操作：首先，我使用click命令单击输入框，然后使用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>

Answer 2

当Google搜索硒离子触发日期选择器时，此帖子具有第二重要的意义。我在尝试使用ide插件打开datepicker框时遇到问题。我正在使用“点击位置”命令。这样可以通过测试，但实际上无法触发日期选择器。

在我的情况下，答案是使用命令“ type”而不是“ click at”，我在想是因为触发它的字段是“输入”

使用Selenium IDE输入日期

2 个答案: