Package Exports

@serenity-js/protractor
@serenity-js/protractor/lib/adapter
@serenity-js/protractor/lib/adapter/index.js
@serenity-js/protractor/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@serenity-js/protractor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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 { By, Navigate, Target, Text } from '@serenity-js/web';
import { BrowseTheWebWithProtractor } from '@serenity-js/protractor';
import { protractor } from 'protractor';

// example Lean Page Object describing a widget we interact with in the test
class SerenityJSWebsite {
    static header = () =>
        PageElement.located(By.css('h1'))   // selector to identify the interactable element
            .describedAs('header');         // description to be used in reports
}

// example Jasmine test
describe('Serenity/JS', () => {
    
    it('works with Protractor and Jasmine', async () => {
        await actorCalled('Priya')
            .whoCan(
                BrowseTheWebWithProtractor.using(protractor.browser)
            )
            .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: