Steps to Create a GitHub Account

1. Go to https://github.com/
2. Click on the signup button.
3. Enter email ID
4. Enter password
5. Provide a unique Username,
6. click on the checkbox -> click on the create account button.
7. It will show some puzzles to verify -> we have to solve.
8. User will receive a verification code via email -> provide the code on the GitHub screen.
9. Account creation is Successful.

---

Steps to Create a GitHub Repository

1. Go to the GitHub account
2. Click on the create repository button.
3. Provide repository name: AutomationPractice
4. Provide a description. e.g. Automation practice for the user.
5. Select the Repo visibility option Public/Private.
6. Select the readme file option.
7. Click on the Create repository button.
8. Repository created successfully.

---

Steps to install the GitHub client

1. Download the Git client from the given link
   https://github.com/git-for-windows/git/releases/download/v2.53.0.windows.2/Git-2.53.0.2-64-bit.exe
2. Double-click on the exe file and initiate installation with exe
   , select all default options, and complete the installation.
3. Create a folder in C Drive with the name GithubCode, folder path should be C:\GithubCode
4. Open folder and right-click -> show more options -> click on open git bash here.
5. It will open the Git terminal in the C:\GithubCode folder.
6. Run a command to check the git option
   git –help
7. It will show available git commands

---

Steps to Add User Credentials in Git Config File

1. Open the Git terminal in the C:\GitHubCode folder
2. Run the command below to open the config file
   -> git config –global –edit
   -> It will open the config file in the vi editor
3. Press i to enable insert mode, it should show –insert– in the bottom.
4. Now use keyboard arrows and update the name and email with your git username and git email.
   [user]
   name = Divya4255
   email = divya.smsrinivas1995@gmail.com
5. Make sure to remove # from the name and email line in the config file.
6. Press the ESCAPE key to disabled insert mode.
7. start type :wq and press enter
   -> It will save the configuration details.

---

Steps to Clone the Repository on the User’s Machine

1. Go to the GitHub server, log in with your credentials
2. Navigate to the repository that we have already created.
3. Click on the Code (green color) button, and copy the repository from there.
4. Open the Git terminal in the C:\GitHubCode folder.
5. Run the command below to clone the repo
   -> git clone https://github.com/Divya4255/AutomationPractice.git
6. Hit Enter -> It will clone repository from server to your local machine.
7. The repository folder will be created on the local machine.

---

Steps to Create a New File and Push to the GitHub Server

1. Create a text file in the git repository folder (AutomationPractice) and rename as demo_file.txt
2. Open the text file and add some content to the file -> save the file.
3. Open the Git terminal in C:\GitHubCode\AutomationPractice folder.
4. Run the git status command
   -> git status: it will show the new demo file in red color.
5. Run the git add command
   -> git add file_path/filename # It will add the file to GitHub tracking
6. Check the status again.
   -> git status # It will show the demo file in green color.
7. Initiate commit operation
   -> git commit -m “adding new file to repo.”
   -> It will complete the commit operation.
8. Initiate the git push operation.
   -> git push
   -> It will launch a pop-up
   -> Click and open in browser option.
   -> It will open in browser and click on the Authorize git ecosystem button.
   -> Now push will be successful and file will be push to the server.
   -> Check on GitHub server, the file is available on GitHub server.

---

Home Work For Practice:

1. Create three different file and push them to the server.
2. Update file1 and push(git status, git add, git commit, git push) it.
3. Rename file2 and push it from the terminal.
4. Delete file3 and push it from terminal.

---

Create a Common Repo and Provide Access

1. Create a repository with the name: e.g., GTM_PlaywrightTS_BATCH11
2. Get students’ email and provide Access to collaborate.
   Go to Repository -> Settings -> Collaborators -> Add People -> Enter Your email -> Select User -> Add to Repository
