I use Protractor and gulp to test an angular application.
I'm looking for a way to record videos for my Protractor e2e tests so that I can play them back as .mp4 or whatever other forms that can be opened on Windows 10.
Has anyone accomplished this? Could you suggest maybe some useful links or code?
There's an npm package that allows you to record protractor e2e tests using ffmpeg binaries: https://www.npmjs.com/package/protractor-video-reporter
It also generates subtitles with each spec names in the video so you quickly know which test is running and see which one succeeded/failed.
The only thing you need to do is add a new reporter in your protractor-config.js file.
You can either record a window or the whole desktop.
With version 0.3.0 of protractor-video-reporter, I also had to override it's internal jasmineStarted function to be able to rename the outputted video name and extension (as I was unable to play back .mov)
Here's my current config on windows 10:
...
onPrepare: () => {
...
//TODO remove function override to be able to change the single video containing all spec's name when PR merged
//TODO https://github.com/tomyam1/protractor-video-reporter/pull/18
VideoReporter.prototype.jasmineStarted = function() {
var self = this;
if (self.options.singleVideo) {
var videoPath = path.join(self.options.baseDirectory, 'protractor-specs.avi');
self._startScreencast(videoPath);
if (self.options.createSubtitles) {
self._subtitles = [];
self._jasmineStartTime = new Date();
}
}
};
jasmine.getEnv().addReporter(new VideoReporter({
baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
createSubtitles: true,
singleVideo: true,
ffmpegCmd: path.normalize('./node_modules/ffmpeg-binaries/bin/ffmpeg.exe'),
ffmpegArgs: [
'-f', 'gdigrab',
'-framerate', '24',
'-video_size', 'wsxga',
'-i', 'desktop',
'-q:v','10',
]
}));
},
...
You can play with ffmegArgs to fit your needs. Some arguments have to be defined in a certain order, else, if there's an error with the parameters, ffmpeg will silently terminate and no video's will be recorded. When this happens, you can output error messages from ffmpeg process if you enable debugging in this package's VideoReporter.js file :
(node_modules/protractor-video-reporter/lib/VideoReporter.js)
...
function VideoReporter(options) {
var self = this;
debug.enabled = true;
...
On Mac OSX, it seems the bundled ffmpeg binary didn't include qttask or avfoundation, so I had to install it manually with brew :
brew install ffmpeg --with-libass --with-fontconfig
Here's my current config for Mac OSX :
jasmine.getEnv().addReporter(new VideoReporter({
baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
createSubtitles: true,
singleVideo: true,
ffmpegCmd: path.normalize('/usr/local/bin/ffmpeg'),
ffmpegArgs: [
'-f', 'avfoundation',
'-i', '1',
'-pix_fmt','yuv420p',
'-r','24',
'-video_size', 'woxga',
'-q:v','10',
]
}));
Happy e2e recording! :)
I've implemented that using Selenoid + Jasmine Allure Reporter
Selenoid is generating video and you could attach it to the Allure Report as an attachment:
browser.getSession().then(sessionData => {
let sessionID = sessionData.id_;
allure.createAttachment('Video MP4', () => new Buffer("<html lang='en'><body><video width='100%' height='100%' controls autoplay><source src='"
+ "https://<selenoid_host>:5443/video/" + sessionID + ".mp4"
+ "' type='video/mp4'></video></body></html>", 'utf-8'), 'text/html')();
Selenoid is really cool tool and with it I have no more pain at all!
Create your own custom reporter with jasmine and ffmpeg.
Download ffmpeg from https://www.ffmpeg.org/download.html
Here is how I did it
In protractor.conf.js,
let cp = require('child_process');
let ffmpegCmd = 'C:\\Downloads\\ffmpeg.exe'; //Path to your ffmpeg.exe
let ffmpegArgs = ['-y','-framerate','30','-f','gdigrab','out.mov'];
let spw = "";
onPrepare:()=> {
jasmine.getEnv().addReporter({
jasmineStarted: (result)=> {
spw = cp.spawn(ffmpegCmd, ffmpegArgs);
spw.stdout.on('data',function(data) {
});
spw.stderr.on('data',function(data) {
console.error(data)
});
spw.on('close',function(data){console.log(data)});
},
specStarted: (result)=> {
},
specDone: (result)=> {
},
jasmineDone: (result)=> {
spw.kill();
},
suiteDone: (result)=> {
}
})
}
For my case I wanted to start capturing at jasmine start and kill at jasmine end. Depending on your use case, you could decide when you want to spawn ffmpeg or kill it.
If you're looking for recording software, you can get something like Open Broadcaster software which is a free program. With this program you can designate 'scenes' which are portions of your screen, or you can just record the entire main desktop screen. Here is a tutorial on scenes with OBS.
Related
I created a new Vue app using npm init vue#latest and selected Playwright for e2e tests. I removed firefox and webkit from projects in the playwright.config.ts file, so it will only use chromium.
Running npm run test:e2e works fine, the process exists with a success code.
When forcing the tests to fail by modifying the ./e2e/vue.spec.ts file the output is
but the process does not exit with an error code, it still opened browser windows and so CI environments would freeze.
I searched the docs for a specific flag e.g. "headless" and tried --max-failures -x but that didn't help.
How can I tell Playwright to run in headless mode and exit with an error code when something failed?
Since playwright.config.ts already makes use of process.env.CI I thought about replacing reporter: "html", with reporter: [["html", { open: !process.env.CI ? "on-failure" : "never" }]],
but which arguments should I add to the script "test:e2e:ci": "playwright test", to ensure process.env.CI is set?
Update
I tried to run the script inside my CI environment and it seems to work out of the box ( I don't know how it sets the CI environment flag but the pipeline did not freeze )
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Check if e2e tests are passing
run: npm run test:e2e
If any test fails it exists with an error code
It's serving the html report and asking to press 'Ctr+C' to quite.You can disable it using below configuration.
// playwright.config.ts
import { PlaywrightTestConfig } from '#playwright/test';
const config: PlaywrightTestConfig = {
reporter: [ ['html', { open: 'never' }] ],
};
export default config;
Refer - Report Doc
Issue - https://github.com/microsoft/playwright/issues/9702
To add to the answer above, you can set headless: true in the 'use' block of the config which is above the projects block. Anything set at that level will apply to all projects unless you specifically override the setting inside a project specific area:
// playwright.config.ts
import { PlaywrightTestConfig } from '#playwright/test';
const config: PlaywrightTestConfig = {
reporter: [ ['html', { open: 'never' }] ],
use: {
headless: true,
},
projects: [
{
name: 'chromium',
use: {
browserName: 'chromium',
},
},
},
};
export default config;
Under android 10 (Samsung A50), I installed the document viewer plugin to be able to open a pdf that I have on a website.
ionic cordova plugin add cordova-plugin-document-viewer
npm install # ionic-native / document-viewer
When I try to open the pdf, it offers me to open it with google play store or galaxy store.
I would like to know what I am doing wrong, and if there is any way to open the pdf directly, without choosing which program to open it with.
I send used code, and I also inform them that with fileopener it works correctly, except that it asks me if I want to open with the pdf viewer or another program, and I want the opening of the pdf to be direct, without that step of choosing a program.
Ionic CLI : 6.10.0
Ionic Framework : #ionic/angular 4.11.5
#angular/cli : 8.1.3
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
*********************************************
async pdf2() {
const options: DocumentViewerOptions = {
title: 'My PDF',
openWith: { enabled: true},
bookmarks : {
enabled : true
},
search : {
enabled : true
},
autoClose: {
onPause : true
}
}
let path = null;
if (this.platform.is('ios')) {
path = this.file.documentsDirectory;
} else {
path = this.file.dataDirectory;
}
const transfer = this.transfer.create();
transfer.download('https://www.zzzzz.com/site/pdfs/blabla.pdf', path + 'myfile.pdf').then(entry => {
let url = entry.toURL();
this.document.viewDocument(url, 'application/pdf', options);
})
}
thanks!!
I can’t seem to run my e2e tests with protractor. Before I begin here is some background info:
Node: 7.7.4
NPM: 4.1.2.
Angular: 4.1.0
Protractor: 5.1.2
After I ran npm install protractor, I installed and updated web driver and got an update for IE. After I wrote my first test—a simple test to grab the text of the h1 tag on my login page—I attempted to run protractor and got an error: Error: Cannot find module ‘ts-node’ so I went and installed that. Now when I rerun protractor I get a mysterious error I cannot resolve: the specified path does not exist: e2e/tsconfig.e2e.json. What does this mean? My protractor conf.js file looks like this:
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [ //path of specs is relative to location of protractor.conf.js file.
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
//'browserName': 'chrome' ---default
'browserName': 'internet explorer',
'platform': 'ANY',
'version': '11'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
onPrepare() {
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
I tried fooling around with the path under the project parameter, but no luck with that resolving the issue. And my project structure is set up likes this:
Any suggestions? Should I post this as an issue on github? To ts-node? Or protractor? Any suggestions would be appreciated. Please let me know if you need additional context too.
It means it's trying to find tsconfig.e2e.json (the typescript config file for your 'e2e' project) and can't. This part of the config shows the path it's looking for:
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
But it's clear from your directory structure that it isn't there. Given the path to your spec files, I would imagine the line should read:
project: './e2e/tsconfig.e2e.json'
Looking at your project structure though, it could well be:
project: './app/e2e/tsconfig.e2e.json'
In which case, the path to your spec files will probably need changing to match.
I installed jasmine-spec-reporter to replace the default DOT reporter.
Everything is great running, but I want to send the texts I'm seeing in the terminal directly to slack. What is the payload that I should send to slack? and is it possible?
You could use slack-cli to send your test output to slack.
For example, if your test command is jasmine, something like that should do the trick (not tested):
$ jasmine | slackcli -t slack_token -g group_name -c
You should do a custom integration from slack incoming webhook app.
Copy the webhook url which variants on which channel you want to post the output.
Then in protractor conf.js add the following
projectName: ' ',
environment: 'TEST',
slackUrl: 'https://hooks.slack.com/services/T1J252SLS/',
channel: '#autotests'
You could use npm jasmine-slack-reporter package for this.
Before that you should have your slack webHook url.
refer this for incoming slack webhook
Finally update your config file like this.
exports.config = {
seleniumAddress: "http://localhost:4444/wd/hub",
specs: ['todo-spec.js'],
capabilities: {
browserName: 'chrome',
},
onPrepare: function () {
var webRep = require('jasmine-slack-reporter');
browser.getProcessedConfig().then(function (config) {
var browserName = config.capabilities.browserName;
jasmine.getEnv().addReporter(new webRep.WebReporter({
projectName: 'Project 1',
environment: 'Stage',
slackUrl: "YOUR_WEBHOOK_URL",
channel: '#dashboard-standup'
}));
});
},
};
I am writing automation test scripts using Protractor and now I need to set up the CI for this using Jenkins.
Tasks it needs to perform are:
Starting the selenium standalon server.
Starting the test using conf.js file.
Stopping the selenium standalone server.
Can anyone help in this regard?
I created a small bash script to do this.
# start selenium
./node_modules/protractor/bin/webdriver-manager start > /dev/null 2>&1 &
# wait until selenium is up
while ! curl http://localhost:4444/wd/hub/status &>/dev/null; do :; done
# run the build
grunt cibuild --force
# stop selenium
curl -s -L http://localhost:4444/selenium-server/driver?cmd=shutDownSeleniumServer > /dev/null 2>&1
This script is invoked from a free-style project in jenkins (Build > Execute shell)
Then the test result report is generated by reading the protractor test results. Hence, you have to produce junit reports from protractor, (look here) :
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmine.JUnitXmlReporter('xmloutput', true, true));
},
To make the report visible in jenkins i add a post build action in the job: Publish JUnit test result report:
Alternatively, you could run this as a Grunt Task. First install grunt on Jenkins. Install the NPM packages for protractor_webdriver and protractor. Setup the configuration file to point the the node_module path and config file paths.
http://sideroad.secret.jp/articles/grunt-on-jenkins/
Then install protractor node modules. The Gruntfile would look similar to this. I created a test directory where the conf and spec files would be located.
module.exports = function (grunt) {
grunt.initConfig({
protractor_webdriver: {
your_target: {
options: {
path: 'node_modules/protractor/bin/',
command: 'webdriver-manager start'
}
}
},
protractor: {
options: {
configFile: "node_modules/protractor/referenceConf.js", // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
args: {
// Arguments passed to the command
}
},
your_target: {
options: {
configFile: "test/conf.js", // Target-specific config file
args: {} // Target-specific arguments
}
}
}
});
grunt.registerTask('p:test', [
'protractor_webdriver',
'protractor'
]);
});
The newest protractor allows you to run the selenium standalone server directly from the conf.js (or whatever protractor entry point you have).
comment out (or delete) the seleniumAddress: 'http://localhost:4444/wd/hub', line, and replace it with seleniumServerJar: './node_modules/protractor/selenium/latest.jar'.
latest.jar isn't installed by default, I created it as a symlink to the latest version installed via npm install protractor --save. This gives longer life to my conf.js files in the same directory.
Within the ./node_modules/protractor/selenium/ folder I ran ln -s selenium-server-standalone-2.48.2.jar latest.jar
You can use Gulp which is far simpler.
After installing gulp in Jenkins System , you may install the npm dependencies(npm install) & run gulp tasks directly as windows batch command in Jenkins as below:
In the background to make selenium server up and running and providing various other parameters , you may use packages like 'gulp-angular-protractor' in the gulpfile.js as below:
gulpfile.js
'use strict';
var gulp = require('gulp'),
gulpProtractorAngular = require('gulp-angular-protractor'),
gulpStart = gulp.Gulp.prototype.start,
currentStartTaskName;
gulp.Gulp.prototype.start = function (task) {
currentStartTaskName = task;
gulpStart.apply(this, arguments);
};
function executeWebTests(suiteName, appName) {
return gulp.src([])
.pipe(gulpProtractorAngular({
'configFile': './conf.js',
'debug': false,
'autoStartStopServer': true,
args: [
'--suite', suiteName,
'--capabilities.browserName', 'chrome',
'--params.APPNAME', appName,
'--params.SUITENAME', currentStartTaskName,
'--capabilities.platformName', 'Windows'],
keepAlive: false
}))
.on('error', function (e) {
console.log('Ended with below ERROR::',e);
process.exit(1);
})
.on('end', function () {
console.log('Test complete');
process.exit();
});
}
gulp.task('RegressionSuiteTask', function () {
executeWebTests('regressionTests,','Application_Name');
});
conf.js
suites: {
regressionTests: ['testCases/**/*.js']//will run all specs in subfolders
},
I know this already resolved and want to target for beginner to create Jenkins job and running test. I suggest to use selenium-server-standalone jar in configuration file and call configuration file from Jenkins.
conf.js
..
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumServerJar: 'node_modules/protractor/node_modules/webdriver-manager/selenium/selenium-server-standalone-3.5.3.jar',
....
//html reporter logic
.....
Creating Jenkins Job
Install node js on Jenkins Server
Install Html Publisher Plugin for end to end testing report
Create Freestyle Project or whatever your needs
Go to Build Section -> Add build step and choose Execute Windows
batch command if Jenkins server in Windows otherwise choose Execute
Shell for Linux
Call conf.js (install packages and call your configuration file)
For reporting Got to Post-Build Actions Section -> Add Publish Html
Reports and call your report file (file assuming from root of your
project)
However you can customize execution command using gulp or similar other packages. Thanks