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/’) and the folder where we keep screenshots of errors (this doesn’t need to be in the git repository either)…

    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. Next, 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. Now, right click the ‘features’ folder and add a feature file called ‘google-about.feature’ (we will be testing the site https://about.google/ later in this series)

Steps

  1. Next, right-click the ‘features’ folder and add another sub-folder called ‘steps’, which is where all of our step definition files will go
  2. After, right-click the ‘steps’ folder and add a step definition file called ‘google-about.steps.ts’ (notice the .ts extension for TypeScript)

Pages

  1. In the Project Explorer again, add a ‘pages’ folder to the project root
  2. Right-click the ‘pages’ folder and add a ‘base-page.ts’ file (again notice the .ts file extension for TypeScript)

Configuration

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

protractor.conf.ts

We will now create a ‘protractor.conf.ts’ 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.ts’
  2. Open up the ‘protractor.conf.ts’ 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 around ts-node and also defining the location of the local protractor install as well as ‘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 like below…

You might be wondering what this ‘js-files/’ path is. When we run our tests in Protractor, we essentially need to transpile our  ‘.ts’ files in to ‘.js’ files. We can use TypeScript’s built in ‘tsc’ command to do this.

When we now run npm test, it will first run the pretest command of ‘tsc’ and convert our .ts files in to .js files and place them in the ./js-files/ directory. Before that though, we can (and should) run the following command to get our webdriver binaries…

Because of this, the protractor configuration that actually gets read will be the ‘./js-files/protractor.conf.js’ file, so we will have to update our features path in the protractor.conf.ts file so that it is correct when the converted .js file is made and also change the file type of the steps files to ‘.js’

  1. Edit the paths in the ‘protractor.conf.ts’ file so it looks like below…

If we now run npm test, it should launch the Chrome browser!

In the next section, we will begin coding our test 🙂

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.