3. People will receive an invitation via email.
4. Open the email, click View Invitation, then accept the invitation.
5. Everyone has to accept the invitation.
6. Make sure to accept the invitation from the laptop, and your GitHub account is already open in the same browser
   where you open the mail account.
7. Once the invitation is accepted, the user will be able to see the common repository.

---

Clone the Common Repo, Add folder your name

1. Go to the common repository -> click on code (green button)
   -> click on copy clipboard to copy URL.
2. Open the Git terminal in the C:\GitHubCode folder on the local system
3. Run this command to clone the common repository
   -> git clone https://github.com/sqatools/GTM_PlaywrightTS_BATCH11.git
4. It will clone the command repository into a C:\GitHubCode to the local directory.
   -> repository folder name: GTM_PlaywrightTS_BATCH11
5. Create folder with your name in repo e.g. Deepesh and Add file inside the your folder e.g. first_file.txt
6. Navigate back to git terminal.
7. ON git terminal run below command to go inside repository folder.
   cd GTM_PlaywrightTS_BATCH11 -> It will open GTM_PlaywrightTS_BATCH11 folder.
8. Check status using below command
   -> git status : New Folder name will show in red color.
9. Run git add command
   -> git add /FolderName
10. Initiate commit operation.
    -> git commit -m “added”
11. Perform git push operation
    -> git push
12. If push is rejected repeat this steps until push it not successful.
    -> git pull
    -> it will open merge editor
    -> we have to close the edit with command using :wq (save file)
    -> Once the edit is closed, re-initiate the push operation
    -> git push
    -> if push is still rejected (Repeat again from “git pull” command)

################ Multi branching in git

1. Go to Git Repository on server : GTM_PlaywrightTS_BATCH11
2. Click on repository dropdown. default is main
3. click on view all branches.
4. Create branch with your name e.g. deepesh_branch.
   -> New Branch
   -> Provide Branch Name e.g. firstname_branch
   -> click on create branch button
   -> Verify branch is created successfully.
5. Open git terminal in repository folder
6. run command to update the repo
   -> git pull (all newly created branches will show in the console output)
7. Check current active branch
   -> git branch : It will show main as active branch in green color.
8. Switch to new branch.
   -> git checkout deepesh_branch
9. check again active branch
   -> git branch : your branch will show as active branch in green color e.g. deepesh_branch
10. Go to your dedicated folder and add file inside the folder
    Folder Name : Deepesh
    Filename : deepesh_feature_file.txt (don’t add space in filename)

11 Go back to terminal and check status
-> git status : newly added file will show in red color

12. Run git add command
    -> git add
13. Initiate commit operation
    -> git commit -m “added new file to feature branch”
14. Initiate push operation
    -> git push : file will push to the server on dedicated branch.
15. Go to GitHub server and verify file is available in dedicated folder in your branch.

################### Create pull from server

1. Go to server and navigate to repository.
2. Click on “Compare & pull request” button (green button)
3. Provide pull request description.
4. Add reviwers to review the code.
5. Click on create pull button.

################### Create workflow file in branch

1. Go to repository on GitHub server
2. Navigate to Actions Tab.
3. Click on New Workflow (green color) button
4. Select any workflow from given list. e.g. simple workflow
5. click on configure button
6. Select your branch from left side dropdown e.g. deepesh_branch.
7. Provide workflow name default name is blank.yml
   default path: GTM_Playwright_Batch11/.gitHub/workflow/blank.yml keep this path alive
   pull_request:
   branches: [ “main” ] remove this part: this will execute workflow for every single push
   push:
   branches: [ “main” ]
8. click on commit changes button.
9. It will open pop to provide commit message -> we can click on commit changes
   and push to the current branch.
10. It will create workflow on your dedicated branch and execute along with each
    PR.

########## Resolve Merge conflict

conflict scenario

1. Create file1 in main branch add some code from line 1 to 10.
2. Create new branch from main branch and then modify same file1 and same line numbers from 1 to 10.
3. In main branch, modify same on same number of lines and push it.
4. Create pull request from feature to main branch
5. It will create conflict.
6. We have to resolve conflict and merge the change

