Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Automating Live Demos With Serenity/JS and Protractor 5.1

DZone's Guide to

Automating Live Demos With Serenity/JS and Protractor 5.1

Serenity/JS and Protractor 5.1 together can help retain the reliability of an automated test but demonstrate the scenario at a speed comprehensible to an actual person.

· DevOps Zone
Free Resource

“Automated Testing: The Glue That Holds DevOps Together” to learn about the key role automated testing plays in a DevOps workflow, brought to you in partnership with Sauce Labs.

There are numerous reasons to automate 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 magnitudes higher than if we wanted to do it manually. Additionally, 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, 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 of 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! You can check out the tutorial to learn more.

Image title

However, 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 tests and will even tell Angular to highlight the elements a test scenario is interacting with.

Image title

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 and Serenity/JS test suite:

npm run e2e-demo

That’s it! Grab some popcorn and enjoy the show!

Learn about the importance of automated testing as part of a healthy DevOps practice, brought to you in partnership with Sauce Labs.

Topics:
protractor ,automated testing ,devops ,acceptance tests ,serenity js

Published at DZone with permission of Jan Molak, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}