Develop Reference

Protractor: Getting error message on config.js file which worked previously in terminal

running tests on protractor I keep getting a message that there is something wrong with my config file (which worked perfectly 2 days ago).
I would appreciate some help fixing this.
What did I do wrong?
How do I fix this?
Things to consider:
npm was updated globally 2 days ago (to version 11)
The package.json file was was set up correctly. Was able to run a
test with no problems on saturday.
looking through the logs I think this is the issue:
npm ERR! LocatorTraining# protractor: `protractor configurations.js`
Looking through my configurations.js file, I've only added Html reporter to it. Nothing else.
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['PageObjectLocator1.js'],
capabilities: {
browserName: 'chrome'
},
onPrepare: function() {
browser.driver.manage().window().maximize();
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: 'target/screenshots'
})
);
}
}
This is the message from the terminal
[16:27:25] I/launcher - 0 instance(s) of WebDriver still running
[16:27:25] I/launcher - chrome #01 failed 1 test(s)
[16:27:25] I/launcher - overall: 1 failed spec(s)
[16:27:25] E/launcher - Process exited with error code 1
npm ERR! Darwin 17.7.0
npm ERR! argv "/Users/jacquelinegeorge/.nvm/versions/node/v7.2.0/bin/node" "/Users/jacquelinegeorge/.nvm/versions/node/v7.2.0/bin/npm" "run" "protractor"
npm ERR! node v7.2.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! LocatorTraining# protractor: `protractor configurations.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the LocatorTraining# protractor script 'protractor configurations.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the LocatorTraining package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! protractor configurations.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs LocatorTraining
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls LocatorTraining
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/jacquelinegeorge/Documents/JSworkspace/LocatorTraining/npm-debug.log
This is the package.json file which was working 2 days ago.
{
"name": "LocatorTraining",
"dependencies": {
"protractor": "^5.4.1",
"jasmine-data-provider": "^2.2.0",
"protractor-jasmine2-html-reporter":"^0.0.7"
},
"scripts": {
"webdriver-update": "./node_modules/.bin/webdriver-manager update",
"webdriver-start": "./node_modules/.bin/webdriver-manager start",
"protractor": "./node_modules/.bin/protractor configurations.js",
"start": "npm run webdriver-update && npm run webdriver-start"
}
}

I seem to have an issue with running my tests in Google Chrome at the moment. When I ran this test in FF it worked fine. So the code is fine. So what I will do is find out why chrome is NOT allowing me to run my tests.

Unable to call npm run build using vue-cli in production

Expected Behavior
npm run build should create the production dist bundle that I can serve on a given machine
Current Behavior
Despite being able to build locally, whenever I try to run npm run build on an external resource (such as a Digital Ocean VM or Heroku machine), I receive the below error.
Failure Logs
root#nodejs-lazyq-dev:/var/www/html/Vue# npm run build
> vue-material-dashboard-pro#1.0.0 build /var/www/html/Vue
> vue-cli-service build
⠴ Building for production...
ERROR Failed to compile with 1 errors 09:29:00
error in ./src/assets/scss/_material-dashboard.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "md/plugins/fullCalendar";
^
File to import not found or unreadable: md/plugins/fullCalendar.
in /var/www/html/Vue/src/assets/scss/_material-dashboard.scss (line 59, column 1)
at runLoaders (/var/www/html/Vue/node_modules/webpack/lib/NormalModule.js:286:20)
at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/var/www/html/Vue/node_modules/sass-loader/lib/loader.js:55:13)
at Object.done [as callback] (/var/www/html/Vue/node_modules/neo-async/async.js:7974:18)
at options.error (/var/www/html/Vue/node_modules/node-sass/lib/index.js:294:32)
# ./src/material-dashboard.js 17:0-48
# ./src/main.js
# multi ./src/main.js
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-material-dashboard-pro#1.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-material-dashboard-pro#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-03T09_29_01_030Z-debug.log
Additionally, I have tried running npm rebuild node-sass, updated the material-dashboard.css file to include the underscore: _material-dashboard.css, passing --production in npm install --production, but am having no luck.
nodejs version: v8.11.4
npm version: v5.6.0
I've been trying to solve this for a few hours now but am not having any luck. I don't understand why it works locally but not when on another production machine.

