protractor-helpers
Version:
Additional matchers / locators and helpers for system tests using protractor and Jasmine
89 lines (83 loc) • 3.91 kB
HTML
<html>
<head>
<title>Protractor Test App</title>
</head>
<body ng-app="protractorTest" ng-controller="MainCtrl as mainCtrl">
<div data-hook="start-point">Start point is here</div>
<section class="element-array-finder">
<p>Array finder</p>
<div data-hook="singular-element-data-hook" ng-class="{'test-class': true}">Single Data Hook</div>
<div data-hook="multiple-element-data-hook">Data Hook - 1</div>
<div data-hook="multiple-element-data-hook" class="have-text-found">Data Hook - 2</div>
<div data-hook="multiple-element-data-hook">Data Hook - 3</div>
<div class="have-text-found">Text to Find</div>
</section>
<section class="protractor-helpers">
<p>Translated text with mocked $translate</p>
<div data-hook="translated-key">{{'test-key' | translate: 'variable'}}</div>
</section>
<section class="hovered-elements" ng-mouseover="mainCtrl.hoverTrigger(true)"
ng-mouseleave="mainCtrl.hoverTrigger(false)">
<h1 data-hook="hover-trigger-element">Hover over me</h1>
<div data-hook="immediate-hover" ng-style="mainCtrl.immediate">Immediate</div>
<div data-hook="delayed-hover" ng-style="mainCtrl.delayed">Delayed</div>
<div data-hook="delayed-ng-if" ng-if="mainCtrl.delayed.visibility === 'visible'">Delayed If</div>
</section>
<section data-hook="drop-down-section">
<p>Drop Down tests</p>
<h3>Current value is: <span data-hook="drop-down-current-value">{{mainCtrl.currentDropDownValue}}</span></h3>
<select data-hook="drop-down-select-input" ng-model="mainCtrl.currentDropDownValue">
<option value="A">First</option>
<option value="B">Second</option>
<option value="C" data-hook="third-drop-down-option">Third</option>
</select>
</section>
<section data-hook="console-errors">
<button data-hook="create-console-error" onclick="a.b.c()">Click me to create Console error</button>
</section>
<section>
<p>Visibility tests</p>
<div data-hook="visible-element" ng-show="true">I am visible</div>
<div data-hook="hidden-element" ng-show="false">I am hidden</div>
</section>
<section>
<p>element count tests</p>
<div data-hook="element-with-repeater" ng-repeat="tool in mainCtrl.tools">{{tool}}</div>
</section>
<section>
<p>Text value tests</p>
<div data-hook="element-with-text" ng-show="true">I am an important text</div>
<div data-hook="element-without-text" ng-show="false"></div>
</section>
<section>
<p>Regex value tests</p>
<div data-hook="element-with-percentage">15%</div>
<div data-hook="element-with-dollar-money">$15</div>
<div data-hook="element-with-dollar-fraction-money">$15.72</div>
<div data-hook="element-with-euro-money">€15</div>
<div data-hook="element-with-euro-fraction-money">€15.24</div>
</section>
<section>
<p>Inputs tests</p>
<p>Input with Values:<input data-hook="input-with-value" type="text" value="original value" /></p>
<p>Disabled Input:<input data-hook="disabled-input" type="text" ng-disabled="true"/></p>
<p>Activated Input:><input data-hook="activated-input" type="text"/></p>
<p>Checkbox:<input data-hook="checkbox" type="checkbox"/></p>
<form name="form" data-hook="form">
<p>Name Input:<input data-hook="form-name" type="text" ng-model="mainCtrl.name" minlength="4"/></p>
<p>Email Input:<input data-hook="email" type="email" ng-model="mainCtrl.email" required/></p>
</form>
</section>
<section>
<p>Link tests</p>
<a data-hook="link" href="https://docs.angularjs.org/api"></a>
</section>
<section>
<p>Scroll To clickable element</p>
<button data-hook="button-at-bottom" type="button" ng-click="buttonAtBottomClicked = true">Click Me</button>
<span data-hook="button-at-bottom-hint" ng-if="buttonAtBottomClicked === true">I am visible!!!</span>
</section>
<script src="angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>