Save protractor allure html report locally - directory

I'm using Protractor and jasmine-allure-reporter. After executing test I am getting the XML files in 'allure-results', from there I am generating the HTML report using the command "allure serve allure-results". While executing this command the html report is getting generated in the 'Temp' folder (%Temp%\8691932647422029\allure-report). I want to generate/save this report locally, how can I do that. Because after the test run I may have to share the html report. Could you please help me on this.
Below is the Config.js part for allure-report
onPrepare: function() {
var AllureReporter = require('jasmine-allure-reporter');
jasmine.getEnv().addReporter(new AllureReporter());
jasmine.getEnv().afterEach(function(done){
//allure.addEnvironment(Path, 'Chrome'),
browser.takeScreenshot().then(function (png) {
allure.createAttachment('Screenshot', function () {
return new Buffer(png, 'base64')
},'image/png')();
done();
})
});
}

Please follow this setup for generating output in your local directory. 'Allure Command Line Tool' will help you to generate allure report.
Install it by running this command npm install allure-commandline --save-dev
After that, add "posttest": "allure generate allure-results --clean -o allure-report" section into your package.json. So when running the test by using npm test , the command mensioned in the posttest will generate report in your local directory. You can refer a sample script section of package.json file below.
"scripts": {
"pretest": "rm -rf allure-report",
"test": "protractor conf.js",
"posttest": "allure generate allure-results --clean -o allure-report || true"
}
In the posttest section you are refering the output directory location after --clean -o part.
Also change your conf.js file like this and add local directory path in resultsDir section to store generated xml files.
onPrepare: function () {
var AllureReporter = require('jasmine-allure-reporter');
//allure report
jasmine.getEnv().addReporter(new AllureReporter({
resultsDir: 'allure-results'
}));
/*
* It will take screenshot after each Jasmine function 'it'
*/
jasmine.getEnv().afterEach(function (done) {
browser.takeScreenshot().then(function (png) {
allure.createAttachment('Screenshot', function () {
return new Buffer(png, 'base64')
}, 'image/png')();
done();
})
});
}
The current setup will generate all the xml files in allure-results and html report in allure-report folder(both are in root directory).
|-allure-results
|-allure-report
|-node_modules
|-src-|-conf.js
|-package.json
Please refer a sample project in github

Related

Getting TestCafe to recognize dotenv variables

