How to run Protractor - angularjs

I'm new to AngularJS. I'm trying to learn and do some end-to-end tests with Protractor. I've been going through the information provided here. I'm stuck when I get to the part that says "Run with protractor myConf.js".
Is protractor a command-line program? Or what? What I'm trying to identify is, under what environment do I need to run "protractor myConf.js" within. I do NOT want to install protractor globally. I would like to run the module in a local context. Is that an option?
Thank you,

You need to run it through node.
So from the base of your project;
node node_modules\protractor\bin\protractor test\myConf.js

You can install Protractor globally via:
$ npm install -g protractor
Afterwards it should be available on the command line (Windows/Linux)
$ protractor protractor.conf.js
To install just for the current project:
$ npm install protractor --save-dev
It can be run via the node_modules like this (Windows/Linux):
$ ./node_modules/.bin/protractor protractor.conf.js
You can add it to your package.json for easier running:
"scripts": {
"test": "./node_modules/.bin/protractor protractor.conf.js"
}
Then later:
$ npm test

These are the getting started docs:
https://github.com/angular/protractor/blob/master/docs/getting-started.md
You need to have node.js installed on your machine, as well as the npm node package. Once you have those two things installed you can follow the rest of the directions in the docs above.
It should only take about 5-10 mins of installation before you have Protractor up and running. Let me know if you're still stuck.

You should use npm-run-all (or concurrently, parallelshell), because it has more control over starting and killing commands.
Once npm-run-once, protractor, http-server installed locally, you can modify package.json like that:
scripts: {
"webdriver-start": "./node_modules/protractor/bin/webdriver-manager update && ./node_modules/protractor/bin/webdriver-manager start",
"protractor": "./node_modules/protractor/bin/protractor ./tests/protractor.conf.js",
"http-server": "./node_modules/http-server/bin/http-server -a localhost -p 8000",
"python-example": "python -m SimpleHTTPServer",
"test1": "npm-run-all -p -r webdriver-start http-server protractor",
"test2": "npm-run-all -p -r webdriver-start python-example protractor"
}
-p = Run commands in parallel.
-r = Kill all commands when one of them finishes with zero.
Running npm run test1 will start Selenium driver, start http server (to serve you files) and run protractor tests. Once all tests are finished, it will close the http server and the selenium driver.

Here is example using Typescript, but if it is not your case, you can simply remove all 'tsc' stuff. Configure your package.json scripts section to look like this:
"scripts": {
"postinstall": "node node_modules/protractor/bin/webdriver-manager update",
"pretest": "npm run tsc",
"test": "npm run eslint && npm run protractor",
"eslint": "node node_modules/eslint/bin/eslint.js '*.js' 'test/**/*.js' 'test/**/*.ts'",
"protractor": "node node_modules/protractor/bin/protractor",
"start": "node node_modules/protractor/bin/webdriver-manager start",
"tsc": "node node_modules/typescript/bin/tsc"
}
and run npm start in one terminal and npm test in another one.

I have a code generator that creates an empty protractor project. The instructions should be easy to follow:
https://npmjs.org/package/generator-protractor

I think the best way to run protractor is by installing it local to your project and then run it with npm scripts.
Backing up one step, npm itself uses a hierarchy based on the file system to find executable modules. If you type npm bin npm will tell you the first place it is going to look to find something executable (e.g. [project]/node_modules/.bin). If you include protractor in your package.json, when you do an npm install, protractor will add a symlink in your .bin directory for both protractor and webdriver-manager.
There are a number of ways you can use this information to execute protractor. The ~~correct~~ best way I think though is to use npm scripts. When you use npm scripts npm will automatically load protractor from the local .bin directory.
Here's an example
package.json
{
"name": "awesomeapp",
"version": "1.0.0",
"devDependencies": {
"protractor": "latest"
},
"scripts": {
"test-e2e": "protractor protractor.conf",
"selenium": "webdriver-manager start"
}
}
So now you can run your selenium server with npm run selenium then run your protractor tests with npm run test-e2e.
This is also cross platform so if you are using mac or Windows you'll be covered either way.
NOTE: You can do stuff in these scripts that are not cross platform (npm docs) so if being cross platform is important to you and you want to do anything fancy I would recommend using shelljs.
P.P.S. Didn't want to clutter the point above but npm also has pre and post hooks so you can update and run selenium with one command.
"scripts": {
"preselenium": "webdriver-manager update",
"selenium": "webdriver-manager start"
}
Theoretically Windows should support && so you could also do this but ymmv...
"scripts": {
"selenium": "webdriver-manager update && webdriver-manager start"
}

