Framework – Creating a JavaScript Framework – Part 1

Framework – Creating a JavaScript Framework – Part 1

Our first JavaScript framework

In the previous articles in the Framework series, we showed how to create a simple framework using C# that provided all the tools for writing clean and simple Selenium WebDriver tests. In this next mini-series, we’re going to do the same, but in JavaScript, to show the differences in structure and setup, but also to demonstrate just how similar the approach can be despite the language.

One of the biggest changes from the last framework setup is the environment you’ll be working in. With the C# example framework, I recommended using Visual Studio Community, simply because, in my opinion, it is the absolute best tool for the job when working with a language like C#. However, with JavaScript, Visual Studio Community isn’t really the most suitable option. Don’t worry though, we’re not going to be moving to something too unfamiliar, and in fact, it’s still a Visual Studio product, but this time we’re going for Visual Studio Code.

Visual Studio Code is a source code editor that works with a wide variety of languages and is a hugely popular tool to use when working with JavaScript.

Once downloaded and installed, we have to perform a few simple steps to create our framework. Going to the menu option ‘Terminal->New Terminal’, you’ll open a new instance of a terminal that we can use to get started and set up our framework from scratch. If you’re already thinking this is a bit too technical having to use a terminal instead of creating files, don’t worry, it’s very simple.

The first terminal command you’re going to use is:

mkdir javascript-automation && cd javascript-automation

If you’re familiar with using the Windows command prompt or macOS terminal, then you’ll already recognise these commands and they’ll make sense. If not, then the first part ‘mkdir javascript-automation’, simply creates a new directory named javascript-automation in the default location (in Windows, your local User space, on Mac, again, in your user directory. The second part will simply change the current directory we’re working within to be the new directory we just created. So any future terminal commands will be run within our working directory.

Next, we use another very short and sweet command:

npm init -y

Here is your introduction to npm. Think of npm as the nuget of JavaScript. It is basically a huge library of all the packages you could ever want to use for your JavaScript framework. It’s actually incredibly powerful, yet simple to use. But before we can start using these various packages, we need to initalise our new project as an npm project, which is exactly what this command does.
The ‘-y’ part is optional, and feel free to run the command without as it’s useful to know what is going on in the background when this command runs.

It will ask you to give your project a name and a version number, which are required fields. It will also ask for optional author information, but you don’t have to enter anything for these. By using ‘-y’, you’re telling the init command to use default values and create a package.

Now, quite a big step has been taken. You now have a package.json file. To see it, simply go to ‘File->Open Folder’ and navigate to the javascript-automation folder we created earlier, and open that. You’ll now see a single file created called ‘package.json’. In here contains all the information created by using ‘npm init -y’, so default values, or if you didn’t use default values, the information you entered. It will eventually contain a lot more information, including dependencies for other packages we are using for our project. For now, let’s leave it as it is.

Next, to keep this framework similar to our C# framework, we’re going to install Selenium WebDriver and ChromeDriver. Again, couldn’t be more simple, we’re going to use npm and use the following commands

npm install selenium-webdriver --save-dev
npm install chromedriver --save-dev

Just like that, it will go away and download the latest version of these packages and install them to use. We install them using the –save-dev option, which installs them locally and installs them for development purposes e.g running tests. If you remove this option, then it treats it as a package that is required for the JavaScript application to run, which isn’t really relevant in this context given we’re only developing a framework.

Once these are installed, you can go back to your package.json file and see a new section called dependencies. In here you’ll see the Selenium-WebDriver and ChromeDriver packages and their version numbers. This means you now have these packages installed and ready to go to start writing tests.

But you know me, I like to keep articles small and easy to digest so that you’re not getting overwhelmed. While that may not seem like much to do, it’s a huge change from how you might be used to doing things if you’re coming from a C# background. So it may be worth you running through those steps a few times, so you’re comfortable in what is being done and why we’re doing them. Mess around with using default values and not, so you can see the differences and how they impact your project and packages.json file.

Next we’re going to implement some page objects in JavaScript and show you how files and folder structures can be used in JavaScript