量角器测试输入框谷歌地图答案

【问题标题】：protractor testing input box googlemaps量角器测试输入框谷歌地图
【发布时间】：2015-04-01 22:58:55
【问题描述】：

我目前正在使用 Angular 编写应用程序。我正在向 API 发出 GET 请求，并使用它返回的数据在谷歌地图上放置标记。我决定为此应用程序使用 angular-google 地图库 -http://angular-ui.github.io/angular-google-maps/#!/

我在尝试使用量角器进行端到端测试时遇到了一些问题。一件简单但被证明不可能的事情是，我想从地图上的输入框中获取文本。

我的代码如下：

<html ng-app="hailoApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hailo-App</title>
  <link rel="stylesheet" href="/css/style.css">
  <script src='http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=en&v=3.17'></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/lodash/dist/lodash.compat.js"></script>
  <script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
  <script type="text/javascript" src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="js/hailo.js"></script>
</head>

  <body ng-controller="mapController">

    <header>
      <div id="logo"></div>
    <nav>
      <ul>
        <li>DRIVERS</li>
        <li>DOWNLOAD</li>
        <li>GITHUB</li>
      </ul>
    </nav>
    </header>

  <div ng-show='view == 1' id="arrival_time">
   <p>ETA is:</br> {{ETA}}</p>
  </div>
  <div ng-show='view ==2' id="exist_false">
    <p>No Such Location</p>
  </div>

  <div id="map_canvas">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable='true' options="options" events='map.events'>
    <ui-gmap-marker coords="marker.coords" icon="marker.icon" idkey="1" id="user" options='marker.options'></ui-gmap-marker>
    <ui-gmap-marker ng-repeat="marker in drivers" idkey="2" coords="marker" id="taxi">
    </ui-gmap-marker>
    <ui-gmap-search-box template="searchbox.template" events="map.events" position="searchbox.position"></ui-gmap-search-box>
    </ui-gmap-google-map>
  </div>

    <script type="text/ng-template" id="searchbox.tpl.html">
      <form>
          <input type="text" placeholder="ENTER LOCATION" id="searcher">
      </form>
    </script>
  </body>
</html>

我的控制器包含以下与输入框相关的代码：

$scope.searchbox = {
    template: 'searchbox.tpl.html',
    events: $scope.map.events,
    position: 'TOP_LEFT'
  };

有谁知道我如何编写一个量角器测试来定位搜索框，这样我就可以输入文本然后提交它，然后我可以模拟 API 响应？我到处搜索并尝试了所有方法，但无法解决这个问题。

谢谢，保罗

【问题讨论】：

标签： angularjs google-maps protractor angular-google-maps

【解决方案1】：

对于模拟 API 调用，我个人使用了方便的 protractor-http-mock library。

为了将文本输入到搜索输入并提交，您可以使用：

var searcher = element(by.id("searcher"));

searcher.sendKeys("Location");
searcher.submit();

或者：

searcher.sendKeys("Location");
searcher.sendKeys(protractor.Key.ENTER);  // or protractor.Key.RETURN

此外，在与元素交互之前，您可能需要使用显式等待来等待 input 出现。 browser.wait() 和 presenceOf Expected Condition 应该会有所帮助：

var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(searcher), 10000, "Searcher was not found")

searcher.sendKeys("Location");

【讨论】：

感谢 Alecxe，当我运行量角器时，出现错误 NoSuchElementError: No element found using locator: By.id("searcher") 似乎无法访问该元素
@PaulFitzgerald 谢谢，用element(by.tagName("ui-gmap-search-box")); 代替element(by.id("searcher")) 怎么样？
哦，伙计，我认为这会奏效。另一个错误：NoSuchElementError: No element found using locator: By.tagName("ui-gmap-search-box")
@PaulFitzgerald 抱歉，如果不能重现，很难说。在您输入搜索条件的地方显示搜索框的 HTML 表示 - 在浏览器中单击“检查元素”，然后在此处发布您将获得的内容。谢谢。