How to Format code in Visual Studio Code

Auto-format your code in Visual Studio Code

If you want to auto-format your code in Visual Studio Code you have to enable the setting.
1.  Go to File > Preferences > Settings

2. In Search, bar enter formatOnSave

3. Checkmark the setting and it will automatically save the setting
4. Close and reopen Visual Studio Code

Format Document of code in Visual Studio Code

1. Double click and open TypeScript or JavaScript document

2. Right click on the document

3. Select Format Document option

Shortcut key to format document is Shift+Alt+F

Format Selection of code in Visual Studio Code

1. Double click and open TypeScript or JavaScript document

2. Select the code you want to format

3. Select Format Selection option

Shortcut key to format document is Ctrl+K Ctrl+F

You are Done!!!

Write first test in Protractor using TypeScript

Write first test in Protractor using TypeScript. We will start create simple folder structure so that finally we have automation framework.

1. Open Visual Studio Code
2. Right click on Explorer
3. Select New Folder option

4. Name the folder as specs and hit enter key

5. Select specs folder and right click
6. Select New File option
7. Name the folder as first.spec.ts and hit enter key

8. Lets write simple test

9. Create conf.ts in root folder and add these lines

10. Now, in order to run your first.spec.ts you have to Compiling your code, to do that you have to run command

This will compile the code and keep it in folder named temp and then it will start the test on browser.

Done!!!

How to create tsconfig.json

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Run below command

This will create a tsconfig.json file in your directory where you can define your configuration. VSCode will also start using this file once it finds it in your root directory.

6. We have to compile TypeScript file so that it converts them into JavaScript file. It will keep all the complied files in temp folder. We are not going to compile node_modules, so we have to exclude.

7. Finally you should update your tsconfig.json file as

Done!!!

How to create .gitignore in your project root directory

If you create a file in your repository named .gitignore, Git uses it to determine which files and directories to ignore, before you make a commit.

A .gitignore file should be committed into your repository, in order to share the ignore rules with any other users that clone the repository.

GitHub maintains an official list of recommended .gitignore files for many popular operating systems, environments, and languages in the github/gitignore public repository. You can also use gitignore.io to create a .gitignore file for your operating system, programming language, or IDE.

1. Open Visual Studio Code
2. Right click on project Explorer
3. Click New File
4. Name the file as .gitignore
5. Double click the file and open it
6. Enter enter the folder or file type which you want to ignore while checkin
7. Save changes

Done!!!

Reference:
https://help.github.com/articles/ignoring-files/
https://github.com/github/gitignore

How to create a package.json file in project

Creating a default package.json file

To create a default package.json using information extracted from the current directory, use the npm init command with the --yes or -y flag

You can create package.json from the command prompt or directly from Visual Studio Code.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Run below command

6. Default package.json file created will look something like

Updating package.json file

You can update the 'description' and 'author' as per your need manually or you can run below commands.

Setting config options for the init command

Saving npm dependencies in package.json file

1. Run below commands one by one so that it gets saved in package.json file and later it will be easy for us to install all dependencies by giving one commend.

2. If you run command npm install then it will install all the dependency in one go and it will save your time in typing individual command when you are deploying code on another system.
Finally you can update the package.json file as below

Done!!!

Install or Update WebDriver Manager

To install the required jar and driver for Selenium WebDriver when using Protractor automation too you have to install WebDriver Manager which downloads all the required jar and driver.

You can install WebDriver Manager from the command prompt or directly from Visual Studio Code. This is one of the powerful features which I like most in VSCode.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Run below command

Done!!!

1. I would recommend installing WebDriver Manager and any other library in your root project directory.
2. Ignore any warning you see in terminal while installing WebDriver Manager. 3. If you see any error while installing WebDriver Manager then close Visual Studio Code and run webdriver-manager update command again.

Install TypeScript

TypeScript is a typed superset of JavaScript that complies to plain JavaScript. Any browser. Any host. Any OS. And it's OpenSource.

You can install TypeScript from the command prompt or directly from Visual Studio Code. This is one of the powerful features which I like most in VSCode.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Run below command

Done!!!

1. I would recommend installing typescript and any other library in your root project directory.
2. Ignore any warning you see in terminal while installing typescript.

Install Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code.

You can install Jasmine from the command prompt or directly from Visual Studio Code. This is one of the powerful features which I like most in VSCode.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Run below command

6. To install jasmine type so that you don't get type error for describe or it, run below command

Done!!!

1. I would recommend installing jasmine and any other library in your root project directory.
2. Ignore any warning you see in terminal while installing jasmine.

Install Protractor

You can install Protractor from the command prompt or directly from Visual Studio Code. This is one of the powerful which I like most in VSCode.

1. Open Visual Studio Code
2. Click on Terminal menu
3. Click 'New Terminal'
4. You will see that Terminal is open at the bottom-most screen of Visual Studio Code
5. Now create a folder in the location where you want to install the Protractor
6. Above step will create a folder named 'protractor-jasmine-typescript'

7. Open the folder created in Visual Studio Code
8. Now, if you want to install protractor globally then type the command

8. And if you want to install protractor locally in your project directly, then type the command

Done!!!

1. I would recommend installing protractor and any other library in your root project directory.
2. Ignore any warning you see in terminal while installing protractor.

Install Node.js

We will be using Node.js in end-to-end automation test design. This will help us in getting access of n-number of npm libraries.

1. Go to website https://nodejs.org

2. Click on 'Other Download' link

3. Download installer based on your system architecture.

4. Double click the installer and follow on-screen instructions to complete the installation.
5. Now, open Command Prompt and type node, if cmd does not throw any error then NodeJS got installed successfully.

6. You can also check the npm version by typing the command.

Done!!!

Install Visual Studio Code

If you are used to Visual Studio and fan of Microsoft then you will like this lightweight Code Editor which is absolutely free.

Very popular for JavaScript and TypeScript code editing. It has cool features which adds overall coding experience:

• IntelliSense
• Debugging
• Built-in Git
• Extensions

Now, let's go through simple installation instruction.

1. Go to website https://code.visualstudio.com/
2. Click on the Download button

3. It will scroll down the page for you to choose the installer and download based on your system architecture.

4. Double click the installer and follow the on-screen instruction to complete the installation.
5. Now, Launch the Visual Studio Code

Done!!!

You may also want to check out other popular code editors

1. Atom: https://atom.io/
2. Brackets: http://brackets.io/
3. NotePad++: https://notepad-plus-plus.org/
4. Sublime: https://www.sublimetext.com/
5. VIM: https://www.vim.org/

What is Protractor?

Protractor is an end-to-end (e2e) test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user would.

Protractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part. Not just Angular application but non-angular application too can be automated

You no longer need to add waits and sleeps to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes pending tasks, so you don’t have to worry about waiting for your test and webpage to sync.

Visit https://www.protractortest.org for more details.