Protractor tests reports using jasmine-reporters - angularjs

I'm trying to export protractor test results to xml files, for that I have installed jasmine-reporters using
npm install -g jasmine-reporters.
Protractor version is Version 2.1.0.
jasmine-reporters version 2.0.7
This is my protracotr config file:
exports.config = {
seleniumAddress: 'http://localhost:4455/wd/hub',
capabilities: {
'browserName': 'chrome'
},
specs: [
'student_spec.js'
],
onPrepare: function() {
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter(null, true, true, '/test/e2e/JasmineReporter')
);
},
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 50000
}
};
When I run the protractor, I am getting this error
Error: Cannot find module 'jasmine-reporters'
Help me, where I'm doing wrong.

Make sure you have installed jasmine-reporters and the proper path of jasmine-reporters is provided. If it was installed properly then run the below command to see if you get the version of it -
npm list -g jasmine-reporters
If there was a problem installing it, use below command to install it which is compatible with Jasmine 2.x versions -
npm install --save-dev jasmine-reporters#^2.0.0
Update your conf.js file to include proper global scope variable jasmineReporters as mentioned in the package file -
framework: 'jasmine2',
onPrepare: function() {
var jasmineReporters = require('path_of_installed_jasmine-reporters-plugin');
//update proper path, in my case its ('/usr/local/lib/node_modules/jasmine-reporters')
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter(null, true, true, '/test/e2e/JasmineReporter')
);};

Did you try:
var jasmineReporters = require('jasmine-reporters').jasmineReporters;
?
I think something like that should work.
Best regards

I also got the same issue as I installed jasmine locally.But when I installed jasmine as Globally it works fine for me.
npm install –g jasmine-reporters#^2.0.0
then,
npm list -g jasmine-reporters
After that run the conf.js again as mentioned above

Related

Error Could not resolve entry module React + Rollup

I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.

Run distribution code using grunt

i am new in gruntjs. I have installed grunt. Also have app. I minified the code using grunt build. It created the /dist directory in which all minified versions of file is there.
How to run this distribution code(/dist) for production using grunt. Not able to figure it out. grunt serve command take /app directory by default
Use a package like grunt-contrib-connect (enter link description here). First install it:
$ npm install --save-dev grunt-contrib-connect
In your Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-connect');
// ...
// In your config object
grunt.initConfig({
// ...
connect: {
dist: {
options: {
port: 8000,
base: 'dist',
keepAlive: true
}
}
}
// ...
});
Then run your grunt task:
$ grunt connect:dist
And navigate to http://localhost:8000 (or change port in config).
Note: if you use watch, set keepAlive: false.

Connect Karma Runner to Jenkins CI

