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

Question

我目前正在使用 Angular 编写应用程序。我正在向 API 发出 GET 请求，并使用它 returns 的数据在 google 地图上放置标记。我决定为此应用程序使用 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 响应？我到处搜索并尝试了所有方法，但无法解决这个问题。

谢谢，保罗

Answer 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");

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

protractor testing input box googlemaps

google-maps

angularjs

protractor

angular-google-maps