Protractor Tutorial – Coding Standards

What are coding standards?

Coding standards are the guidelines that developers use to define how the code should look. It makes the code easier to read and maintain if we follow these guidelines. We are going to be using “ESLint” to define and ensure we are using good coding standards. Also, I will be using the guidelines set in the Protractor Style Guide, when writing my tests.

Note this post contains affiliate links. It doesn’t cost you anything extra to use these links, but it helps to support this blog.

Set up npm’s package.json

The first thing we are going to do is add a package.json file to our project folder. This package.json file will make it so that if we ever want to reinstall all of our npm packages to our project again, we just have to make a single call and it will be taken care of. I will show you how to do this later.

Open up your console window to the “protractorTest” directory we created. Run the command “npm init”. You can take all the defaults. Note: when it asks for a name you have to make sure it is in lowercase or there will be an error, simply change the name to “protractortest”.

Now, if you look in you protractorTest directory, you will see a “package.json” file has been created. Here is what the contents of mine look like.

{
  "name": "protractortest",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

We will come back to look at this file again later. For now, that is all we need to do.

Install ESLint in our project

We are going to need to run several commands to get ESLint installed. Make sure your console window is open to the “protractorTest” directory. Run the following commands:

npm install eslint --save-dev

npm install eslint-plugin-protractor --save-dev

npm install eslint-plugin-jasmine --save-dev

Configure ESLint

And now we need to configure ESLint with this command:

.node_modules.bineslint --init
// When prompted. Provide the answers below.
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript

Now take a look at the “package.json” file. It should look similar to mine. Pay attention to the “devDependencies” section.

{
  "name": "protractortest",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^4.18.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jasmine": "^2.9.2",
    "eslint-plugin-node": "^6.0.0",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-protractor": "^1.40.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

Create the eslintrc file

The last thing we need to do to enable ESLint in our project is to create the “eslintrc” file. In the “protractorTest” directory create a file called “.eslintrc.js”. Make sure you put that period in the beginning. Now add this code to the file.

module.exports = {
    "extends": "standard",
    "plugins": [
        "standard",
        "promise",
        "protractor",
        "jasmine"
    ],
    "env": {
        "browser": true,
        "node": true,
        "jasmine": true,
        "protractor": true
    }
};

You will need to reload Visual Studio Code.

Take ESLint for a test drive

Time to see what ESLint will do for you. Open up the “test_spec.js” file. Do you see any red underlines anywhere? That is from ESLint. If you hover over the underlined code you should be a little tooltip that tells you what is wrong with the code based on the standard.

We now have an automated way of checking our code to make sure it conforms to many of the coding standards that we have set.

These posts are an introduction to Protractor for Automated Testing. To learn more with a full hands-on guide, grab our course on Udemy for only $9.99 when you use my link. Website Automation for Beginners with Protractor

Lesson 5: Better Console Reports