This happens because of a spelling mistake (wrong case) in the import statement of this Vue UI library. The file is named "fullcalendar" while the import is called by "fullCalendar" (notice the capital "C"). When you fix this (make the capital "C" simple in the import statement) it will run the "npm run prod" command successfully. It should be noted that, for me, this did not occur in the windows environment for some reason, but only occurs in the Linux environment.

Babel CLI --out-dir runs into permissions errors on second compile

I'm running into a strange error that seems to be giving me permissions issues on Windows 10. I'm using the Babel CLI to compile some ES6 code, which works great using --out-file, which will overwrite files just fine, by --out-dir doesn't. Here's the relevant parts of my package.json:
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-minify": "^0.2.0",
"babel-preset-env": "^1.6.0"
},
"scripts": {
"build-components": "babel Scripts/Components --out-file Scripts/Compiled/components.js",
"build-pages": "babel Scripts/Pages --out-dir Scripts/Compiled/Pages",
"watch-components": "babel Scripts/Components -w --out-file Scripts/Compiled/components.js",
"watch-pages": "babel Scripts/Pages -w --out-dir Scripts/Compiled/Pages",
"build-js": "npm run build-components && npm run build-pages"
}
}
I'm building this within Visual Studio and using the Task Runner Explorer package to run my commands (though it still fails from PowerShell, or running it as a build command within the project). The plugin runs 'npm run build-js' on build and 'npm run watch-components' and 'npm run watch-pages' afterwards to watch for any changes. 'npm run watch-pages' fails every time, as does 'npm run build-pages' if the files it outputs to already exist. The only solution I've found so far is to delete the 'Scripts/Compiled/Pages' folder every time I make a change to a file within 'Scripts/Pages', which defeats the purpose of the watch command and is generally just annoying to have to do every time, especially when I'm doing a lot of file changes. Both build commands for the components works every time and will overwrite the old file without issue.
> babel Scripts/Pages --out-dir Scripts/Compiled/Pages
Error: EPERM: operation not permitted, open 'D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\Scripts\Compiled\Pages\Index.Vue.js'
at Error (native)
at Object.fs.openSync (fs.js:584:18)
at fs.writeFileSync (fs.js:1224:33)
at outputFileSync (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\output-file-sync\index.js:45:3)
at write (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:33:5)
at handleFile (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:43:7)
at D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:61:9
at Array.forEach (native)
at handle (D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\node_modules\babel-cli\lib\babel\dir.js:59:29)
at Array.forEach (native)
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\Web\\External\\Node.exe" "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\Web\\External\\node_modules\\npm\\bin\\npm-cli.js" "run" "build-pages" "--color=always"
npm ERR! node v5.4.1
npm ERR! npm v3.3.4
npm ERR! code ELIFECYCLE
npm ERR! STS-VueApp#1.0.0 build-pages: `babel Scripts/Pages --out-dir Scripts/Compiled/Pages`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the STS-VueApp#1.0.0 build-pages script 'babel Scripts/Pages --out-dir Scripts/Compiled/Pages'.
npm ERR! This is most likely a problem with the STS-VueApp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel Scripts/Pages --out-dir Scripts/Compiled/Pages
npm ERR! You can get their info via:
npm ERR! npm owner ls STS-VueApp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Projects\PasswordReset\Trunk\STS.PasswordReset.Web\npm-debug.log
Process terminated with code 1.
I thought maybe it was something having to do with the files not being included in my project, because I get a similar error from the component builds if my 'Scripts/Compiled' folder isn't included in the project, but including 'Scripts/Compiled/Pages' still gives me the same error and including the actual output file, ie: 'Scripts/Compiled/Pages/Index.js' doesn't fix it either.
Any ideas?? :\

