@serenity-js/protractor

Test your web apps with Serenity/JS

Usage no npm install needed!

<script type="module">
  import serenityJsProtractor from 'https://cdn.skypack.dev/@serenity-js/protractor';
</script>

README

Serenity/JS

Serenity/JS is a framework designed to make acceptance and regression testing of modern full-stack applications faster, more collaborative and easier to scale.

Visit serenity-js.org for the latest tutorials and API docs, and follow @SerenityJS and @JanMolak on Twitter for project updates.

Learning Serenity/JS

To learn more about Serenity/JS, check out the video below, read the tutorial, review the examples, and create your own test suite with Serenity/JS template projects.

If you have any questions, join us on Serenity/JS Community Chat.

Full-Stack Acceptance Testing with Serenity/JS and the Screenplay Pattern

Serenity/JS Protractor

@serenity-js/protractor module is a Screenplay Pattern-style adapter for Protractor framework, that helps with testing Angular, React, Vue and other frontend web apps.

Learn more about integrating Serenity/JS with Protractor.

Installation

To install this module, run:

npm install --save-dev @serenity-js/{core,protractor}

Next, install one of the below test runner adapters.

Learn more about integrating Serenity/JS with Protractor.

Usage with Cucumber.js

To use Serenity/JS Protractor with Cucumber.js, install the following adapter:

npm install --save-dev @serenity-js/cucumber

Please note that Serenity/JS Protractor / Cucumber integration supports both Serenity/JS reporting services and native Cucumber.js reporters, so you can use this module as a drop-in replacement of protractor-cucumber-framework.

Learn more about integrating Serenity/JS Protractor with Cucumber.

Usage with Jasmine

To use Serenity/JS Protractor with Jasmine, install the following adapter:

npm install --save-dev @serenity-js/jasmine

Learn more about integrating Serenity/JS Protractor with Cucumber.

Usage with Mocha

To use Serenity/JS Protractor with Mocha, install the following adapter:

npm install --save-dev @serenity-js/mocha

Learn more about integrating Serenity/JS Protractor with Cucumber.

Configuring Protractor

// protractor.conf.js

// Import the Serenity/JS reporting services, a.k.a. the "Stage Crew Members"
const
    { ArtifactArchiver } = require('@serenity-js/core'),
    { ConsoleReporter } = require('@serenity-js/console-reporter'),
    { Photographer, TakePhotosOfFailures, TakePhotosOfInteractions } = require('@serenity-js/protractor'),
    { SerenityBDDReporter } = require('@serenity-js/serenity-bdd');

exports.config = {
    // Tell Protractor to use the Serenity/JS framework Protractor Adapter
    framework:      'custom',
    frameworkPath:  require.resolve('@serenity-js/protractor/adapter'),
  
    // Configure Serenity/JS to use an appropriate test runner
    // and the Stage Crew Members we've imported at the top of this file
    serenity: {
        runner: 'jasmine',
        // runner: 'cucumber',
        // runner: 'mocha',
        crew: [
            ArtifactArchiver.storingArtifactsAt('./target/site/serenity'),
            ConsoleReporter.forDarkTerminals(),
            Photographer.whoWill(TakePhotosOfFailures),     // or Photographer.whoWill(TakePhotosOfInteractions),
            new SerenityBDDReporter(),
        ]
    },

    // configure Cucumber runner
    cucumberOpts: {
        // see the Cucumber configuration options below
    },

    // or configure Jasmine runner
    jasmineNodeOpts: {
        // see the Jasmine configuration options below
    },

    // or configure Mocha runner
    mochaOpts: {
        // see the Mocha configuration options below
    },

    // ... other Protractor-specific configuration   
};

Learn more about:

Interacting with websites and web apps

import { actorCalled } from '@serenity-js/core';
import { Ensure, equals } from '@serenity-js/assertions';
import { BrowseTheWeb, Navigate, Target, Text } from '@serenity-js/protractor';
import { protractor, by } from 'protractor';

class SerenityJSWebsite {
    static header = Target.the('header').located(by.css('h1'));
}

actorCalled('Priya')
    .whoCan(
        BrowseTheWeb.using(protractor.browser_download_url)
    )
    .attemptsTo(
        Navigate.to('https://serenity-js.org'),
        Ensure.that(Text.of(SerenityJSWebsite.header), equals('Next generation acceptance testing')),
)

Template Repositories

The easiest way for you to start writing web-based acceptance tests using Serenity/JS, Protractor and either Mocha, Cucumber or Jasmine is by using one of the below template repositories: