Framework Structure & Configuration

Introduction

In this section, we will begin to add our folders and files that our framework will need. We will also add a .gitignore file so that if you decide to put your framework in a Git repository, you are able to without unnecessary files being included in the repository.

Adding a .gitignore file

  1. Open up a terminal (or command prompt) and change directory (cd) in to your project root…
    cd your/project/root
    (change ‘your/project/root’ to the path of your local project’s root)
  2. First, let’s initialise an empty git repository…
    git init
  3. Next, create (touch) a .gitignore file…
    touch .gitignore
  4. Next, go into the nano editor for the .gitignore file we just created…
    nano .gitignore
  5. Add the following lines in your .gitignore file to ignore the packages in our ‘/node_modules’ folder as well as any folders specific to our code editor (e.g. ‘.vscode/’)…

    You’re now ready to setup your own GitHub/GitLab repository, if you desire to do so (I won’t be covering that in this blog series).

Directory and File Structure

  1. Open up a terminal (or command prompt) and change directory (cd) in to your project root…
    cd your/project/root
    (change ‘your/project/root’ to the path of your local project’s root)
  2. First, let’s open our project root in VS Code…

Features

  1. In the Project Explorer in Visual Studio Code, add a ‘features’ folder to the project root by hovering the mouse over the project folder’s name and clicking the ‘New Folder’ icon
  2. Next, right-click the ‘features’ folder and add a new file called ‘find_a_restaurant.feature’ (don’t worry about the name, it will make sense later when we start to add our tests)

Steps

  1. Right-click the ‘features’ folder and add another sub-folder called ‘steps’, which is where all of our step definition files will go
  2. Next, right-click the ‘steps’ folder and add a new file called ‘foodie.steps.ts’ (again, the naming of this file will make more sense when we start writing our tests)

Support

  1. Right-click the ‘features’ folder and add a new sub-folder called ‘support’

Spec

  1. In the Project Explorer in Visual Studio Code, add a ‘spec’ folder to the project root by hovering the mouse over the project folder’s name and clicking the ‘New Folder’ icon

Screenplay

  1. Right-click the ‘spec’ folder and add another sub-folder called ‘screenplay’, which is where we will keep our screenplay related classes later on in this series

We will add the rest of the files and folders in later sections when we start to properly dig in to the Screenplay Pattern and its principles 🙂

Configuration

We will now add necessary configuration files for Protractor and TypeScript, as well as tweak the package.json file 🙂

protractor.conf.js

We will now create a ‘protractor.conf.js‘ file that will hold all of our Protractor configuration settings

  1. With Visual Studio Code open, add a new file to the project root called ‘protractor.conf.js
  2. Open up the ‘protractor.conf.js‘ file and add the following configuration code (I have added comments to try and explain what is going on)…

tsconfig.json

We will now create a ‘tsconfig.json’ file that allows you to specify the root level files and the compiler options that are required to compile a TypeScript project. The presence of this file in a directory specifies that the said directory is the TypeScript project root.

  1. With Visual Studio Code open, add a new file to the project root called ‘tsconfig.json’
  2. Open up the file and paste in the following, the uncommented lines are the only ones we need for now, however I have included all the other options commented out so you can see what they are…

package.json

Finally, we will tweak our ‘package.json’ file to add some scripts that will run our tests when we input ‘npm test’ in to the command line as well as run any ‘pretest’ scripts we may need (e.g. around ‘webdriver-manager update’) 🙂

  1. Open up the package.json file and edit the scripts block so it looks like below…

    The whole thing should look similar to below…

If we now run npm test, it will first run the “pretest” script we set up that runs ‘webdriver-manager update’ and then run the test script via protractor (even though we currently only have a blank feature file). We should see the Chrome browser launch and then close 🙂

Serenity/JS configuration

We will now start to setup the configuration for Screenplay Pattern, by adding a ‘serenity{}’ block in our ‘protractor.conf.ts’ file

Choosing our runner

Almost like a runner in film post-production, let’s configure our runner to use Cucumber 🙂

  1. Open up the ‘protractor.conf.js‘ file and add the following serenity configuration block to set the runner…

    The whole thing should look like below…

Choosing our Stage Crew

The Stage Crew Members listen on and act upon the domain events emitted during the execution of a test scenario. By default, our stage crew normally consists of a photographer who will take photos of interactions (e.g. take screenshots during our tests) and a Serenity BDD reporter, who produces Serenity BDD-compatible JSON reports.

Let’s add these default workers to our stage crew now 🙂

We will also add a console reporter so we can see the execution summary in the console when we run tests. I use a dark terminal, but you can change ‘Dark’ for ‘Light’ or leave it as the default like I am using below.

Lastly, we will ad an artifact archiver to store our reports at the default location of ‘./target/site/serenity’

  1. Open up the ‘protractor.conf.ts’ file and add the stage crew members to the serenity block in a ‘crew’ array, as well as adding the appropriate imports at the top of the file, with the whole thing looking similar to below…

Setting up Debug capabilities in Visual Studio Code

We will now set up our Visual Studio Code so that we can debug our tests with breakpoints by simply pressing F5 🙂

  1. With the project open in Visual Studio Code, click the Debug icon in the left menu bar (the icon looks like a bug/insect)
  2. Next, click the ‘create a launch.json file’ link
  3. Edit the ‘launch.json’ file to look like below…

We should now be setup with everything configured correctly. In the next section, we will start really dig in to the Screenplay Pattern and how it works 😀

Liked it? Take a second to support Thomas on Patreon!

Previous Article

Next Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.