Taking screenshots in BrowserStack running Protractor - angularjs

Question

Hello!
I'm trying to take screenshots in protractor and browserstack, I've the following conf.js file:
var HtmlReporter = require('protractor-html-screenshot-reporter');
var reporter=new HtmlReporter({
baseDirectory: './protractor-result', // a location to store screen shots.
docTitle: 'Report Test Summary',
docName: 'protractor-tests-report.html'
});
// An example configuration file.
exports.config = {
// The address of a running selenium server.
seleniumAddress: 'http://hub.browserstack.com/wd/hub',
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome',
'version': '22.0',
'browserstack.user' : 'user_name',
'browserstack.key' : 'user_key',
'browserstack.debug' : 'true'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['./specs/home_page_spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
},
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
}
};
And the browserstack help says that I need to add the following lines:
var fs = require('fs');
webdriver.WebDriver.prototype.saveScreenshot = function(filename) {
return driver.takeScreenshot().then(function(data) {
fs.writeFile(filename, data.replace(/^data:image\/png;base64,/,''), 'base64', function(err) {
if(err) throw err;
});
})
};
driver.saveScreenshot('snapshot1.png');
Does any one could point me to where to add these lines? and how? (I'm also using PageObject pattern)

Answer 1

I think you are talking about two things, one is the plugin for making screenshots and the second is a creating screeshots manually within your test code regardless a plugin.
In theory, the plugin should make screenshots for you. If not you can create them manually with the code provided from browserstack, just put in anywhere in your test code after some expects.
Anyway, to make screenshots from protractor I recommend use protractor-screenshoter-plugin
(disclaimer: I am the author), also you can have a look at Protractor-Screenshots-Alernatives
Now in one of the branches I have a new support for parallelization. Have a look at https://github.com/azachar/protractor-screenshoter-plugin/tree/feat-parallel-support.
To install the unstable version that contains the parallelization support use
npm install azachar/protractor-screenshoter-plugin#feat-parallel-support
to install stable version without parallel support, just type as usual:
npm install protractor-screenshoter-plugin
Let me know if it works as expected!
Cheers,
Andrej