I might be mixing up concepts, but I'd read that it's possible to get TestCafe to recognize variables of the form process.env.MY_COOL_VARIABLE. Also for my Vue.js frontend (built using Vue-CLI, which uses dotenv under the hood), I found I could make a file in .env.test for test values like so:
VUE_APP_MY_COOL_VARIABLE
which I would then access in my test code like so:
test('my fixture', async (t) => {
...
await t
.click(mySelector.find('.div').withText(process.env.VUE_APP_MY_COOL_VARIABLE));
...
}
However, I get the following error:
"text" argument is expected to be a string or a regular expression, but it was undefined.
Seems like my environment variables aren't getting picked up. I build my code like so: vue-cli-service build --mode test.
TestCafe doesn't provide support for .env files out of the box. You can create a test file that will require the dotenv module and load your configuration file:
// enable-dotenv.test.js
require('dotenv').config({ path: '.my.env' });
testcafe chrome enable-dotenv.test.js tests/
Here's how I solved my issue. When debugging, I did a console.log of process.env and noticed that the variable that vue recognizes wasn't visible during testcafe's run. From our package.json:
"test:ui:run": "VUE_APP_MY_COOL_VARIABLE=ui-test yarn build:test && testcafe -a ../ui-test-server.sh chrome",
Also this bit of javascript is run by both the test and mainline code, so I had to use a conditional.
import * as dotenv from 'dotenv';
if (process.env.npm_package_scripts_test_ui_run) { // are we running a testcafe script
dotenv.config({ path: '.env.test' });
}
Have you tried process.env[VUE_APP_MY_COOL_VARIABLE]? It's worth noting that everything in dotenv comes back as a string so you may need to do the casting yourself. For example:
function getEnvVariableValue(envVariable: string) {
// Cast to boolean
if (envVariableValue.toUpperCase() === "TRUE") {
return true;
} else if (envVariableValue.toUpperCase() === "FALSE") {
return false;
// Cast to number
} else if (!isNaN(Number(envVariableValue))) {
return Number(envVariableValue);
} else {
return envVariableValue;
}
}
You can also try creating a .env file in the root folder to see if it picks it that way. I use dotenv in my project directly by including it in the package.json as a dependency and it works this way.

Why is JAX shell not seeing the command that is on the global path?

When I call my script that then calls my shell command I'm getting an error:
Error: sh: excel: command not found
I'm using the following code in my SCPT file:
var app = Application.currentApplication();
app.includeStandardAdditions = true;
var test = app.doShellScript('excel');
When I run excel in Terminal it sees it just fine. Why is shell not finding the command?
Sounds like a search path problem. It's opening a new Shell instance, and the environment variables, including search path settings, are not automatically exported.
(() => {
// standardAdditions :: () -> Library Object
const standardAdditions = () =>
Object.assign(
Application.currentApplication(), {
includeStandardAdditions: true
}
);
return standardAdditions().doShellScript('echo $PATH');
})()
Try the echo $PATH command both in .doShellScript and in the Terminal, and look for differing output.
Two options would be:
Set the path that you want with a line like export PATH=some/path/or/other:$PATH, or just
provide a full path to the app when you launch it.

How to get gulp to watch my sass file changes and create one css file?

I am working on an application that is developed using ASP.NET MVC 5 framework. I am using Visual Studio 2013 to write my application.
I need to utilize gulp to automate the process of compiling my sass file and publishing them into a bundle.css file.
To do that, here is what I have done
Installed NodeJs on my machine
Installed gulp globally using npm install -g gulp
Created a file called gulpfile.js in the root project of the project
created the package.json file using npm init command
Added gulp to my development dependencies by executing the following command from the root of my project npm install gulp --save-dev
Added the code below to my gulpfile.js
From the command console I fired gulp command which displayed the following info
Using gulpfile ...gulpfile.js
Starting 'watch'...
Finished 'watch' after 21 ms
Starting 'default'...
Finished 'default' after 31 µs
But when I write code into my ~/Assets/Sass/**/*.sass nothing gets saved into ~/Public/Css/bundle.css as expected
Here is what gulpfile.js looks like
const gulp = require('gulp'),
sass = require('gulp-ruby-sass');
// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);
// listener task
gulp.task('watch', function(){
//Watch any change in the sass directory and trigger the "compileSass" for every save
gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']);
});
// Task to compile the sass files
gulp.task('compileSass', () =>
sass('~/Assets/Sass/**/*.sass')
.on('error', sass.logError)
.pipe(gulp.dest('~/Public/Css/bundle.css'))
);
What am I missing here? How can I get the watched to watch and fire the tasks after each save?
Updated
I switch from using gulp-ruby-sass plugin into using gulp-scss. Now, I got the task to run every time I save a scss file but for some reason it wont update the destination file.
Here is how my gulpfile.js file looks like
const gulp = require('gulp'),
scss = require('gulp-scss');
// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);
// listener task
gulp.task('watch', function(){
//Watch any change in the "Sass" directory and trigger the "compileScss" for every save
gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']);
});
// Task to compile the "Scss" files
gulp.task('compileScss', function () {
gulp.src('./Assets/Scss/**/*.scss')
.pipe(scss({ "bundleExec": true }))
.pipe(gulp.dest('./Public/Css/bundle.css'));
});
You may be missing the require for gulp-watch:
var watch = require('gulp-watch');
From gulp-watch:
watch(glob, [options, callback]) Creates a watcher that will spy on
files that are matched by glob which can be a glob string or array of
glob strings.
Returns a pass through stream that will emit vinyl files (with
additional event property) that corresponds to event on file-system.
You have to provide a function. Meaning that a task name is not sufficient.
Try using gulp-batch to run some tasks withing your watch:
npm install gulp-batch --save-dev
Your watch task:
// listener task
gulp.task('watch', function(){
var watch = require('gulp-watch');
var batch = require('gulp-batch');
//Watch any change in the sass directory and trigger the "compileSass" for every save
watch('~/Assets/Sass/**/*.sass', batch(function (events, done) {
// run your compileSass task
gulp.start('compileSass', done);
}));
});
Edit:
You can run tasks from Visual Studio 2015 in the "Task Runner Explorer" window.
However, if you have a prompt running gulp-watch it should have the same effect and run your compile task when it detect changes to the files that you are watching regardless of where they were edited.
Basic things to check are folder location existence, file names, and read/write permissions.
Example gulpfile.js that uses gulp.watch and gulp-load-plugins in a Zurb Foundation 6 project using (foundation-cli).
Note that .pipe(gulp.dest('../your/path/css'));
does not include a ~ or specify a file name or extension. It only specifies a path. The file placed in that path is given the default name of style.css since the source files name is style.scss. See line gulp.src('scss/style.scss').
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
// Multiple locations of SCSS to combine
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/style.scss') // SCSS Source file
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'compressed' // if css compressed **file size**
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('../your/path/css')); // OUTPUT Destination
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']); // FILES to Watch
});