Help me understand how to connect my Angular-Jasmine-Karma stack to Jenkins. I have an Angular.js web app that I test with Karma (né Testacular) and Jasmine. It looks just like the Angular Tutorial. I want to test it using Jenkins Continuous Integration.
So far I have installed Angular, Jasmine and Karma according to the tutorial. I have installed Jenkins. I can get each working independently. From what I've gleamed, it seems as though Karma should output an XML file that Jenkins ingests, but Karma is not consistently outputting a file, and I do not understand this conceptually. At what point does Jenkins call Karma?
A good answer would outline the pieces needed to do Karma testing in Jenkins.
Just in case, here is my Karma config. It has been mutilated in the name of debugging.
module.exports = function(config){
config.set({
basePath : '../',
files : [
'app/lib/angular/angular.js',
'app/lib/angular/angular-*.js',
'app/js/**/*.js',
'test/unit/**/*.js'
],
exclude : [
'app/lib/angular/angular-loader.js',
'app/lib/angular/*.min.js',
'app/lib/angular/angular-scenario.js'
],
autoWatch : true,
frameworks: ['jasmine'],
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-script-launcher',
'karma-jasmine'
],
reporters : ['dots', 'junit', 'coverage'],
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}
coverageReporter : {
type: 'cobertura',
dir: 'coverage/',
file: 'coverage.xml'
}
});
};
First, you need a karma.conf.js file that lists the following:
reporters: ['progress', 'coverage', 'dots', 'junit'],
junitReporter: {
outputDir: 'karma-results',
outputFile: 'karma-results.xml'
},
browsers: ['PhantomJS'],
singleRun: true
The most important item under the reporters key is junit. This is the add-on that will translate your Karma outputs into an XML file. Your test outputs must be in a specific XML format for Jenkins to parse it. You configure the output location of this XML file using the junitReporter key. In the browsers key, make sure you are specifying PhantomJS since it is most likely your Jenkins server will not have an instance of Chrome or Firefox. The singleRun key makes sure the Karma server is launched before tests are run and shut down when tests are finished.
Next, make sure all of the following node modules are installed on your server by running these commands:
npm install -g karma-cli
npm install -g karma --save-dev
npm install -g phantomjs
npm install -g karma-jasmine --save-dev
npm install -g karma-phantomjs-launcher --save-dev
npm install -g karma-coverage
Visit your Jenkins server through a browser. You can reach your Jenkins server at
http://server-ip-address:8080
Before moving forward, make sure you have the "
Environment Injector Plugin" and "Junit Plugin" installed. Once that is there, click on New Item on the left-hand side of the Jenkins homepage. Have the following parameters set for your job:
The "Properties Content" allows you to assign Jenkins a PATH on your server and allows you to use the karma keyword in the "Command" section below it. The "Command" section tells Jenkins to cd to the folder where your karma.conf.js file resides and start Karma.
If you use the outputDir and outputFile values in my karma.conf.js example above, then you can keep the "Test report XMLs" input value. Otherwise, change that to reflect the new path to where your XML results file will be generated.
Now, whenever you run this job in Jenkins, you'll be able to see whether or not it passed and also the line item results from your tests.
Do you use maven as a build tool? If so, take a look at: https://github.com/eirslett/frontend-maven-plugin. It runs the tests, so Jenkins can show the results.

Protractor E2E Testing Error: Cannot find module 'selenium-webdriver'

Error: Cannot find module 'selenium-webdriver'
I have installed protractor and selenium-webdriver globally using npm install -g protractor webdriver-manager update
var webdriver = require('selenium-webdriver');
describe('modes of failure', function() {
it('should fail to find a non-existent element', function() {
browser.get('index.html#/form');
// Run this statement before the line which fails. If protractor is run
// with the debugger (protractor debug debugging/conf.js), the test
// will pause after loading the webpage but before trying to find the
// element.
browser.debugger();
// This element doesn't exist, so this fails.
var nonExistant = element(by.binding('nopenopenope')).getText();
});
it('should fail to use protractor on a non-Angular site', function() {
browser.get('http://www.google.com');
}, 20000);
it('should fail an assertion', function() {
browser.get('index.html#/form');
var greeting = element(by.binding('{{greeting}}'));
expect(greeting.getText()).toEqual('This is not what it equals');
});
});
You need to install the node module:
npm i selenium-webdriver --save-dev
Did you try to remove the var webdriver = require('selenium-webdriver'); ?
You shouldn't need it, you can access it in your test via browser
browser this is the a wrapper around an instance of webdriver. Used for navigation and page-wide information.
(quoted from Getting started - Protractor docs)
If you've already installed the Selenium standalone server using webdriver-manager update, and started it with webdriver-manager start, all you have to do is to run your tests using
protractor path/to/your/protractor-conf.js
When you type:
webdriver-manager
Into the terminal, the these helpful options appear:
webdriver-manager
Usage: webdriver-manager <command>
Commands:
update: install or update selected binaries
start: start up the selenium server
status: list the current available drivers
Have you tried update, start, or status?
Try using the standalone option:
$ webdriver-manager start --standalone

How to run Protractor

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

Resources