A place to start

Author: jan-molak

.gitignore

@@ -0,0 +1,10 @@
+# IntelliJ
+.idea
+*.iml
+
+# Node
+node_modules
+*.log
+
+# Build artifacts
+target

.nvmrc

@@ -0,0 +1 @@
+6

cross-app-demo.gif

@@ -0,0 +1,49 @@
+{
+  "name": "tutorial-cross-app-testing",
+  "version": "1.0.0",
+  "description": "Cross-application testing with Protractor and Serenity/JS",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rimraf target",
+    "lint": "tslint --config tslint.json --project tsconfig.json --format stylish",
+    "pretest": "serenity update",
+    "pree2e": "npm run lint && npm run webdriver:update -- --standalone --versions.standalone=2.53.1 --versions.chrome=2.29",
+    "e2e": "protractor ./protractor.conf.js",
+    "e2e-single": "protractor ./protractor.conf.js --mochaOpts.grep",
+    "report": "serenity run",
+    "test": "failsafe e2e report",
+    "webdriver-manager": "webdriver-manager",
+    "webdriver:update": "npm run webdriver-manager update"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/serenity-js/tutorial-cross-app-testing.git"
+  },
+  "author": "Jan Molak <jan.molak@smartcodeltd.co.uk>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/serenity-js/tutorial-cross-app-testing/issues"
+  },
+  "homepage": "https://github.com/serenity-js/tutorial-cross-app-testing#readme",
+  "devDependencies": {
+    "@types/chai": "3.5.0",
+    "@types/chai-as-promised": "0.0.30",
+    "@types/mocha": "2.2.40",
+    "@types/node": "7.0.12",
+    "chai": "3.5.0",
+    "chai-as-promised": "6.0.0",
+    "mocha": "3.2.0",
+    "npm-failsafe": "0.2.1",
+    "protractor": "5.1.1",
+    "rimraf": "2.6.1",
+    "serenity-cli": "0.2.4",
+    "serenity-js": "1.3.0",
+    "ts-node": "3.0.2",
+    "tslint": "5.1.0",
+    "tslint-microsoft-contrib": "4.0.1",
+    "typescript": "2.2.2"
+  },
+  "engines": {
+    "node": ">= 6.9.x"
+  }
+}

package.json

@@ -0,0 +1,23 @@
+exports.config = {
+
+    baseUrl: 'https://google.com',
+
+    allScriptsTimeout: 110000,
+
+    framework: 'custom',
+    frameworkPath: require.resolve('serenity-js'),
+
+    mochaOpts: {
+        ui:       'bdd',                   // use the describe/it syntax (default: 'bdd').
+        compiler: 'ts:ts-node/register',   // interpret step definitions as TypeScript,
+        reporter: 'spec'
+    },
+
+    specs: ['spec/**/*.spec.ts'],
+
+    capabilities: {
+        browserName: 'chrome'
+    },
+
+    restartBrowserBetweenTests: true,
+};

protractor.conf.js