If you have any suite in config.js try this
suites: {
TESTCASES_RELATED_TO_SUITE1: ['TEST_CASES/Suite1/**/*spec.js'],
TESTCASES_RELATED_TO_SUITE2: ['TEST_CASES/Suite2/**/*spec.js']
},
The tests can be executed from command line as below:
<path>protractor config.js --suite TESTCASES_RELATED_TO_SUITE1
This will only execute one test suite.

Yes, it is possible to run protractor by using the following command :
npm install protractor
and you can then access it by :
./node_modules/.bin/protractor conf.js
For more info visit : Protractor - end-to-end testing for AngularJS . This a very good place to start.

I'm using IntelliJ for protractor tests. Also note that for this, IntelliJ Ultimate Edition is required along with node.js and protractor installations.
You can find the details here Protractor Setup on IntelliJ

First you need to install the node.js from https://nodejs.org/en/download/ and then install protractor using "npm install -g protractor". This will install the protractor globally. I faced issues when I installed protractor locally. Better try to install it globally.
Or you can provide all your dependencies in the package.json file like below:
{
"dependencies": {
"protractor": "4.0.3",//any latest versions of these.
"protractor-jasmine2-screenshot-reporter": "0.3.2",
"jasmine-terminal-reporter": "1.0.3"
},
"scripts": {
"postinstall": "node node_modules\\protractor\\bin\\webdriver-manager update"
}
}
There are dependencies for the reporting of the test results as well in the above package.json file. And you need to run webdriver-manager update. It is a helper tool to get an instance of a selenium server running.
You can put everything in the package.json file and run "npm install" to install all the dependencies. This will create a "node_modules" folder for you.
Now create a configuration file ex: conf.js. This can be something like this.
// An example configuration file. There are the reporters which are used to give the test results. There are many reporters. You can use which ever is convenient. The below reporters are for example to show how to configure them.
var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');
var JasmineTerminalReporter = require('jasmine-terminal-reporter');
//To get the Current Date and Time. To make the test output more clear, you can give date.
var currentDate = new Date(),
currentHoursIn24Hour = currentDate.getHours(),
month = currentDate.getMonth() + 1,
totalDateString = currentDate.getDate() + '-' + month + '-' + currentDate.getFullYear() +
'-' + currentHoursIn24Hour + 'h-' + currentDate.getMinutes() + 'm';
var htmlReporter = new HtmlScreenshotReporter({
pathBuilder: function (currentSpec, suites, browserCapabilities) {
'use strict';
return currentSpec._suite.description + totalDateString + '/' + browserCapabilities.get('browserName') + '/' + currentSpec.description;
},
dest: 'TestOutput',
cleanDestination: false,
showSummary: true,
showQuickLinks: true
});
exports.config = {
directConnect: true,//If you make this flag true, it connects the browser directly.
capabilities: {
'browserName': 'chrome'
},
//this is to bring up the test dependencies. Some kind of setup. run once
beforeLaunch: function () {
'use strict';
return new Promise(function (resolve) {
htmlReporter.beforeLaunch(resolve);
});
},
//once per capabilities.
onPrepare: function () {
jasmine.getEnv().addReporter(htmlReporter);
jasmine.getEnv().addReporter(new JasmineTerminalReporter({
isVerbose: true,
showColors: true
}));
},
//A callback function called once all tests have finished running and
// the WebDriver instance has been shut down.
afterLaunch: function (exitCode){
return new Promise(function(resolve){
htmlReporter.afterLaunch(resolve.bind(this, exitCode));
});
},
getPageTimeout: 120000,
allScriptsTimeout: 120000,
specs: ['../TestScripts/*.js']//This contains the test files.
};
Once you are done with the setup, create a test file. The tests are written using jasmine framework which contains "describe" and "it". "describe" will hold "it " which has the tests in it. You can go through this: http://www.protractortest.org/#/
Now run the test with "protractor conf.js". This will run the tests and generate the reports as well in the TestOutput folder which we have set up in the configuration file.

Here we have a complete beginners tutorial: Protractor for beginners video

