1

I am getting broken image for screenshot. Unable to take screenshot in protractor framework. Please anyone help on this.

My code: testconfig.js file

var fs = require('fs-extra');
var today = new Date(),
    timeStamp = today.getMonth() + 1 + '-' + today.getDate() + '-' + today.getFullYear() + '-' + today.getHours() + 'h-' + today.getMinutes() + 'm';
console.log(timeStamp)

exports.config = {
    directConnect: true,
    // seleniumAddress: 'http://localhost:4444/wd/hub',
    capabilities: {
        'browserName': 'chrome',//firefox
    },

       suites: {
        regression: '../specs/sample.js',

    },
    allScriptsTimeout: 50000,

    jasmineNodeOpts: {
        onComplete: null,
        isVerbose: false,
        showColors: true,
        includeStackTrace: true,
        defaultTimeoutInterval: 999999,
    },
    framework: 'jasmine2',

    onPrepare: function () {
        browser.manage().window().maximize();
        browser.waitForAngularEnabled(false);
        // var ChercherTechJasmineReporter = reporter.ChercherTechJasmineReporter;
        // jasmine.getEnv().addReporter(new ChercherTechJasmineReporter({
        //     screenshotOnFail :false,
        //     showSkipped:false,
        //     browser:browser,
        //     showLineChart:true
        // }));
        const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
        jasmine.getEnv().addReporter(new SpecReporter({
            spec: {
                // displayStacktrace: true
                displayStacktrace: false
            }
        }));
        //Getting XML report
        var jasmineReporters = require('jasmine-reporters');
        jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
            consolidateAll: true,
            filePrefix: 'guitest-xmloutput',
            savePath: '.'
        }));

        fs.emptyDir('/', function (err) {
            console.log("Error message=",err);
        });

        jasmine.getEnv().addReporter({
            specDone: function(result) {
                // if (result.status == 'failed') {
                browser.getCapabilities().then(function (caps) {
                    var browserName = caps.get('browserName');
                    browser.takeScreenshot().then(function (png) {
                        // var stream = fs.createWriteStream('screenshots/' + browserName + '-' + result.fullName+ '.png');
                        var stream = fs.createWriteStream('./' + browserName + '-' + result.fullName+ '.png');
                        // var stream = fs.createWriteStream('./' + '-' + result.fullName+ '.png');
                        stream.write(new Buffer(png, 'base64'));
                        stream.end();
                    });
                });
                // }
            }
        });
    },
    // onComplete:function(exitcode){
    //     reporter.write_consolidated()
    // },
    //
    // afterLaunch:function(exitcode){
    //     return new Promise(function(resolve){
    //         reporter.processResults()
    //         return 0
    //     })
    // },
    onComplete: function() {
        var browserName, browserVersion;
        var capsPromise = browser.getCapabilities();

        capsPromise.then(function (caps) {
            browserName = caps.get('browserName');
            browserVersion = caps.get('version');
            platform = caps.get('platform');

            var HTMLReport = require('protractor-html-reporter-2');

            testConfig = {
                reportTitle: 'TAP Test Execution Report',
                // outputPath: './new/test/scripts/TestReports',
                outputPath: './',
                outputFilename: 'ProtractorTestReport'+timeStamp,
                screenshotPath: './',
                testBrowser: browserName,
                browserVersion: browserVersion,
                modifiedSuiteName: false,
                screenshotsOnlyOnFailure: false,
                testPlatform: platform
            };
            new HTMLReport().from('guitest-xmloutput.xml', testConfig);
        });
    },

    SELENIUM_PROMISE_MANAGER: true
};

spec-sample.js file

describe('Protractor - takeScreenshot()', function () {
    it('Code script to use takeScreenshot() in protractor', function () {
        browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
        var textField = element(by.model('name'));
        textField.sendKeys("Entered sample text")      
    });
} )

output:

enter image description here

1
  • What is the URL the report is giving for the screenshot, and how does this compare to where the screenshot is saved? Looking at your code you might be off by a level in the directory tree.
    – Kate Paulk
    Commented Sep 24, 2021 at 11:59

1 Answer 1

0

This is a bug with the reporter , instead of using guid/ hash to create file names, it is using the name of test script to save the screenshot .

This breaks the report if the path contains special non url encoded path , character more than 127 etc.

https://github.com/abhishekkyd/protractor-html-reporter-2/issues/7

So to fix it , change the spec name to something simple without any special character or use

https://www.npmjs.com/package/protractor-beautiful-reporter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.