Steps to reproduce conflict scenario

1. Open git terminal in repository folder.
   -> make sure your current active branch should be main
   -> if not then you can switch to main branch.
   -> ‘git checkout main’ # it will switch to main branch.
   -> ‘git pull’ : Update your main branch with all change from server.
   -> ‘git branch’ : current active branch should be main branch in green color
2. Create a file with name e.g. dy_conflict_file.txt, and code snipet in the file, and save the file.
   var num1 = 10
   if (num1%2 == 0) {
   console.log(“This is even number”)
   } else {
   console.log(“This is odd number”)
   }
3. Push file to main branch.
   -> git status: show file in read color
   -> git add
   -> git status : show file in green color
   -> git commit -m “added file”
   -> git push : It push is rejected, then pull the code and perform push operation.
   -> git pull : it will open editor, we have close it with :wq! command.
   -> then try to push again, repeat (pull, push), until it is not successful.
4. Create a branch from local git bash terminal.
   -> git checkout -b “dy_conflict_branch”
5. Update dy_conflict_file.txt file as given below. if (num1%2 == 0) {
   console.log(“This is even number, divisible by 2”)
   } else {
   console.log(“This is odd number, not divisible by 2”)
   }
6. go back to terminal and run below command
   -> git status : shows in red color
   -> git add
   -> git status : shows file in green color
   -> git commit -m “initiate commit operation”
7. run below command to push local branch to server
   -> git push –set-upstream origin dy_conflict_branch
   -> push will be successful in feature.
8. change branch from conflict branch to main branch in terminal
   -> git checkout main
   -> git pull : it will update all changes from server to local machine.
9. Open conflict file in your folder and update few change in file content.
   var num1 = 10
   if (num1%2 == 0) {
   console.log(“condition is True”)
   console.log(“This is even number, can divide by 2”)
   } else {
   console.log(“condition is False”)
   console.log(“This is odd number, can not divide by 2”)
   }
10. push the file change in main branch.
    -> git status
    -> git add
    -> git commit -m “updated file”
    -> git push (repeat pull and push commands)
11. Go to GitHub server and create pull request from conflict branch to main branch
    -> go to repository
    -> search your branch name and select the branch.
    -> if the branch is old, then it will show contribute button
    -> click on contribute button and click on ‘Open pull request’ button.
    -> Provide request details (reviewer, description assignee)
    -> click on create pull request button.
12. It will show merge conflict between main branch and feature branch.
    -> ‘merge pull request’ button will be in disable state. This branch has conflicts that must be resolved
    Use the web editor or the command line to resolve conflicts before continuing. Deepesh/dy_conflict_file.txt

—— Resolve merge conflict locally ——

13. Go back to git terminal
14. switch to feature branch.
    -> git checkout dy_conflict_branch
15. run a command on terminal to update feature branch with main branch
    -> git pull origin main
    -> it will show conflict message on terminal Auto-merging Deepesh/dy_conflict_file.txt CONFLICT (content): Merge conflict in Deepesh/dy_conflict_file.txt Automatic merge failed; fix conflicts and then commit the result.
16. Open dy_conflict_file.txt on local machine, will show below content

var num1 = 10
if (num1%2 == 0) {

HEAD : change from feature BRANCH (dy_conflict_branch)

<<<<<<< HEAD
console.log(“This is even number, divisible by 2”)
} else {

console.log(“This is odd number, not divisible by 2”)

Changes from MAIN branch

console.log(“condition is True”)
console.log(“This is even number, can divide by 2”)
} else {
console.log(“condition is False”)
console.log(“This is odd number, can not divide by 2”)

9f9d33c6d4f9d945d512c3b40e36783b758295fd
}