Getting Started
We looked upon Protractor with Chrome headless, multiple browsers integrating with Sauce Labs.
Lets look at the test automation execution reports, how we can integrate it.
awesome QA
Pre requisite
npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.
1. Install nodejs
First, install protractor globally on your system:
install protractor as a development dependency:
2. run npm install -g Protractor
3. run npm install protractor --save-dev
To install and start the standalone Selenium Server manually, use the webdriver-manager command line tool, which comes with Protractor.
This will install the server and ChromeDriver.
4. run npm install -g webdriver-manager
5. run updated webdriver-manager
This will start the server. You will see a lot of output logs, starting with INFO. The last line will be 'Info - Started org.openqa.jetty.jetty.Server'.
5. run start webdriver-manager
Leave the server running while you conduct your test sessions.
In your config file, set seleniumAddress to the address of the running server. This defaults to http://localhost:4444/wd/hub.
6. Finally run your script - Protractor<location of your config file>conf.js
Build and Test
Checkout github : https://github.com/shahing/Protractor-Web-Automation

Related

What exactly is the 'react-scripts start' command?

I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here

How to add flowtype to an ejected create-react-app?

We are working on a previously ejected create-react-app and now want to add flowtype.
We have followed the guide at: https://flow.org/en/docs/tools/create-react-app/
Should that work for an ejected app?
This has unfortunately caused the webpack-dev server launched with yarn start to stop automatically reloading on file updates.
Additionally, after adding // #flow to some files there is no output or indication of flow enforcing type checking.
Will we need to manually update the webpack configs?
Heres the package.json scripts
"scripts": {
"start": "node scripts/start.js",
"build": "yarn build-client && yarn build-server",
"build-client": "node scripts/build.js",
"build-server": "./node_modules/.bin/webpack --config ./config/webpack.server.config.js",
"test": "node scripts/test.js --env=jsdom",
},
The output for running yarn start is:
Compiled successfully!
You can now view cra in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.1.65:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
The doc you linked tells you how to install the flow-bin and to make a configuration file but don`t tells how to launch it.
Flow is separated tool that should be launch by own command (depends on how you wanna run it):
if you want to check types check manually, you need to add npm command on the "scripts" section of your package.js: "example-comand-flow": "flow". Then call it by npm run example-comand-flow and you`ll get errors directly on a terminal you running the script.
if you wanna have continuing type checking, you should find a manual how to configure it in your IDE. For example, in WebStorm you should go Preferences -> Languages & Frameworks -> JavaScript and set JavaScript language version to Flow and specify flow executable.

npm test does not detect new test file changes in jenkins