It's only my thoughts. But, can you please double check:
do you run VS as Administrator?
do you run Task Runner Explorer as Administrator?
Make sure that both works under Administrator.

I'm running into something similar and the problem looks to be that babel is moving over the read only attrib on files that are under source control from VSS, i.e you pull a file from VSS it comes down with read only. The watch on it transpiles it to your target folder with read only on it. Subsequent transpiles fail as the target file won't get overwritten when it's set to read only.
I'm still working on the right solution to this but at the moment I have hacked up temp fix via a task runner command that removes read only on the entire target folder.
"babelJsxTranspileInit": "attrib -r [targetFolder] /s",

Creating a new angular project with ng new

When I try to create a new Angular 4 project with 'ng new myProject', the project folder, sub folders and files are created,
but I also always get these errors:
npm ERR! path c:\projects\hello-world\node_modules\fsevents\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rmdir
npm ERR! Error: EPERM: operation not permitted, rmdir 'c:\projects\hello-world\node_modules\fsevents\node_modules'
npm ERR! { Error: EPERM: operation not permitted, rmdir 'c:\projects\hello-world\node_modules\fsevents\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, rmdir \'c:\\projects\\hello-world\\node_modules\\fsevents\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'rmdir',
npm ERR! path: 'c:\\projects\\hello-world\\node_modules\\fsevents\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
I open the Node.js command prompt as Administrator when I issue the ng new command.
I am using Win7 Pro. I have install the following successfully and without any errors. The ng -v returns the following:
-Angular CLI: 1.5.0
-Node: 8.9.0
-OS: win32 x64
-Angular:
npm -v returns: 5.5.1
I give my user account, based on the 'whoami' results, full admin permissions to the myProject folder, the C:\Users\myAccount\AppData\Roaming\npm folder and %APPDATA%\npm-cache folder.
I also perform a 'npm cache verify'.
But I still get the above errors on the ng new command.
How do I correct these errors? Or can I ignore these errors?

If you still run into this problem, one reason you might be running into this is that you installed your CLI tools (#angular/cli) using either 'sudo npm install -g #angular/cli' or as root, from the 'sudo su - root' command, then simply 'npm install -g #angular/cli', and your problem seems to arise whenever you're not logged in and calling an 'ng' command as root or with 'sudo'. This makes sense, but it always causes some kind of insufficient permission related error; and it's not even your fault.
You can easily try to fix or mitigate this serious error by creating and saving a dot-file named '.npm-global' in your home directory ('~/'), then running the command, npm config set prefix '~/.npm-global'.
Then, simply include the line in either /etc/profile or ~/.profile, export PATH=~/.npm-global/bin:$PATH, and run 'source /etc/profile' or 'source ~/.profile' to finalize it. [1]
After that, simply remove anything Node, like 'node_modules/', 'package-lock.json', just all of it.... Then, try installing your NPM packages again -- this time, without using 'sudo' and without root signed in.
https://docs.npmjs.com/getting-started/fixing-npm-permissions

'Failed: undefined is not a function' in protractor

I have been through various posts but unable to find a solution.
HTML:
<div class="col-xs-3" ng-repeat="post in posts track by $index">
<div class="well">
<h3 class="postTitle">
<a ui-sref="singlePost({id:post.id,permalink:post.permalink})">
{{post.title}}
</a>
</h3>
<h5>By: {{post.author}} | {{post.datePublished}}</h5>
</div>
</div>
scenario.js:
'use strict';
/* https://github.com/angular/protractor/blob/master/docs/toc.md */
describe('The Single Page Blogger E2E Test', function() {
var ptor = browser; // browser === protractor.getInstance();
// ptor.get('/'); //go to http://localhost:8000
beforeEach(function() {
ptor.get('app');
});
it('Should have 4 posts', function() {
var posts = element.all(by.repeater('post in posts'));
expect(posts.count()).toBe(4); // we have 4 hard coded posts
});
it('Should redirect to #/posts/1/sample-title1', function() {
var posts = element.all(by.repeater('post in posts'));
posts.first().then(function(postElem) {
postElem.findElement(by.tagName('a')).then(function(a) {
a.click(); //click the title link of 1st post
expect(ptor.getCurrentUrl()).toMatch('/posts/1/simple-title1');
});
});
});
});
protractor.conf.js:
exports.config = {
allScriptsTimeout: 11000,
specs: [
'specs/*.js'
],
capabilities: {
'browserName': 'chrome'
},
baseUrl: 'http://localhost:8000',
framework: 'jasmine2',
jasmineNodeOpts: {
onComplete: null,
isVerbose: true,
showColors: true,
includeStackTrace: true,
defaultTimeoutInterval: 30000
}
};
This is the log from the terminal:
angular-seed#0.0.0 preprotractor /var/www/angularjs-seed
npm run update-webdriver
angular-seed#0.0.0 preupdate-webdriver /var/www/angularjs-seed
npm install
angular-seed#0.0.0 postinstall /var/www/angularjs-seed
bower install
angular-seed#0.0.0 update-webdriver /var/www/angularjs-seed
webdriver-manager update
selenium standalone is up to date.
chromedriver is up to date.
angular-seed#0.0.0 protractor /var/www/angularjs-seed
protractor test/e2e-tests/protractor.conf.js
Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://192.168.1.185:38493/wd/hub
Started
.F
Failures:
1) The Single Page Blogger E2E Test Should redirect to #/posts/1/sample-title1
Message:
Failed: undefined is not a function
Stack:
TypeError: undefined is not a function
at Object.<anonymous> (/var/www/angularjs-seed/test/e2e-tests/specs/scenarios.js:21:19)
at runMicrotasksCallback (node.js:337:7)
at process._tickCallback (node.js:355:11)
From: Task: Run it("Should redirect to #/posts/1/sample-title1") in control flow
at attemptAsync (/var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1819:24)
at QueueRunner.run (/var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1774:9)
at /var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1801:16
at /var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1745:9
at Array.forEach (native)
From asynchronous test:
Error
at Suite.<anonymous> (/var/www/angularjs-seed/test/e2e-tests/specs/scenarios.js:18:3)
at addSpecsToSuite (/var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:743:25)
at Env.describe (/var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:713:7)
at jasmineInterface.describe (/var/www/angularjs-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:3219:18)
at Object.<anonymous> (/var/www/angularjs-seed/test/e2e-tests/specs/scenarios.js:5:1)
2 specs, 1 failure
Finished in 1.679 seconds
Shutting down selenium standalone server.
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
npm ERR! Linux 3.13.0-62-generic
npm ERR! argv "node" "/usr/local/bin/npm" "run" "protractor"
npm ERR! node v0.12.7
npm ERR! npm v2.13.4
npm ERR! code ELIFECYCLE
npm ERR! angular-seed#0.0.0 protractor: `protractor test/e2e-tests/protractor.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-seed#0.0.0 protractor script 'protractor test/e2e-tests/protractor.conf.js'.
npm ERR! This is most likely a problem with the angular-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! protractor test/e2e-tests/protractor.conf.js
npm ERR! You can get their info via:
npm ERR! npm owner ls angular-seed
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /var/www/angularjs-seed/npm-debug.log
Line 22:19 points to then in posts.first().then(function(postElem) {});.
I am not understanding what's the mistake in the code as I have checked in one of the stack overflow posts and also through the protractor api guide that we can chain first().then <-- like this. Can anyone please help me with this?

There was a breaking change. There is no element.then() since 2.0.0.
Use instead:
posts.first().element(by.tagName('a')).click();
expect(browser.getCurrentUrl()).toMatch('/posts/1/simple-title1');