So I'm just curious about something... it appears that when doing e2e tests with Protractor and doing things like "expect(element(by.css('.test')).getText()).toBe('Some Text');" this only works for elements in the BODY section of the document and not the HEAD section.
For example I tinkered with the tutorial phonecatApp index.html so that it looks like this:
!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title class="appTitle">Google Phone Gallery</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animations.css">
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div class="test">Some Text</div>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
Then I added some simple tests to scenarios.js that look like this:
it('should set the title to "Google Phone Gallery"', function () {
expect(element(by.css('.appTitle')).getText()).toBe('Google Phone Gallery');
});
it('should set the div.test to "Some Text"', function () {
expect(element(by.css('.test')).getText()).toBe('Some Text');
});
The first test to check TITLE always fails with "Expected ' ' to be 'Google Phone Gallery'." But the DIV test works fine.
Is there anything special required to check elements in the HEAD section or is this just something you can't do with Protractor?
Related
i am trying to use ng-admin for the firs time. i am just following the example in and i am unable to see anything in the browser. my code is minimal, so not sure what i am doing wrong.
any ideas? did i not install correctly? i just downloaded it from a site and unzipped the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Admin</title>
<link rel="stylesheet" href="external/ng-admin/build/ng-admin.min.css">
<script src="external/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-strict-di>
<div ui-view="ng-admin"></div>
</body>
</html>
// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
// create an admin application
var admin = nga.application('My First Admin')
.baseApiUrl("http://vl-esifakis-ice:8000/tracker/");
var foundry = nga.entity('foundry');
foundry.listView().fields([
nga.field('name'),
nga.field('id')
]);
admin.addEntity(foundry);
// more configuration here later
// ...
// attach the admin application to the DOM and execute it
nga.configure(admin);
}]);
Here is a demo which i have made,
<!DOCTYPE html>
<html>
<head>
<link data-require="ng-admin#0.0.1" data-semver="0.0.1" rel="stylesheet" href="https://unpkg.com/ng-admin/build/ng-admin.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ng-admin#0.0.1" data-semver="0.0.1" src="https://unpkg.com/ng-admin/build/ng-admin.min.js"></script>
<script data-require="angular-mocks#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.7/angular-mocks.js"></script>
<script src="admin.js"></script>
<!-- <script src="backend.js"></script>
-->
</head>
<body ng-app="myApp">
<div ui-view="ng-admin"></div>
</body>
</html>
DEMO
i'm running it using XAMPP but it's not working and showing output of {{"Hello"+"you"}} rather than Hello you
<!DOCTYPE HTML>
<html>
<head ng-app="store">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js">
</script>
<script >
var abc=angular.module('store',[]);
</script>
<p>
{{"Hello"+"you"}}
</p>
</body>
</html>
First, you should create a controller in your JS, then you use it in your view.
You can do it setting the ng-controller directive, as below:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('store', [])
.controller('storeCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="storeCtrl">
<p>
{{"Hello"+"you"}}
</p>
</body>
I have been trying to do some proof of concept and I was expecting Plunker to write 4 for the expression {{40/10}} but it never did. What's wrong with it? However I see Scott Allen was able to do so.
Here is my plunker link: https://plnkr.co/edit/OTuxWEMmlWObMgGy9o2Z?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{40/10}}
</body>
</html>
This is because the script you import is Angular 2. If you import Angular 1.x.x, your example will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
If you want to learn how to use Angular 2, look at their website.
You are linking to angular2 while using an angular1 directive ng-app.
Here is a link to a working plnkr link
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
Angular 2 is a complete redesign from angular1, so a code working in Angular 1 will not work in Angular 2.
I'm trying to make my AngularJS HelloWorld work but I can't. My code is the following:
<!DOCTYPE html>
<html np-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
</body>
The output:
{{mensagem}}
I searched about similar questions here in SO but found only questions with a missing ng-app atribute.
I tried opening my file both in Firefox and Chrome and I get the same error. Logging both angular and app reveal that they are both defined.
I don't know what I'm doing wrong.
In your HTML tag, you've misspelled ng-app, which is probably the main reason it's not working. You should also place the include for Angular down at the end of the body, which ensures the app and controller elements are defined before the script runs:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</body>
</html>
I want to distribute my app in two similar variants. Only the start screen of both variants is different.
What's the right pattern for this setup? I think using a index_a.html and index_b.html is a good start?!
My index.html looks like this
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="styles/application.css"/>
</head>
<body ng-controller="AppController">
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/filters.js"></script>
<script src="scripts/directives.js"></script>
</body>
</html>
Thanks