Unit 2.1 Visual Studio, Stacks, Basics of Programming, and Locators

Overview

Visual Studio Code and IDEs
Using the Terminal
Basics of Web Development
Locators
Verifying Locators

Visual Studio Code and IDEs

What is an IDE?

Stands for an integrated development environment.
IDEs are software applications that provide us with environments to develop our software
An IDEs normally has source code editors, build automation tools and a debugger.

Visual Studio Code

We use visual studio code as our IDE.
Visual studio is a common IDE that provides the user with a user friendly coding environment.
Visual Studio allows users to write in whatever language you would like, and uses extensions to make your over all coding experience easier.

Themes in Visual Studio Code

There are many themes in Visual Studio Code including themes with color blind options and other user friendly things.
Pretty much any color combination you can think of has been turned into a theme.

Select your theme by either:

cmd+k+t for Mac to set the theme.
shift+cmd+x for Mac to go to extensions.
Once you’re in extensions you can search for any theme that suits your fancy.

ctrl+k+t for PC to set the theme.
shift+ctrl+x for PC to go to extensions.
Once you’re in extensions you can search for any theme that suits your fancy.

Helpful Extensions for Visual Studio Code

Extensions are not just theme specific and can be used to make your coding life a little easier!

Some extensions that make our coding comments easier to understand, fun additions to keep coding entertaining, and an extension that helps your code be more readable and cleaner!

Better Comments is an amazing extension that allows you to add questions and mark certain comments as important. It also allows users to add their own type of comments. It has completely changed how I add comments in my code.
Power Mode is an extension that allows the user to change their cursor to something like flames or fireworks and has a multiplier for characters typed. It’s a great way to stay entertained with your code!

Prettier is a code formatting extension that makes your code easier over all to read and have a cleaner look for things like portfolios or sending your code to peers.
Bonus vscode-pets is an extension that allows you to add a little widow that holds pets of your choice! Its a fun little addition that makes your coding experience a little less stressful with built in therapy pets!

Using the Terminal In Terminal, GitBash, and Visual Studio

What is the Terminal?

The terminal is used to create folders, move files, delete files, and makes accessing your file structure quick and easy!

The following commands are basic terminal commands that we will be using through out the course and that you will use through out your coding career.

cd
ls
mkdir
pwd
mv

Terminal Commands in the Terminal or GitBash

To use your terminal or GitBash you first open the terminal on Mac or the GitBash app on PC.
If you are using a Mac the terminal should have your user, followed by what machine you are on then ~ %. After the % you are able to type!
If you are on PC, GitBash should have your user, followed by your machine, then in purple you should have MINGW64 followed by ~ $. After the $ you should be able to type!

pwd

pwd stands for print working directory.
This prints where you are in your file structure to your terminal.
This is super helpful when we are trying to save things to certain folders.

ls

ls stands for list
ls by itself shows you the content of the folder you are currently in.
ls {path aka filename} this command shows the content of the folder of the path we gave.

cd

cd stands for change directory.
cd {path} allows you to go to the folder or file you have given the path for.
You’ll need to know where the folder is on your computer in order to get to that directory.
you can also use cd.. to “move up” or go back to a folder.

mkdir

mkdir stands for make directory or folder.
This is the command, along with cd, that you will use the most often.

You can cd into the folder you’d like to make your new folder in

mkdir {new folder}

…or create the path for that folder and create the folder like so.

mkdir {path}/{new folder}

mv

mv {originalPath} {newPath}
This command moves a file or a folder from one folder to another.
Be careful not to lose the file, this one takes some practice.

Basics Of Web Development

Basics of Web Development

Web Development is not something we do, but we do use their elements to write our code!
HTML, CSS, and JavaScript are the building blocks of web development.
Luckily we only really interact with the HTML!

HTML Elements

HTML is the structure of the website. HTML elements follow the following structure:

<element attribute="value">

Types of HTML Elements

There are many different types of HTML Elements. Some elements are self explanatory, like button or img.
Others like div, a and p are shorthand for division, anchor, and paragraph.
Some elements are parent element meaning they hold other elements inside them like ul (unordered list) or ol (ordered list) and their corresponding li (list item) elements.
The select element is another parent that requires option elements as children – this is what makes dropdown menus.

HTML Attribute Value Pairs

Remember our example of an HTML element: <element attribute="value">. And notice the attribute/value pair.

Attributes allow devs to configure their HTML elements. They can group them together, give them styling, allow/disallow certain behaviors, and more with attributes.
Common attributes we’ll use are class, id, name and value.

Classes and IDs

The class attribute allows developers to add one or more sets of styles to an element!
When you have a class attribute with more than one value they are separated by spaces.
IDs are another attribute that allows devs to apply styling. They’re also used to select elements in JavaScript.

CSS Specificity

CSS specificity is how CSS determines which styles to apply if they attributes are conflicting.
Selecting the element is 1 point. Classes are 10 points. IDs are 100 points and inline styles are 1000 points. Meaning the ID styles will override the class styles, and the classes will over take the elements.

Using Elements in Automation

Using Element In Automation

We have learned what HTML elements are which is great but what does that have to do with automation?
In automation we use what is called a locator to locate the elements on the page that we would like to interact with.
We use the element, attribute, value pattern in the console of the application we are testing to automate complete simple unit tests like our regression test.
There are two ways of finding locators for our automation: CSS and XPath.

CSS Locators

CSS is used for simple locators and uses symbols like . and # to show class and id respectively.
For anything other than class and id we use square brackets then the attribute value pair.
Using Chrome Tools we open the elements tab, hit the escape button for our terminal, and check to make sure we are getting the correct locators.
We start with $$ to show that we are using CSS to locate. Then we add parenthesis, single or double quotations, and depending on what attribute we are using a period or a number sign, followed by the value of that attribute. Looking something like this.
($$('.className'))

XPath Locators

XPath is another way of finding locators for our automation. The syntax is a little different but follows the element, attribute, value pattern.
XPath is used for any locator that has the same element, attribute, value as another. Or if the locator uses multiple classes.
XPath’s pattern for checking in the console starts with $x, parenthesis, single quotations, two slashes, the element you’re trying to get, square brackets, the at symbol, the attribute attached to the element, an equal sign, double quotes, and the value attached to the element attribute pair.
Sounds complicated but it ends up looking something like this.
$x('//element[@ attribute = "value"]')