@@ -0,0 +1,19 @@
+# Cross-Application Testing with Protractor and Serenity/JS
+
+This project demonstrates how a Serenity/JS test scenario can interact with both Angular and non-Angular apps
+and acts as supporting material for 
+"[Cross-application testing with Serenity/JS](https://janmolak.com/cross-application-testing-with-serenity-js-4103a272b75b)"
+
+To run it:
+```
+npm install
+npm test
+```
+
+Please make sure that you're using the latest [long-term support](https://nodejs.org/en/download/) of Node.js
+
+----
+
+Have fun!
+
+[Jan Molak](https://janmolak.com)

readme.md

@@ -0,0 +1,24 @@
+import { protractor } from 'protractor';
+import { BrowseTheWeb } from 'serenity-js/lib/serenity-protractor';
+import { Actor } from 'serenity-js/lib/serenity/screenplay';
+
+import { Ensure, Multiply } from '../src/calculator';
+import { Google, SelectResult } from '../src/google';
+
+import { equals } from '../src/assertions';
+
+describe('Cross-application testing', function() {
+
+    this.timeout(60 * 1000);
+
+    describe('Combining Protractor and Serenity/JS', () => {
+        const Steph = Actor.named('Steph').whoCan(BrowseTheWeb.using(protractor.browser));
+
+        it('allows you to easily navigate between non-Angular and Angular apps', () => Steph.attemptsTo(
+            Google.the('juliemr calculator'),
+            SelectResult.of('Super Calculator'),
+            Multiply.number(6).by(7),
+            Ensure.result(equals('42')),
+        ));
+    });
+});

spec/cross-app.spec.ts

@@ -0,0 +1,6 @@
+import chai = require('chai');
+import chaiAsPromised = require('chai-as-promised');
+
+chai.use(chaiAsPromised);
+
+export const equals = expected => actual => chai.expect(actual).to.eventually.equal(expected);

src/assertions.ts

@@ -0,0 +1,20 @@
+import { Text } from 'serenity-js/lib/serenity-protractor';
+import { step } from 'serenity-js/lib/serenity/recording';
+import { PerformsTasks, See, Task } from 'serenity-js/lib/serenity/screenplay';
+import { Assertion } from 'serenity-js/lib/serenity/screenplay/expectations';
+
+import { Calculator } from './ui/calculator';
+
+export class Ensure implements Task {
+    static result = (assertion: Assertion<string>): Task => new Ensure(assertion);
+
+    @step('{0} checks the result')
+    performAs(actor: PerformsTasks): PromiseLike<void> {
+        return actor.attemptsTo(
+            See.if(Text.of(Calculator.Result), this.assertion),
+        );
+    }
+
+    constructor(private assertion: Assertion<string>) {
+    }
+}

src/calculator/ensure.ts

@@ -0,0 +1,2 @@
+export * from './ensure';
+export * from './multiply';

src/calculator/index.ts

@@ -0,0 +1,25 @@
+import { Click, Enter, Select, UseAngular } from 'serenity-js/lib/serenity-protractor';
+import { step } from 'serenity-js/lib/serenity/recording';
+import { PerformsTasks, Task } from 'serenity-js/lib/serenity/screenplay';
+
+import { Calculator } from './ui/calculator';
+
+export class Multiply implements Task {
+    static number = (multiplier: number) => ({
+        by: (multiplicand: number) => new Multiply(multiplier, multiplicand),
+    })
+
+    @step('{0} multiplies #multiplier by #multiplicand')
+    performAs(actor: PerformsTasks): PromiseLike<void> {
+        return actor.attemptsTo(
+            UseAngular.enableSynchronisation(),
+            Enter.theValue(this.multiplier).into(Calculator.Left_Operand),
+            Select.theValue('*').from(Calculator.Operator),
+            Enter.theValue(this.multiplicand).into(Calculator.Right_Operand),
+            Click.on(Calculator.Go),
+        );
+    }
+
+    constructor(private multiplier: number, private multiplicand: number) {
+    }
+}

src/calculator/multiply.ts

@@ -0,0 +1,10 @@
+import { by } from 'protractor';
+import { Target } from 'serenity-js/lib/serenity-protractor';
+
+export class Calculator {
+    static Left_Operand  = Target.the('Left operand').located(by.model('first'));
+    static Operator      = Target.the('Operator').located(by.model('operator'));
+    static Right_Operand = Target.the('Right operand').located(by.model('second'));
+    static Go            = Target.the('Go').located(by.id('gobutton'));
+    static Result        = Target.the('Result').located(by.css('h2'));
+}

src/calculator/ui/calculator.ts

@@ -0,0 +1,22 @@
+import { protractor } from 'protractor';
+import { Enter, Open, UseAngular } from 'serenity-js/lib/serenity-protractor';
+import { step } from 'serenity-js/lib/serenity/recording';
+import { PerformsTasks, Task } from 'serenity-js/lib/serenity/screenplay';
+
+import { GoogleSearch } from './ui/google_search';
+
+export class Google implements Task {
+    static the = (term: string) => new Google(term);
+
+    @step('{0} googles the "#term"')
+    performAs(actor: PerformsTasks): PromiseLike<void> {
+        return actor.attemptsTo(
+            UseAngular.disableSynchronisation(),
+            Open.browserOn('http://google.co.uk/'),
+            Enter.theValue(this.term).into(GoogleSearch.Query).thenHit(protractor.Key.ENTER),
+        );
+    }
+
+    constructor(private term: string) {
+    }
+}

src/google/google.ts

@@ -0,0 +1,2 @@
+export * from './google';
+export * from './select_result';

src/google/index.ts

@@ -0,0 +1,20 @@
+import { Click, Is, Wait } from 'serenity-js/lib/serenity-protractor';
+import { step } from 'serenity-js/lib/serenity/recording';
+import { PerformsTasks, Task } from 'serenity-js/lib/serenity/screenplay';
+
+import { GoogleSearch } from './ui/google_search';
+
+export class SelectResult implements Task {
+    static of = (result: string) => new SelectResult(result);
+
+    @step('{0} selects "#result" from the list of results')
+    performAs(actor: PerformsTasks): PromiseLike<void> {
+        return actor.attemptsTo(
+            Wait.until(GoogleSearch.Result.of(this.result), Is.clickable()),
+            Click.on(GoogleSearch.Result.of(this.result)),
+        );
+    }
+
+    constructor(private result: string) {
+    }
+}

src/google/select_result.ts

@@ -0,0 +1,7 @@
+import { by } from 'protractor';
+import { Target } from 'serenity-js/lib/serenity-protractor';
+
+export class GoogleSearch {
+    static Query  = Target.the('Query').located(by.name('q'));
+    static Result = Target.the('Link to "{0}"').located(by.linkText('{0}'));
+}

src/google/ui/google_search.ts

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [ "es5", "es6" ],
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "declaration": true
+  },
+
+  "exclude": [
+    "node_modules"
+  ]
+}

tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "extends": "tslint:latest",
+  "rulesDirectory": "node_modules/tslint-microsoft-contrib",
+  "rules": {
+    "quotemark": [true, "single", "avoid-escape"],
+    "one-variable-per-declaration": false,
+    "member-access": false,
+    "typedef-whitespace":
+    [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      },
+      {
+        "call-signature": "onespace",
+        "index-signature": "onespace",
+        "parameter": "onespace",
+        "property-declaration": "space",
+        "variable-declaration": "space"
+      }
+    ],
+    "object-literal-sort-keys": false,
+    "no-bitwise": false,
+    "one-line": false,
+    "variable-name": [true, "ban-keywords"],
+    "interface-name": [true, "never-prefix"],
+    "max-line-length": [true, 180],
+    "member-ordering": [true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "only-arrow-functions": false,
+    "arrow-parens": [true, "ban-single-arg-parens" ],
+    "max-classes-per-file": false,
+    "mocha-avoid-only": true
+  }
+}