Updated the tutorial to work with the new version of the TFL website

Author: jan-molak

.gitignore

@@ -10,4 +10,4 @@ target/
 # Build artifacts
 .nyc_output
 lib
-staging
+staging

protractor.conf.js

@@ -1,4 +1,5 @@
 const
+    crew         = require('serenity-js/lib/stage_crew');
     glob         = require('glob'),
     protractor   = require.resolve('protractor'),
     node_modules = protractor.substring(0, protractor.lastIndexOf('node_modules') + 'node_modules'.length),
@@ -20,6 +21,20 @@ exports.config = {
     framework: 'custom',
     frameworkPath: require.resolve('serenity-js'),
 
+    serenity: {
+        crew: [
+            crew.serenityBDDReporter(),
+
+            // crew.photographer()
+
+            crew.Photographer.who(_ => _
+                .takesPhotosOf(_.Failures)
+            )
+
+            // crew.consoleReporter()
+        ]
+    },
+
     specs: [ 'features/**/*.feature' ],
     cucumberOpts: {
         require:    [ 'features/**/*.ts' ],

src/journey_planner/confirm_selection.ts

@@ -1,7 +1,12 @@
-import { Click, Task } from 'serenity-js/lib/screenplay-protractor';
+import { Click, Hit, Task } from 'serenity-js/lib/screenplay-protractor';
 
+import { protractor } from 'protractor';
 import { JourneyPlanner } from './ui';
 
 export const ConfirmSelection = () => Task.where(`#actor confirms their selection`,
-    Click.on(JourneyPlanner.Plan_My_Journey),
+    Hit.the(protractor.Key.RETURN).into(JourneyPlanner.Plan_My_Journey),
+
+    // or:
+    // Scroll.to(JourneyPlanner.Plan_My_Journey),
+    // Click.on(JourneyPlanner.Plan_My_Journey),
 );

src/journey_planner/journeys_found.ts

@@ -1,6 +1,6 @@
-import { BrowseTheWeb, Question, Target, UsesAbilities } from 'serenity-js/lib/screenplay-protractor';
+import { BrowseTheWeb, Question } from 'serenity-js/lib/screenplay-protractor';
 
-import { by } from 'protractor';
+import { by, ElementFinder } from 'protractor';
 import { expect } from '../expect';
 import { JourneyResults } from './ui/journey_results';
 
@@ -12,12 +12,23 @@ export interface JourneySummary {
 export const JourneysFound = () => Question.where(`#actor checks the results`, actor =>
 
     BrowseTheWeb.as(actor).locateAll(JourneyResults.List).
-        map(result => result.all(by.css('.time-boxes .time-box .time')).getText().then(times => ({
-            departureTime: times[0],
-            arrivalTime:   times[1],
-        }))) as PromiseLike<JourneySummary[]>,
+        map(resultsToJourneySummaries) as PromiseLike<JourneySummary[]>,
 );
 
+function resultsToJourneySummaries(result: ElementFinder) {
+    return result.all(by.css('.time-boxes .time-box .time')).getText().then(individualResultToJourneySummary);
+}
+
+function individualResultToJourneySummary(text: string): JourneySummary {
+    const summaryFormat = /(\d{2}:\d{2})/gi;
+    const times         = text[0].match(summaryFormat);
+
+    return ({
+        departureTime: times[0],
+        arrivalTime:   times[1],
+    });
+}
+
 export const containTrainsDepartingAt = (expectedDepartureTimes: string[]) => foundJourneys => {
     return foundJourneys.then(journeys => {
         expect(journeys).to.have.lengthOf(expectedDepartureTimes.length);

src/journey_planner/ui/index.ts

@@ -1,2 +1,2 @@
-export * from './journey_planner_form';
+export * from './journey_planner';
 export * from './journey_planner_preferences';

src/journey_planner/ui/journey_planner_form.ts renamed to src/journey_planner/ui/journey_planner.ts

@@ -15,7 +15,8 @@ export const JourneyPlanner = {
 
     Edit_Preferences_Link: Target.the('Edit preferences link').located(by.linkText('Edit preferences')),
 
-    Plan_My_Journey: Target.the('"Plan my journey" button').located(by.buttonText('Plan my journey')),
+    // Plan_My_Journey: Target.the('"Plan my journey" button').located(by.buttonText('Plan my journey')),
+    Plan_My_Journey: Target.the('"Plan my journey" button').located(by.xpath('(//input[@type="submit"][contains(@value, "Plan my journey")])[2]')),
 
     Results: Target.the('results').located(by.css('.journey-results')),
 };