Jenkins/jest and CI ,
I have created a react APP using create-react-app and I use JEST for testing and I did some new changes in a file created app.test.js and committed to git-hub- hooked it with jenkins -when I run npm test in the local machine the tests are run fine and they all pass ..
BUT when i run the jenkins pipeline script it says the following :
No tests found related to files changed since last commit.
Press a to run all tests, or run Jest with --watchAll.
Watch Usage
› Press a to run all tests.
› Press p to filter by a filename regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
I have tried changing app.test.js -created a new file commit changes and then created a new pipeline in jenkins and tried again ( I have also tried these discussed here :https://github.com/facebookincubator/create-react-app/issues/930) but I still get the above error : my pipeline script is shown below:
node{
stage "CI"
git 'https://github.com/NaveenDK/mentalshortcuts.git'
bat "npm install"
stage " Unit testing"
bat "npm test"
}
def notify(status){
emailext (
to: "dd#dd.com",
subject: "${status}: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]'",
body: """<p>${status}: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]':</p>
<p>Check console output at <a href='${env.BUILD_URL}'>${env.JOB_NAME} [${env.BUILD_NUMBER}]</a></p>""",
)
}
node {
notify("Deploy to staging?")
}
input 'Deploy to Staging?'
node {
bat "npm run-script build"
}
Any help any links anything at all would be great!
The tests did not run on jenkins as Jenkins was running on Windows, and Windows doesn't support glob, which is src/**/*.js.
this problem was not encountered when the project was build on Jenkins that was installed on a Linux OS!
I also faced the same issue. As mentioned above by Naveen, Windows doesn't support glob, which is src/**/*.js.
That's why in Jenkins configuration, change the label to Linux. Check here to see a preview.
Jenkins configuration
And then in the build section, add the following line as shell commands:
npm install
npm run build
CI=true npm test
Always run npm install first. It will install all the packages.
Then run npm run build to build the app
In the end, make sure to write CI=true npm test. It will run test cases only once. If you write npm test instead, then it will run the test and go into watch mode forever.
I hope this helps.
I encounter this problem on my local machine like this,
"test": "jest --watchAll"

Newbie to Selenium E2E with React

I created a boilerplate React project, packages.json has the usual suspects:
prestart
start
list
test
etc.
I am using Selenium for my E2E framework. I have the following test:
it('should launch a browser', () => {
const By = webDriver.By;
let driver = new webDriver.Builder()
.forBrowser('chrome')
.build();
// verify Continue button exist on page
driver.navigate().to('http://localhost:3000').then(() => driver.findElement(By.id('submitButton')).getAttribute('value'))
.then(buttonValue => expect(buttonValue).toEqual('Continue'));
});
If I do npm start, my site launches and my E2E launches an additional Chrome browser and navigate to my running site: localhost:3000. The test succeeds.
My question is, how do I run my E2E separately, without the need to my site side by side using npm start.
I am newbie to React and Selenium, in case I am missing a lot of information on this post, I apologize in advance.
Well, since you didn't find the time to update the question information with the NPM "scripts" object, then I'll try to give it a shot in the dark.
First of all, due to your wording, I can interpret your question two ways:
a.) you want to run your E2E tests separately, w/o your server running (which is started via npm start);
b.) you want to run your E2E tests via npm start, without triggering your server from starting;
a.) If you want to run your scripts separately, seeing as you are using Mocha, then you can trigger them via: ./node_modules/.bin/mocha <pathToTests>/<testFile>.
Now, since you stated in your question that you're using npm test script, then that should be the best switch to bind your E2E tests execution to:
package.json (Scripts object):
"scripts": {
"test": "mocha --reporter spec <pathToTests>/<testFile>",
"start": "node <yourServerName>.js"
},
Please note that mocha <pathToTests>/<testFile> is equivalent to ./node_modules/.bin/mocha <pathToTests>/<testFile>, because NPM looks for binaries inside node_modules/.bin and when Mocha was installed, it installed it into this directory.
Note: Many packages have a bin, or .bin section, declaring scripts that can be called from NPM similar to Mocha. If you want to find out what other binaries you can run that way, just issue a ls node_modules/.bin.
b.) In this care, I think your issue might be due to NPM defaulting some script values based on package contents. Specifically, if you have a server.js file in the root of your package, then npm will default the start command to server.js.
So if you're starting your E2E tests via npm start, having this ("start": "mocha <pathToTests>/<testFile>") in your package.json and there is a server.js file in the root of your package, then npm will default the start command to node server.js.
In which case, you could either move your server script to another place in the project, or change the switch you're using to trigger the E2E tests (see section b.)).
Hope this solves your problem and if not, looking forward for that package.json "scripts" object so we can really see what's up. :)
Cheers!

React tutorial - how do I start the node server for a reactJs application?

I'm just starting the react.js tutorial, I've downloaded the files and then it mentions:
"Follow your progress by opening http://localhost:3000 in your browser (after starting the server). "
I know this may sound stupid, (bear with me since I'm a beginner with React) but how do I start the server in this instance?
Thanks.
Marc
Pretty solid chance it's npm start from the project root.
Properly packaged modules will have some node scripts configured in package.json. It's customary to use start as the script to run the dev environment, though some might use build, dev, or other names.
Here's official installation process: link, and officially recommended tutorials
# install react cli
npm install -g create-react-app
# create app
create-react-app my-react-app-name
# go to project folder
cd my-react-app-name
# install dependencies
npm install
# start live server
npm start
output:
$ You can now view my-react-app-name in the browser.
$ Local: http://localhost:3000/
$ On Your Network: http://192.168.0.105:3000/
$ Note that the development build is not optimized.
$ To create a production build, use npm build.
You can run any one of the below mentioned commands to start the node server for your ReactJS application:
npm run-script start
npm run start
npm start
All the above commands are equivalent but people prefer the third one as it is the shortest to type on keyboard.
The start parameter in these commands maps to the start key present under scripts configuration present in package.json file of any ReactJS application. Here is a sample package.json file of my hello-world application:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
You can see that react-scripts start is written in front of start key. So react-scripts start command will get fired when we run any of the three commands which I had enlisted in the beginning e.g. npm start.
I used Node to run the server. The steps I followed are:
I downloaded the zip package from the Running a server section
here
I had the link open: http://localhost:3000/
I opened up Node.js Command Prompt and navigated to the downloaded
zip project. From Node example here:
Just type the commands in the example:
First npm install and then
node server.js.
See the screen shot below:
When I refresh the localhost web page I see the following:
Sounds like you're following the official React tutorial, in which case the instructions to start the various included server implementations are here.

Resources