I followed the Custom remote validators documentation
I have <script href="parsley.remote.js"></script> before <script href="parsley.js"></script> just before the end of html body and I'm seeing the following message on the console of Chrome Developer Tools:
Uncaught TypeError: Cannot read property 'on' of undefined(anonymous function) # parsley.remote.js:267(anonymous function) # parsley.remote.js:271
Part of paryley.remote.js code :
window.Parsley.on('form:submit', function () {
this._remoteCache = {};
});
On Firebug the error console message is
TypeError: window.Parsley is undefined
window.Parsley.on('form:submit', function () {
A small lab just a test html page with source dist js parsley
If I invert file reference parsley.remote.js and parsley.js, the error disappears, but according to the documentation, it's not the right way.
It's was bug, fixed in 2.1.3+.
Only include the remote version (assuming you need it).
Related
./server.sh
internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/eventsController' imported from /home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/web-server.js
at finalizeResolution (internal/modules/esm/resolve.js:272:11)
at moduleResolve (internal/modules/esm/resolve.js:652:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:695:13)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
at link (internal/modules/esm/module_job.js:41:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
and in web console
angular.js:10413 GET http://127.0.0.1:5500/app/lib/app/data/event 404 (Not Found)
please help me
I wanted to change event data about an event object in javascript, a json-file
I have a problem scheduling local notifications with the ionic framework.
this is the angular module of my app.js
angular.module('starter', ['ionic','chart.js','ngCordova'])
with a controller
.controller("ExampleController", function($scope, $ionicPlatform,$interval,$cordovaLocalNotification)
i try to create a notification with this method
scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Value out of bound',
title: 'Anomaly'
}).then(function () {
alert("Instant Notification set");
});;
};
when running on an android device i get this error message:
TypeError: Cannot read property 'local' of undefined
at Object.schedule (ng-cordova.js:5042)
at scheduleInstantNotification (app.js:138)
at app.js:64
at ionic.bundle.js:56230
at Object.ready (ionic.bundle.js:2140)
at Object.ready (ionic.bundle.js:56223)
at app.js:62
at callback (ionic.bundle.js:25611)
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$digest (ionic.bundle.js:30211)
I suspect that this error comes from the ngCordova library the error comes from this code part of the library
schedule: function (options, scope) {
var q = $q.defer();
scope = scope || null;
$window.cordova.plugins.notification.local.schedule(options, function (result) {
q.resolve(result);
}, scope);
return q.promise;
},
the $window.cordova.plugins.notification.local object is undefined.
Did I miss something in the controller?
EDIT
adding the required plugin with:
cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
causes a compiler error when running
ionic build android
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugCompile'.
> Could not find any matches for com.android.support:support-v4:+ as no versions of com.android.support:support-v4 are available.
Searched in the following locations:
https://repo1.maven.org/maven2/com/android/support/support-v4/maven-metadata.xml
https://repo1.maven.org/maven2/com/android/support/support-v4/
https://jcenter.bintray.com/com/android/support/support-v4/maven-metadata.xml
https://jcenter.bintray.com/com/android/support/support-v4/
Required by:
:android:unspecified
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
You need to add the plugin with :
cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
as instructed on ngcordova documentation :
http://ngcordova.com/docs/plugins/localNotification/
Be sure also to call any method from the plugin after $ionicPlatform.ready.
EDIT
To your error when compiling with this plugin, please be sure to have Android Support Library installed with the Android SDK Manager.
I have a really weird issue with my AngularJS app on iPad / iPhone safari.
The issue occurs only of first load (after clearing history / website data).
The issue that the application wont start at all - I get a white page and the console (from MacBook develop tools) is full with errors,
Sometimes I'm getting lots of
TypeError: undefined is not an object (evaluating 'd.module')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 'd.$$minErr')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 't.noop')
ReferenceError: Can't find variable: angular
ReferenceError: Can't find variable: angular
...
Sometimes I'm getting Error: $injector:unpr - Unknown Provider
And sometimes Error: $injector:nomod - Unknown Provider
But if I hit page refresh after getting the white page / errors - all works just fine.
This is part of the third party js libs/plugins I include on my index.html
<script src="resources/plugins/head.load.min.js"></script>
<script src="resources/plugins/modernizr-custom.js"></script>
<script src="resources/lib/jquery/jquery-2.1.0.min.js"></script>
<script src="resources/lib/angular/angular.min.js"></script>
<script src="resources/lib/angular/angular-resource.min.js"></script>
<script src="resources/lib/angular/angular-route.min.js"></script>
<script src="resources/lib/angular/angular-animate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate-loader-static-files.js"></script>
<script src="resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js"></script>
<script src="resources/lib/ng-table/ng-table.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload-shim.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload.min.js"></script>
I'm really lost here...
Another thing: I have noticed on my Mac (Resources->Scripts) that if I open a file, lets say Resources->Scripts->FileNameOne.js the content is actually of another file FileNameTwo.js ??? is it a flaw of the dev tools of the Mac that confuses the names/content or can it be related to the problem???
Any Ideas?
Here is the complete solution with Grunt
Content of the Gruntfile.js
'use strict';
module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: ['WebContent/resources/plugins/head.load.min.js', 'WebContent/resources/plugins/modernizr-custom.js',
'WebContent/resources/lib/jquery/jquery-2.1.0.min.js',
'WebContent/resources/lib/angular/angular.min.js', 'WebContent/resources/lib/angular/angular-resource.min.js', 'WebContent/resources/lib/angular/angular-route.min.js', 'WebContent/resources/lib/angular/angular-animate.min.js',
'WebContent/resources/lib/angular-translate/angular-translate.min.js', 'WebContent/resources/lib/angular-translate/angular-translate-loader-static-files.js',
'WebContent/resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js',
'WebContent/resources/lib/ng-table/ng-table.min.js',
'WebContent/resources/lib/websockify/util.js', 'WebContent/resources/lib/websockify/base64.js', 'WebContent/resources/lib/websockify/websock.js',
'WebContent/resources/lib/file-upload/ng-file-upload.min.js',
'WebContent/resources/js/services/*',
'WebContent/resources/js/services/dialogs/*',
'WebContent/resources/js/controllers/*',
'WebContent/resources/js/directives/*',
'WebContent/resources/plugins/*'],
dest: 'dist/myWebAppInOneFile.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Then just call grunt from the relevant folder and you'll get your file
What build toolchain are you using. One option would be to concatenate all of the includes into a single file, this should stop the error where the wrong scripts are being loaded - As mentioned by Marcus H
Gulp
https://github.com/contra/gulp-concat
Grunt
https://github.com/gruntjs/grunt-contrib-concat
I have an angularjs app containing an iframe that display the page allowing to log into another website. I am trying to put some value in the fields contained in the iframe but I can't find the elements using any locator.
Here is my test :
describe("Harvest", function() {
beforeEach(function () {
browser.get('http://localhost:8110/');
expect(browser.getCurrentUrl()).toMatch('_*#/login$');
element(by.model('user.username')).sendKeys('sam');
element(by.model('user.password')).sendKeys('pass');
element(by.id('bt_signin')).click();
});
afterEach(function () {
browser.executeScript('window.sessionStorage.clear();');
});
describe('A user', function () {
beforeEach(function () {
browser.get('http://localhost:8110/');
});
it('should be able to obtain an access token from harvest', function () {
expect(browser.getCurrentUrl()).toMatch('_*#/home$');
//Display and close the window
element(by.id('btHarvest')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(true);
element(by.id('btCloseModal')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(false);
//Authenticate into harvest
element(by.id('btHarvest')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(true);
browser.switchTo().frame('iframeHarvest');
//It fails here with a null exceptions, guess it can't find it
element(by.id('email')).sendKeys(browser.params.harvestLogins.user);
element(by.id('user_password')).sendKeys(browser.params.harvestLogins.password);
element(by.id('sign-in-button')).click();
expect(element(by.name('commit')).isPresent()).toBe(true);
browser.driver.switchTo().defaultContent();
});
});
});
And here is the exception generated
1) Harvest A user should be able to obtain an access token from harvest
Message:
[31mError: Error while waiting for Protractor to sync with the page: {}[0m
Stacktrace:
Error: Error while waiting for Protractor to sync with the page: {}
at Error (<anonymous>)
==== async task ====
WebDriver.executeScript()
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:45:22)
==== async task ====
Asynchronous test function: it()
Error
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:26:5)
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:20:3)
at Object.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:1:63)
After correcting the iframe call as suggested I get this error :
1) Projects A user is possible to create a project based on harvest data
Message:
[31mError: Error while waiting for Protractor to sync with the page: {}[0m
Stacktrace:
Error: Error while waiting for Protractor to sync with the page: {}
at Error (<anonymous>)
As discussed, the issue that you are facing is because the iframe that you are switching to is non-angular. Thus, element(by.id) will not work after you switch to that iframe. Instead, findElement needs to be used!
Since yours is an Angular Application, could you please try using:
browser.switchTo().frame('iframeHarvest');
instead of:
browser.driver.switchTo().frame(element(by.id('iframeHarvest')));
I found a solution but I still wait for an explanation from the angular team, because I don't understand why using element fails but using the driver directly succeed. Here is the code that works (I included the suggestion from #Sakshi even thought it doesn't change the result) :
browser.switchTo().frame(element(by.id('iframeHarvest')));
browser.driver.findElement(by.id('email')).sendKeys(browser.params.harvestLogins.user);
edit : here is the protractor subject https://github.com/angular/protractor/issues/1465
My e2e.conf.coffee file is:
exports.config =
baseUrl: 'http://localhost:9001'
specs: [
'e2e/**/*.coffee'
]
framework: 'jasmine'
I have my node project running and listening on port 9001.
My test is:
describe 'Happy Path', ->
it 'should show the login page', ->
console.log browser
expect(browser.getLocationAbsUrl()).toMatch("/view1");
it 'should fail to login', ->
setTimeout ->
console.log "FAIL!"
, 1200
And the error that I get is:
Failures:
1) Happy Path should show the login page
Message:
Error: Error while waiting for Protractor to sync with the page: {}
Stacktrace:
Error: Error while waiting for Protractor to sync with the page: {}
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
==== async task ====
WebDriver.executeScript()
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
==== async task ====
Asynchronous test function: it("should show the login page")
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>
at <anonymous>==== async task ====
What am I doing wrong??
The (very) short version: use browser.driver.get instead of browser.get.
The longer version: Protractor is basically a wrapper around Selenium and its Javascript WebDriver code. Protractor adds code to wait for Angular to "settle down" (i.e., finish going through its $digest loops) before proceeding with your test code. However, if your page doesn't have Angular on it, then Protractor will wait "forever" (actually just until it times out) waiting for Angular to settle.
The browser object that Protractor exposes to your test is an instance of Protractor (i.e., if you see old answers on Stack Overflow with var ptor = protractor.getInstance(); ptor.doSomething(), then you can replace ptor with browser in those old answers). Protractor also exposes the wrapped Selenium WebDriver API as browser.driver. So if you call browser.get, you're using Protractor (and it will wait for Angular to settle down), but if you call browser.driver.get, you're using Selenium (which does not know about Angular).
Most of the time, you'll be testing Angular pages, so you'll want to use browser.get to get the benefits of Protractor. But if your login page doesn't use Angular at all, then you should be using browser.driver.get instead of browser.get in the tests that test your login page. Do note that you'll also need to use the Selenium API rather than the Protractor API in the rest of the test: for example, if you have an HTML input element with id="username" somewhere in your page, you'll want to access it with browser.driver.findElement(by.id('username')) instead of element(by.model('username')).
For more examples, see this example from the Protractor test suite (or try this link if the previous one ever goes away). See also the Protractor docs which state:
Protractor will fail when it cannot find the Angular library on a page. If your test needs to interact with a non-angular page, access the webdriver instance directly with browser.driver.
Example code: In your login test above, you would want to do something like:
describe 'Logging in', ->
it 'should show the login page', ->
browser.driver.get "http://my.site/login.html"
// Wait for a specific element to appear before moving on
browser.driver.wait ->
browser.driver.isElementPresent(by.id("username"))
, 1200
expect(browser.driver.getCurrentUrl()).toMatch("/login.html");
it 'should login', ->
// We're still on the login page after running the previous test
browser.driver.findElement(by.id("username")).sendKeys("some_username")
browser.driver.findElement(by.id("password")).sendKeys("some_password")
browser.driver.findElement(by.xpath('//input[#type="submit"]')).click()
(A note of caution: I haven't done much CoffeeScript, and it's entirely possible I made a CoffeeScript syntax error in the code above. You may want to check its syntax before blindly copying and pasting it. I am, however, confident in the logic, because that's copied and pasted almost verbatim from my Javascript code that tests a non-Angular login page.)
If you need to be using browser.get and are getting this error,
the issue is most likely to be the rootElement property in protractor config file.
By default Protractor assumes that the ng-app declaration sits on the BODY-element. However, in our case, it could be declared somewhere else in the DOM. So we have to assign the selector of that element to the rootElement property:
// rootElement: 'body', // default, but does not work in my case
rootElement: '.my-app', // or whatever selector the ng-app element has
Corresponding HTML:
<div ng-app="myApp" class="my-app">
I copied the answer from http://www.tomgreuter.nl/tech/2014/03/timing-errors-with-angular-protractor-testing/
I got this error, too, but in my case my tests were working and this error occured after expanding them.
Turns out that this error may occur, if you try to call getText() in your describe block instead of your testcases. My Set-Up was like following:
describe('Test Edit Functionality', function() {
var testEntry = $$('.list-entry').first(),
testEntryOldName = testEntry.getText();
it('Should keep old name if edit is aborted', [...]);
});
That caused the Error Error while waiting for Protractor to sync with the page: {}.
I fixed it by moving the assigment into a beforeEach-block
describe('Test Delete Functionality', function() {
var testEntry = $$('.list-entry').first(),
testEntryOldName;
beforeEach(function() {
testEntryOldName = testEntry.getText();
});
});
Or, may be better, assign it in the specific testcases you need this value (if you dont need it in all).
Not sure where I picked up the pieces that put this answer at this point, but this is what works for me:
Add class='ng-app' to the element that contains your app.
<div ng-app="myApp" ng-controller="myController" class="ng-app"></div>
Add rootElement to your protractor.conf.
exports.config = {
specs: ['your-spec.js'],
rootElement: ".ng-app"
};
Use browser.driver.get not browser.get.
describe('foobar element', function() {
it('should be "baz" after view is initialized', function() {
browser.driver.get('http://localhost/view');
var inputBox = $('input[name=foobar]');
expect(inputBox.getAttribute('value')).toEqual("baz");
});
});
I got this issue a couple of days back on my CT. My tests were running fine until 3 days back, but then this protractor sync error showed up and just won't go away with any of the solutions/hacks provided here and at https://github.com/angular/protractor/issues/2643.
I checked that this issue only occurred in Firefox headless and worked fine with Chrome headless. Upgrading from Firefox v69 to the latest(v72 currently) fixed the issue. I do not know why the issue started manifesting itself and how it got fixed with the upgrade, but for what it is worth I thought this information might come in handy for someone else.