使用 Selenium 输入日期 IDE

Question

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

注意：选择日期而不是键入日期是行不通的，因为它需要多次单击才能滚动以获取月份和年份，特别是如果要选择过去的日期。

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

谢谢。

Answer 1

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

为了重现您的问题，我在语义 UI front-end 框架中使用了 this date-picker（语义 UI 很简洁，也请检查一下： )).

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

假设你已经完成了这个安装，你现在的生活应该很简单了。在我的例子中，出现了一个弹出窗口，它只是一个带链接的日期 table。所以我做了以下事情：

首先我点击输入框打开弹窗。我在我的 Firepath 插件中找到了输入框。请参阅下面的屏幕截图：注意：高亮区域是我的popup，目前是隐藏的，我还没有点击输入框呢！
接下来，我搜索 Firepath 以找到我想要提取的日期。假设我想选择 2 月 1 日作为我的日期，如下图红圈所示：所以我需要在日期 table 中找到与该日期相对应的元素，它基本上是一个 table 元素，如下所示：
接下来，我需要 table 中此日期元素的 x-path，以便我可以使用 Selenium IDE 执行点击操作。要获得 x-path 我所做的就是右键单击该元素，如下所示：
现在有了所有这些信息，我执行以下操作：首先我使用 click 命令单击输入框，然后使用 clickAt 函数单击与首选日期对应的 table 元素。弹出窗口出现在输入框上的单击命令上，弹出窗口在所需日期的 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 搜索 selenium ide 触发日期选择器时，此 post 具有倒数第二的相关性。我在尝试使用 ide 插件打开日期选择器框时遇到问题。我正在使用 "click at" 命令。这通过了测试，但未能真正触发日期选择器。

我的答案是使用命令 "type" 而不是 "click at"，我认为是因为触发它的字段是 "input"

使用 Selenium 输入日期 IDE

Date entry using Selenium IDE

datepicker

selenium-ide