I have done everything as written on https://www.npmjs.com/package/protractor-html-screenshot-reporter, but no HTML or screenshots are saved to folder.
I've installed protractor-html-screenshot-reporter with command:
npm install protractor-html-screenshot-reporter --save-dev
I have then done npm init and saved package.json file, which contains:
...
"devDependencies": {
"jasmine-reporters": "^2.2.0",
"protractor-html-screenshot-reporter": "0.0.21"
},
...
I can also see protractor-html-screenshot-reporter in /node_modules/ folder.
In config file I have the following:
var HtmlReporter = require('protractor-html-screenshot-reporter');
exports.config = {
...
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
onComplete: null,
isVerbose: false,
includeStackTrace: false,
defaultTimeoutInterval: 1000000,
print: function() {}
},
onPrepare: function() {
jasmine.getEnv().addReporter(new HtmlReporter({
baseDirectory: '../reports/screenshots',
takeScreenShotsOnlyForFailedSpecs: true,
docTitle: 'Desk test report',
docName: 'desk_report.html',
preserveDirectory: true
}));
}
}
Now when I run protractor conf.js I don't see any /reports/screenshots folder, HTML report or screenshot created. Help please!
Jasmine allure Reporter is better for reports and screenshots
Below is the code for it:
//conf.js
exports.config = {
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
includeStackTrace: true,
defaultTimeoutInterval: 144000000
},
directConnect: true,
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['/**/Tests/**/*test.js'],
capabilities: { 'browserName': 'chrome' },
onPrepare: function () {
browser.manage().timeouts().implicitlyWait(15000);
var AllureReporter = require('jasmine-allure-reporter');
jasmine.getEnv().addReporter(new AllureReporter({
allureReport: {
resultsDir: 'allure-results'
}
}));
jasmine.getEnv().afterEach(function (done) {
browser.takeScreenshot().then(function (png) {
allure.createAttachment('Screenshot', function () {
return new Buffer(png, 'base64');
}, 'image/png')();
done();
});
});
}
I Hope this solves your problem. Visit the Link for more information.
Related
I have setup a Svelte project and want to use JSON files to use the Svelte i18n package.
Unfortunately I have trouble importing a JSON file.
The needed package for it is installed, but I have no idea why the Typescript aspect of it wouldn't accept it.
I have a minimal repro here.
import App from './App.svelte';
// src/index.js
import pkg from './package.json';
console.log(`running version ${pkg.version}`);
const app = new App({
target: document.body,
props: {
name: "hello"
}
});
export default app;
Importing a JSON file results in the following error message:
(!) Plugin typescript: #rollup/plugin-typescript TS2732: Cannot find module './locale.de.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
//rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '#rollup/plugin-typescript';
import json from '#rollup/plugin-json';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
json({
compact: true
}),
svelte({
dev: !production,
css: css => {
css.write('bundle.css');
},
preprocess: sveltePreprocess(),
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production
}),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
//tsconfig.json
{
"resolveJsonModule": true,
"module": "esnext",
"sourceMap": true,
"extends": "#tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}
I've had the same problems. Adding resolveJsonModule: true in each typescript call in the rollup.config.js solves the issues.
That leads me to the point that the rollup plugin does not merge the tsconfig with overrides in the expected way.
rollup.config.js
typescript({
sourceMap: dev,
inlineSources: dev,
resolveJsonModule: true
})
tsconfig.js
{
"extends": "#tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"lib": ["DOM", "ES2017", "WebWorker"]
},
"esModuleInterop": true,
"resolveJsonModule": true,
"include": ["src/**/*", "src/node_modules/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "", "static/*"],
"types": ["svelte", "#sapper"]
}
Btw. i'am also testeing around with i18n ;).
Could you help me with the html minification code in one line after laravel-mix-pug?
My code is not working now and I don’t know what is the reason:
let mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');
let pretty = true;
if (mix.inProduction()) pretty = false;
mix.js(['src/js/main.js', 'src/js/plugins.js'], 'dist/js/scripts.js')
.sass('src/sass/app.scss', 'dist/css/styles.css')
.options({
processCssUrls: false
})
.pug('src/*.pug', '../dist', {
pug: {
pretty: pretty
}
});
mix.webpackConfig({
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: {
removeComments: true,
collapseWhitespace: true,
minifyJS: true
},
},
},
],
},
});
Just install html-minifier and edit your package.json with laravel-mix scripts like that:
"minify": "html-minifier --input-dir ./dist --output-dir ./dist --file-ext html --collapse-whitespace --remove-comments --process-conditional-comments --minify-js true",
"prod": "npm run production && npm run minify"
After fixing my css/scss compiling I'm now try to run the css on my html file, but I keep getting:
GET http://localhost:8080/dist/css/screen.css 404 (Not Found)localhost/:26
GET http://localhost:8080/source/js/modernizr.js 404 (Not Found)localhost/:28
Now, my paths on my html files is the follow:
<link href="dist/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script type"text/javascript" src="source/js/modernizr.js"></script>
What am I doing wrong? is it an html path issue? or is it a gruntfile.js issue?
something must missing from either the html or gruntFile.js
hope it makes sense
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
config: {
source: 'source/',
dest: 'dist/',
dist: './dist/'
},
connect: {
options: {
port: 8080,
livereload: 35729,
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: '<%= config.source %>html',
port: 8080
}
},
dist: {
options: {
open: true,
base: '<%= config.dest %>',
livereload: false
}
}
},
watch:{
compass:{
options: {livereload: true },
files:['<%= config.source %>**/*.scss'],
tasks:['compass']
},
css: {
options: {livereload: true },
files: ['<%= config.dest %>*.css'],
tasks: []
},
js: {
options: { livereload: true },
files: ['<%= config.source %>js/*.js'],
tasks: ['jshint']
},
images: {
options: { livereload: true },
files: ['<%= config.source %>images/*.*']
},
fontsicons: {
options: { livereload: true },
files: ['<%= config.source %>images/icons/**/*.{svg,eot,woff,ttf,woff2,otf}']
},
livereload: {
// Here we watch the files the sass task will compile to
// These files are sent to the live reload server after sass compiles to them
options: { livereload: true },
files: ['<%= config.source %>html/*']
}
},
compass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['source/sass/*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect:livereload', 'watch', 'compass', ]);
grunt.registerTask('icons', ['webfont']);
};
To get HTTP response from http://localhost:8080 you'll need a http server running on your computer listening on port 8080. If you have no such server running, you will get always 404 error.
E.g. on Node.js the most used is Express: http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm.
With this piece of code you'll get "Hello World" response on http://localhost:8080 and handle the routes /dist and /source:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})
app.use(express.static(path.join(__dirname, 'dist')));
app.use(express.static(path.join(__dirname, 'source')));
var server = app.listen(8080, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
How to configure wallaby for React-redux-es6-typescript-immutable application. I use webstorm editor. My base code is committed here
I tried the following code in wallaby.js, but it throws
ReferenceError: Can't find variable: exports
at src/store.ts:3
module.exports = function (wallaby) {
return {
files: [
'src/*.ts'
],
tests: [
'test/*Spec.ts'
],
compilers: {
'**/*.ts': wallaby.compilers.typeScript({
module: 5, // ES6
target: 2 // ES6
})
},
preprocessors: {
'**/*.js': file => require('babel-core').transform(
file.content,
{sourceMap: true, presets: ['es2015']})
}
}
}
I have more or less the same setup as you. Did you try setting the env variable to node?
My working wallaby.js config file for babel 6 is the following:
module.exports = function() {
return {
files: [
{pattern: "src/**/*.js*"}
],
tests: [
{pattern: "tests/integration/*.js"}
],
env: {
type: "node"
},
preprocessors: {
"**/*.js": file => require("babel-core").transform(file.content, {sourceMap: true, presets: ["es2015"]})
}
};
};
Below is my grunt file, using grunt-sass and grunt-contrib-watch to
compile my Sass. Is it possible to console log the error to chrome?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Sass to CSS
sass: {
app: {
files: [{
expand: true,
cwd: 'wp-content/themes/bones/library/scss',
src: ['*.scss'],
dest: 'wp-content/themes/bones/library/css',
ext: '.css'
}],
},
options: {
sourceMap: true,
outputStyle: 'nested',
imagePath: "../",
}
},
watch: {
sass: {
files: ['wp-content/themes/bones/library/scss/{,*/}*.{scss,sass}'],
tasks: ['sass']
},
options: {
livereload: true,
spawn: false
}
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'watch']);
};