Empty screenshots b

[adamsjoe]

Been away from the reporter for a while, thought I'd use protractor for a non-angular project as I like the reporter and I like another image comparison library.

But when I run the report, I get files being saved, however the images are all empty. (example attached)

here is the section in my conf file about the reporter: jasmine.getEnv().addReporter(new HtmlReporter({ preserveDirectory: false, baseDirectory: 'report', screenshotsSubfolder: 'images', docTitle: 'Report', docName: 'index.html' }).getJasmine2Reporter()); }
}

I've got jasmine installed - I don't remember anything else being needed?

[miller45]

You are using it for an non-angular project is that correct?

[adamsjoe]

@miller45 - that's correct.

[thonythony]

Same issue but in Angular project, I tried to integrate with puppeteer.

My protractor.conf.js

const { SpecReporter } = require('jasmine-spec-reporter');
const HtmlReporter = require('protractor-beautiful-reporter');
const puppeteer = require('puppeteer');

exports.config = {
  allScriptsTimeout: 11000,
  specs: ['./src/**/*.e2e-spec.ts'],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless'],
      binary: puppeteer.executablePath()
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    jasmine.getEnv().addReporter(
      new HtmlReporter({
        baseDirectory: 'e2e-report',
        screenshotsSubfolder: 'screenshots'
      }).getJasmine2Reporter()
    );
  }
};

My test app.e2e-spec.ts

import * as puppeteer from 'puppeteer';

describe('workspace-project App', () => {
  beforeAll(async () => {
    this.browser = await puppeteer.launch();
    this.page = await this.browser.newPage();
  });

  it('Test Puppeteer', async () => {
    await this.page.goto('http://localhost:4200');
  });

  afterAll(async () => {
    await this.browser.close();
  });
});

Do you have an idea why the screenshot generated by your reporter is blank (image with white background) ?

Thanks for your help

[miller45]

I never tested the reporter with pupetter. But it works with chrome...out-of-the-box... Did you use puppeter also for your first test?

[miller45]

If you want a headless browser you use chrome with extra arguments in your conf:

capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      'binary': process.env.CHROMIUM_BIN,
      args: ['--headless',
        '--disable-gpu',
        '--no-sandbox']
    }
  },

I just tested it and it works... also you should use protractor to request your webpages...

[miller45]

here is an example for a non-angular website protractor.conf:

const HtmlReporter = require('protractor-beautiful-reporter');
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
    directConnect: true,
    specs: [
        './specs/*.js'
    ],
    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            'args': ['--headless',
                '--disable-gpu',
                '--no-sandbox']
        }
    },
    framework: 'jasmine',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000,
        print: function () {
        }
    },
    onPrepare() {
        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
        jasmine.getEnv().addReporter(
            new HtmlReporter({
                baseDirectory: 'e2e-report',
                screenshotsSubfolder: 'screenshots'
            }).getJasmine2Reporter()
        );
    }
};

Example spec for a non angular webpage

describe('w3page', function () {

    beforeEach(async() => {
        await browser.waitForAngularEnabled(false);
    });

    it('question element should contain the correct text', async () => {
        await browser.get('https://www.w3.org/International/questions/qa-personal-names.en');
        expect(element(by.css('#question a')).getText()).toEqual('QUESTION');
    });

    it('WoT news element should container correct header', async () => {
        await browser.get('https://www.w3.org/WoT/');
        expect(element(by.css('#news h2')).getText()).toEqual('W3C Begins Standards Work on Web of Things to Reduce IoT Fragmentation');
    });
});

[miller45]

This example works on my system... @thonythony you cannot use puppeteer because we use protractor for screenshots....also there is no need for that

[miller45]

@adamsjoe to get started clone the following https://github.com/miller45/pbr-simple-non-angular. This example works and then you can see what you have to transfer to your repoistory. After cloning enter the following to commands:

npm install
npm run e2e

The second command will launch e2e test on a website from w3.org and will have the report contest in the folder e2e-report after it has finished. Have a look at the protractor.conf and the e2e/example_spec.js. For non-angular pages you have to call browser.waitForAngularEnabled(false); else protractor will expect to have angular on the page.

[miller45]

@thonythony you have to leave out the binary: puppeteer.executablePath() in you config. The spec file should look more like this:

import { browser } from 'protractor';

describe('workspace-project App', () => {
  beforeAll(async () => {
    await browser.waitForAngularEnabled(false);
  });

  it('Test (Non-)Puppeteer', async () => {
    await browser.get('http://localhost:4200');
  });

});

[thonythony]

@miller45 thanks for explanations ! I have to use puppeteer.

[miller45]

@thonythony sorry for question: but are sure you need puppeteer? Which features do you need there? Your example does not show that.

[miller45]

@thonythony If you want to use pupetteer and the reporter than you have to use it through the webdriver (meaning with browser.get).