Automating Live Demos

With Serenity/JS and Protractor 5.1

There are numerous reasons for automating the acceptance tests, with speed and reliability of the process being close to the top of the list.

A machine can execute our automated tests hundreds of times per day, at a speed orders of magnitude higher than if we wanted to do it manually. And if the automated tests are done properly, they’ll give us the same result every single time they’re run.

However:

Speed is not a quality you’re looking for on a sightseeing tour.

Reliability yes, but speed — maybe not so much.

“A sightseeing tour” is exactly how I like to think of software demos where you demonstrate the new cool features your team has developed to the stakeholders.

So here’s the question:

Can we retain the reliability of an automated test, but demonstrate the scenario at a speed comprehensible to a human being?

We’d probably need to slow it down a bit first and highlight the interaction points so that we don’t leave fingerprints on the screen. No one likes smudgy screens.

OK, so here’s another one for you:

What about the people who’d like to see how the application’s being tested, but can’t attend the demo in person?

They’d need to have access to some off-line reports, presumably?

Well, I’m happy to tell you that with Serenity/JS and Protractor 5.1, all the above points can be addressed quite easily!

Illustrated reports

You already know that Serenity/JS reports can be generated even on existing Protractor-based test suites and that it requires just a single, one-line configuration change in your protractor config.

Just get the library from the npm:

npm install serenity-js --save-dev

configure Protractor to make Serenity/JS take care of your test suite:

exports.config = {
    framework: 'custom',
    frameworkPath: require.resolve('serenity-js'),
    // ...
}

and enjoy the reports (check out the tutorial to learn more):

But today I’d like to show you a new feature that comes with the newly released Serenity/JS 1.1 and Protractor 5.1 combo.

Demo mode

Protractor 5.1 brings in a new experimental feature called the “blocking proxy”.

The blocking proxy allows you to slow down the tests and will even tell Angular to highlight the elements a test scenario is interacting with:

To try it out, upgrade Protractor to 5.1.x

npm install protractor@5.1.x --save-dev

Add those npm scripts to your package.json file:

{
  "scripts": {
    "e2e-demo": "protractor ./protractor.conf.js --highlightDelay 1000 --seleniumAddress http://localhost:4444/wd/hub",
    "update": "webdriver-manager update",
    "proxy": "webdriver-manager start",
    "start": "npm run update && npm run proxy",
  }
}

Use one terminal window to start the proxy:

npm start

and another one to run your Protractor / Serenity/JS test suite:

npm run e2e-demo

That’s it, grab some popcorn and enjoy the show!

Jan Molak is the author of Serenity/JS, Jenkins Build Monitor and numerous other open-source projects helping thousands of organisations every day.

Enjoyed the reading? Please hit the💚 below so other people will see this article here on Medium. You might like my other articles and tutorials too!