17. Update the file content as per your requirements. var num1 = 10
    if (num1%2 == 0) {
    console.log(“condition is True”)
    console.log(“This is even number, divisible by 2”)
    } else {
    console.log(“condition is False”)
    console.log(“This is odd number, not divisible by 2”)
    }
18. go to git terminal and run below commands
    -> git status : It will show in red color
    -> git add
    -> git commit -m “resolved merge”
    -> git push
19. Once the push is successful, merge will conflict will be resolved in pull request
    -> Now go back to git server and check pull request, there is no conflict anymore.
20. We can merge changes from feature to main branch.

Data type conversion means changing a value from one type to another.

👉 There are two types of conversion:

1. Implicit Conversion (Type Coercion)
2. Explicit Conversion (Type Casting)

---

🔹 1. Implicit Conversion (Automatic)

JavaScript automatically converts types when needed.

✅ Example 1: String + Number

let result = "5" + 2;
console.log(result); // "52"

👉 Number 2 is converted to string.

---

✅ Example 2: Number – String

let result = "5" - 2;
console.log(result); // 3

👉 String "5" is converted to number.

---

✅ Example 3: Boolean Conversion

let result = true + 1;
console.log(result); // 2

👉 true → 1, false → 0

---

✅ Example 4: Null Conversion

let result = null + 5;
console.log(result); // 5

👉 null behaves like 0

---

⚠️ Strange Cases

console.log("5" * "2"); // 10
console.log("hello" * 2); // NaN

👉 "hello" cannot be converted → NaN (Not a Number)

---

🔹 2. Explicit Conversion (Manual)

You manually convert using JavaScript functions.

---

✅ Convert to Number

Using Number()

Number("123");    // 123
Number("abc");    // NaN
Number(true);     // 1
Number(false);    // 0

---

Using parseInt() and parseFloat()

parseInt("10.5");   // 10
parseFloat("10.5"); // 10.5

---

✅ Convert to String

Using String()

String(123);      // "123"
String(true);     // "true"

---

Using .toString()

let num = 100;
num.toString();   // "100"

---

✅ Convert to Boolean

Using Boolean()

Boolean(1);        // true
Boolean(0);        // false
Boolean("");       // false
Boolean("Hello");  // true
Boolean(null);     // false
Boolean(undefined);// false

---

🔹 Truthy vs Falsy Values

❌ Falsy Values:

• 0
• "" (empty string)
• null
• undefined
• NaN
• false

✅ Truthy Values:

Everything else is true

Boolean("Hi"); // true
Boolean(100);  // true

---

🔹 Comparison with Type Coercion

== (Loose Equality)

console.log("5" == 5); // true

👉 Converts types before comparison

---

=== (Strict Equality)

console.log("5" === 5); // false

👉 No conversion → safer

---

🧠 Quick Summary

Conversion Type	Example	Result
Implicit	"5" + 2	"52"
Implicit	"5" - 2	3
Explicit	Number("10")	10
Explicit	String(10)	"10"
Explicit	Boolean(0)	false

JavaScript Data Types (Basics)

JavaScript data types define the kind of value a variable can hold.

👉 There are two main categories:

1. Primitive Data Types
2. Non-Primitive (Reference) Data Types

---

🔹 1. Primitive Data Types

Primitive types store single values and are immutable.

✅ 1. Number

Represents both integers and floating-point numbers.

let age = 25;
let price = 99.99;

---

✅ 2. String

Represents text (inside quotes).

let name = "Deepesh";
let message = 'Hello World';

---

✅ 3. Boolean

Represents true or false.

let isLoggedIn = true;
let isAdmin = false;

---

✅ 4. Undefined

A variable declared but not assigned a value.

let x;
console.log(x); // undefined

---

✅ 5. Null

Represents intentional absence of value.

let data = null;

---

✅ 6. BigInt

Used for very large integers.

let bigNumber = 123456789012345678901234567890n;

---

✅ 7. Symbol

Used for unique identifiers.

