Photographer doesn't capture screenshots if an alert dialog is open

[mtahat]

Hello @jan-molak I am using Serenity-js with Cucumber, protractor & typescript ( see dependencies below) .

One of my test cases start showing Chrome Alert,

I was able to by pass the alert by this interaction ( thank's to one of your posts)

**Even though I was able to navigate away, the screenshot broke the test!** 
[Photographer:TakePhotosOfInteractions] Taking screenshot of 'AcceptAlert'... - UnexpectedAlertOpenError: unexpected alert open: {Alert text : }

###Is there any workaround I can implement to skip taking screenshot for this Interaction?
I tried a lot of things but nothing seems to work.. I tried to remove the photographer from protractor.config and pass it as actor in the before hook Photographer.whoWill(TakePhotosOfInteractions), then in the After hook I ran it with another photographer who only takes screenshot for failures, but that didn't work as well.

@jan-molak any help will be appreciated!
Thanks

FYI: I used the template cucumber/serenity template that you have here to build my project. see dependencies below, I am also using Mac book, VS Code IDE.

Hooks.ts

import { actorCalled, actorInTheSpotlight, Log } from '@serenity-js/core';
import { ExecuteScript, ResizeBrowserWindow } from '@serenity-js/protractor';
import { After, Before } from 'cucumber';

Before( () => actorCalled('User').attemptsTo(
    ResizeBrowserWindow.toMaximum(),
));

After(() => actorInTheSpotlight().attemptsTo(
    ExecuteScript.sync(`window.sessionStorage.clear()`),
    ExecuteScript.sync(`window.localStorage.clear()`),
    Log.the('Session Cleared!'),
));

Dependencies

"dependencies": {
    "@types/cucumber": "^6.0.1",
    "@types/node": "^12.12.27",
    "axios": "^0.19.2",
    "chromedriver": "^79.0.3",
    "cucumber": "^6.0.5",
    "cucumber-html-reporter": "^5.1.0",
    "cucumber-junit": "^1.7.1",
    "dotenv": "^8.2.0",
    "is-ci": "^2.0.0",
    "moment": "^2.24.0",
    "npm-failsafe": "^0.4.1",
    "protractor": "^5.4.3",
    "rimraf": "^3.0.2",
    "ts-node": "^8.6.2",
    "tslint": "^5.20.1",
    "tslint-microsoft-contrib": "^6.2.0",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@serenity-js/assertions": "^2.1.5",
    "@serenity-js/console-reporter": "^2.1.5",
    "@serenity-js/core": "^2.1.5",
    "@serenity-js/cucumber": "^2.1.5",
    "@serenity-js/protractor": "^2.1.5",
    "@serenity-js/rest": "^2.1.5",
    "@serenity-js/serenity-bdd": "^2.1.5",
    "lodash": "^4.17.15"
  }

Protractor.config

require('dotenv').config()
const
    { ConsoleReporter } = require('@serenity-js/console-reporter'),
    { ArtifactArchiver } = require('@serenity-js/core'),
    { Photographer, TakePhotosOfInteractions } = require('@serenity-js/protractor'),
    { SerenityBDDReporter } = require('@serenity-js/serenity-bdd'),
    isCI = require('is-ci');

var tags = ['@' + process.env.OPCO];
if(process.env.TAGS) {
    const tagArray = process.env.TAGS.split(',');
    tags = tags.concat(tagArray);
    console.log('tags applied: ', tags);
}    
exports.config = {
    baseUrl: `https://abc.${process.env.SITE}.com`,
    SELENIUM_PROMISE_MANAGER: false,
    seleniumAddress: `http://${process.env.HUB}:4444/wd/hub`,
    

    allScriptsTimeout: 110000,

    framework:      'custom',
    frameworkPath:  require.resolve('@serenity-js/protractor/adapter'),

    specs: [ 'features/**/*.feature' ],

    serenity: {
        runner: 'cucumber',
        crew: [
            ArtifactArchiver.storingArtifactsAt('./target/site/serenity'),
            ConsoleReporter.forDarkTerminals(),
            Photographer.whoWill(TakePhotosOfInteractions),
            new SerenityBDDReporter(),
        ]
    },

    cucumberOpts: {
        require: [ 'features/**/*.ts'],
        'require-module':   [ 'ts-node/register'],
        tags:    tags,
        strict:  false,
    },

    capabilities: {
        browserName: 'chrome',

        // see https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities#loggingpreferences-json-object
        loggingPrefs: {
            browser: 'SEVERE' // "OFF", "SEVERE", "WARNING", "INFO", "CONFIG", "FINE", "FINER", "FINEST", "ALL".
        },

        'goog:chromeOptions': {
            args: [
                '--incognito',
                //'--headless',
                '--no-sandbox',
                '--disable-infobars',
                '--disable-extensions',
                '--log-level=3',
                '--disable-gpu',
                '--window-size=1920,1080',
            ].concat(isCI ? ['--headless'] : []),
            'w3c': false    // run in headless mode on the CI server
        }
    }
};

[jan-molak]

Hey @mtahat - good catch, I haven't considered how the photographer would interact with JavaScript alerts yet. Based on your experience, it looks like it doesn't like them. Sorry about that.

The easiest way to work around this would be to take screenshots only upon failures, so:

Photographer.whoWill(TakePhotosOfFailures),

Another workaround would be to, as a temporary measure until Serenity/JS provides a native way to do it, implement the AcceptAlert as a Task rather than an Interaction. Since the Photographer only looks at Interactions, that should make it ignore it.

So something along the lines of:

import { PerformsActivities, UsesAbilities, Task } from '@serenity-js/core';

export class AcceptAlert extends Task {
    performsAs(actor: PerformsActivities & UsesAbilities): Promise<void> {
        return new Promise((resolve, reject) => {
            protractor.browser.switchTo().alert().accept().then(resolve, reject);
        });
    }

    toString() {
        return `#actor dismisses an alert`;
    }
}

[MJavedAli]

I tried the first option - It took to screenshot , but was not appended in the html report -

For the second workaround - i am not clear where to put these code ? or how where to call them . currently my after hooks looks like this -

[jan-molak]

Hi @mtahat!

Serenity/JS 2.13.0 introduced support for handling modal dialog windows, so you can now say:

import { Accept, ModalDialog } from '@serenity-js/protractor';

actorInTheSpotlight().attemptsTo(
    Accept.the(ModalDialog.window()),
)

Also, changes introduced in 2.17.3 make the Photographer ignore the UnexpectedAlertOpenError, so it will ignore the alert and move on.

Hope this helps!
Jan