where do i put config for plugin when using gruntfile-gtx

So, I have installed single page app based on npm/bower/grunt/angular.js
In the root I have gruntfile.js with this code
module.exports = function(grunt) {
var gtx = require('gruntfile-gtx').wrap(grunt);
gtx.loadAuto();
var gruntConfig = require('./grunt');
gruntConfig.package = require('./package.json');
gtx.config(gruntConfig);
// We need our bower components in order to develop
gtx.alias('build:standardversion', [
'compass:standardversion',
...
]);
gtx.finalise();
So now I have to install grunt-cache-bust plugin from here https://github.com/hollandben/grunt-cache-bust
I installed it with npm and now I don't know where to write a task for this.
Please tell me or give me a link to understand it properly
In the directory containing GruntFile.js, create a "grunt" folder if it doesn't exist.
In the "grunt" folder, create a file "cacheBust.js"
sample cacheBust.js:
module.exports = {
assets: {
files: {
src: ['index.html', 'contact.html']
}
}
}
To run cacheBust from the command line: "grunt cacheBust"

Installing/Using Phantom.js with Meteor

I'm currently struggling with using Phantom.js with a Meteor app of mine. I have it installed on my local machine (Ubuntu 14.04), it's added to my path (I can run it from my terminal), I also ran and installed the smart wrapper for Phantomjs: mrt add phantomjs.
I can see that in my .meteor > local > build > programs > server > npm directory there is a phantomjs directory.
My question is, how do I actually use Phantom? I'm attempting to scrape from the server side of things. I've tried the following things (using coffeescript):
phantom = Npm.require "phantomjs"
phantom = Npm.require "phantom"
phantom = Meteor.require "phantomjs"
phantom = Meteor.require "phantom"
(I've also tried using capital "P's")
All attempts in this way yield: Error: Cannot find module 'phantomjs'
Any clarification would be greatly appreciated!
[EDIT] now meteor is supporting npm packages out of the box: https://guide.meteor.com/using-npm-packages.html#installing-npm
Here is the procedure for Meteor > 1.0.0
Add the npm package
meteor add meteorhacks:npm
Run meteor to let the npm package to pre-initialise
meteor
A file packages.json has been created at the root. Edit it to:
{
"phantomjs": "1.9.13"
}
To use phantom into your server side code:
var phantomJS = Meteor.npmRequire("phantomjs");
Bonus: an example of usage (thanks Ben Green), put anywhere in your code:
if (Meteor.isServer) {
Meteor.startup(function () {
var phantomjs = Meteor.npmRequire('phantomjs');
var spawn = Meteor.npmRequire('child_process').spawn;
Meteor.methods({
runTest: function (options) {
command = spawn(phantomjs.path, ['assets/app/phantomDriver.js']);
command.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});
command.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});
command.on('exit', function (code) {
console.log('child process exited with code ' + code);
});
}
});
Meteor.call("runTest");// run the test as soon as meteor server starts
});
}
Create the phantomjs script file ./private/phantomDriver.js and edit it to
var page = require('webpage').create();
page.open('http://github.com/', function (){
console.log('Page Loaded');
page.render('github.png');
phantom.exit();
});
The phantomjs wrapper in atmosphere doesn't look like it produces anything that works.
But you can easily add npm packages useing the npm meteorite package
First add the npm package to your project
mrt add npm
Then add the required phantomjs version to the packages.json file
{
"phantomjs": "1.9.7-6"
}
Then use the following code to require the phantomjs npm module:
var phantomjs = Meteor.require('phantomjs');

Resources