let id = Symbol("userId");

---

🔹 2. Non-Primitive (Reference) Data Types

These store collections or complex data.

---

✅ 1. Object

Key-value pairs.

let user = {
  name: "Deepesh",
  age: 25,
  isActive: true
};

---

✅ 2. Array

Ordered list of values.

let fruits = ["apple", "banana", "mango"];

---

✅ 3. Function

A block of reusable code.

function greet() {
  return "Hello!";
}

---

🔹 typeof Operator

Used to check the data type.

console.log(typeof 10);          // number
console.log(typeof "Hello");     // string
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof null);        // object (known JS bug)
console.log(typeof {});          // object
console.log(typeof []);          // object

---

⚠️ Important Notes

• null returns "object" → historical bug in JavaScript
• Arrays are technically objects
• Functions are also treated as objects

---

🧠 Quick Summary Table

Type	Example
Number	10, 3.14
String	"Hello"
Boolean	true, false
Undefined	let x;
Null	null
BigInt	123n
Symbol	Symbol("id")
Object	{name: "John"}
Array	[1,2,3]
Function	function(){}

---

🚀 Simple Example Combining All

let user = {
  name: "Deepesh",     // string
  age: 25,             // number
  isLoggedIn: true,    // boolean
  balance: 1000000000000000000n, // BigInt
  id: Symbol("id"),    // symbol
  hobbies: ["coding", "music"], // array
  address: null        // null
};console.log(typeof user);

Operators in JavaScript are symbols used to perform operations on variables and values. They are essential for writing logic, calculations, and conditions

1. Arithmetic Operators

Used for mathematical calculations.

Operator	Description	Example
+	Addition	5 + 2 = 7
-	Subtraction	5 - 2 = 3
*	Multiplication	5 * 2 = 10
/	Division	10 / 2 = 5
%	Modulus (remainder)	5 % 2 = 1
**	Exponentiation	2 ** 3 = 8

Example:

let a = 10;
let b = 3;console.log(a + b); // 13
console.log(a % b); // 1

---

2. Assignment Operators

Used to assign values to variables.

Operator	Example	Meaning
=	x = 5	Assign 5
+=	x += 3	x = x + 3
-=	x -= 2	x = x – 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2

Example:

let x = 5;
x += 3; // 8

---

3. Comparison Operators

Used to compare two values (returns true/false).

Operator	Description
==	Equal (value only)
===	Strict equal (value + type)
!=	Not equal
!==	Strict not equal
>	Greater than
<	Less than
>=	Greater than or equal
<=	Less than or equal

Example:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

---

4. Logical Operators

Used to combine conditions.

Operator	Description
&&	AND
`
!	NOT

Example:

let age = 20;if (age > 18 && age < 30) {
  console.log("Young adult");
}

---

5. Unary Operators

Operate on a single operand.

Operator	Description
++	Increment
--	Decrement
typeof	Returns type
!	Logical NOT

Example:

let num = 5;
num++; // 6console.log(typeof num); // number

---

6. Ternary Operator

Short form of if-else.

Syntax:

condition ? value1 : value2;

Example:

let age = 18;
let result = age >= 18 ? "Adult" : "Minor";

---

7. Special Operators

Some useful additional operators:

Operator	Description
?.	Optional chaining
??	Nullish coalescing
in	Check the property in the object
instanceof	Check object type

Example:

let user = {};
console.log(user?.name); // undefined (no error)let value = null ?? "default";
console.log(value); // "default"

---

✅ Summary

• Arithmetic → calculations
• Assignment → assign values
• Comparison → compare values
• Logical → combine conditions
• Ternary → short if-else
• Special → modern JS features

---

What Are Variables in JavaScript?

In JavaScript, variables are declared using var, let, and const. These keywords define how variables behave in terms of scope and mutability. Modern JavaScript development strongly favors let and const because they provide better control and reduce unexpected bugs. If you’re building dynamic websites or applications, understanding variables is absolutely essential because they drive logic, interactivity, and data handling.

Why Variables Matter in Programming

Variables allow your program to process user input, perform calculations, and manage application state. Think of them as the memory of your application. Without variables, even simple tasks like storing a username or calculating a total price would be impossible.

Real-Life Analogy for Variables

Consider a backpack you carry every day. You can put books, gadgets, or food inside it. Some items you replace frequently, while others stay the same. That’s exactly how variables behave depending on how you declare them.

---

Types of Variable Declarations

Understanding var

The var The keyword is the oldest method for declaring variables in JavaScript. It is function-scoped, meaning it is accessible throughout the function in which it is defined. One unique characteristic of var is that it allows both redeclaration and reassignment, which can sometimes introduce bugs if not handled carefully.

var name = "John";
var name = "Doe"; // Allowed
console.log(name); // Output: Doe

Because of these limitations, developers rarely use var in modern applications unless maintaining legacy code.

---

Understanding let

The let keyword was introduced in ES6 and is now widely used. It provides block-level scope, meaning the variable is only accessible within the block {} where it is defined. This makes code more predictable and easier to debug.

let age = 25;
age = 30; // Allowed
// let age = 35; ❌ Not allowed

Using let ensures that variables don’t accidentally leak outside their intended scope.

---

Understanding const

The const keyword is used to declare variables whose values should not change. Once assigned, a const variable cannot be reassigned. However, if the variable holds an object or array, its internal properties can still be modified.

const country = "India";
// country = "USA"; ❌ Error

This makes const ideal for values that should remain constant throughout the program.

---

Key Differences Between var, let, and const

Scope Explained

Keyword	Scope Type
var	Function/Global
let	Block
const	Block

---

Reassignment vs Redeclaration

Keyword	Reassign	Redeclare
var	Yes	Yes
let	Yes	No
const	No	No

---

Hoisting Behavior

JavaScript uses a mechanism called hoisting, where variable declarations are moved to the top of their scope during execution. However, var is initialized with undefined, while let and const remain uninitialized until execution reaches their declaration.

---

Rules for Naming Variables

Valid Naming Conventions

• Start with a letter, _, or $
• Can include numbers (not at the beginning)
• Case-sensitive

Common Mistakes to Avoid

• Using reserved keywords
• Starting names with numbers
• Using unclear variable names

---

Rules to define a variable name

✅ 1. Allowed Characters

• Variable names can contain:
  • Letters (a–z, A–Z)
  • Digits (0–9)
  • Underscore (_)
  • Dollar sign ($)

✔ Example:

let name;
let user1;
let _count;
let $price;

---

❌ 2. Cannot Start with a Number

• A variable name must NOT start with a digit

❌ Wrong:

let 1name;

✔ Correct:

let name1;

---

❌ 3. No Spaces Allowed

• Variable names cannot contain spaces

❌ Wrong:

let user name;

✔ Correct:

let userName;

---

❌ 4. Cannot Use Reserved Keywords

• You cannot use JavaScript reserved words like:
  • let, var, const, if, else, function, etc.

❌ Wrong:

let var = 10;

---

✅ 5. Case Sensitive

• JavaScript is case-sensitive

let name = "John";
let Name = "Doe"; // different variable

---

✅ 6. Use Meaningful Names (Best Practice)

• Always use descriptive names

✔ Good:

let userAge = 25;
let totalPrice = 100;

❌ Bad:

let x = 25;

---

✅ 7. Use camelCase (Convention)

• JavaScript commonly uses camelCase

✔ Example:

let firstName;
let totalAmount;

---

✅ 8. Avoid Special Characters

• Do NOT use symbols like @, #, %, etc.

❌ Wrong:

let user@name;

---

✅ 9. Use let, const, or var

• Modern JavaScript prefers:
  • let → for changeable values
  • const → for constants

let age = 20;
const PI = 3.14;

---