JavaScript Basics for Automation Engineer - A Complete Guide

 

1. JavaScript Basics for Automation

Even if you’re a Test Automation Engineer, you need to understand the basics of JavaScript.

Core Concepts

• Variables: let, const, var

• Data Types: String, Number, Boolean, Object, Array

• Operators: +, -, *, /, %, ===, !==, &&, ||

• Functions:

function add(a, b) {

    return a + b;

}

const multiply = (a, b) => a * b;

• Conditional Statements: if, else if, else, switch

• Loops: for, while, for...of, for...in

• Arrays & Objects:

const arr = [1,2,3];

const obj = { name: 'John', age: 25 };

• DOM Manipulation (if needed for front-end testing):

document.querySelector('button').click();

---

2. Setting Up Your Automation Environment

Prerequisites

• Install Node.js (comes with npm)

  node -v
  npm -v
  

• Install a code editor: VS Code recommended

Create a Project

mkdir automation-project

cd automation-project

npm init -y

---

3. Choosing an Automation Framework

There are several frameworks for JavaScript automation:

Popular Frameworks

1. Playwright

   • Modern, cross-browser automation

   • Supports JavaScript/TypeScript

2. Puppeteer

   • Headless Chrome automation

3. Selenium WebDriver (via WebDriverIO)

   • Traditional, widely used

4. Cypress

   • End-to-end testing, developer-friendly

We’ll focus on Playwright, which is widely used today.

---

4. Installing Playwright

• npm i -D @playwright/test

• npx playwright install

• @playwright/test – test runner

• npx playwright install – installs browsers (Chromium, Firefox, WebKit)

---

5. Writing Your First Test

Create a file: example.spec.js

const { test, expect } = require('@playwright/test');

test('example test', async ({ page }) => {

  await page.goto('https://example.com');

  const title = await page.title();

  expect(title).toBe('Example Domain');

});

Run the test:

npx playwright test

---

6. Playwright Concepts for Automation

• Selectors: page.locator('selector')

• Actions: click(), fill(), hover(), selectOption()

• Assertions: expect(locator).toHaveText()

• Waiting: page.waitForSelector(), await locator.waitFor()

• Screenshots & Videos:

await page.screenshot({ path: 'screenshot.png' });

---

7. Organizing Tests

• Page Object Model (POM)

  • Keeps locators and actions in a separate file

class LoginPage {

  constructor(page) {

    this.page = page;

    this.username = page.locator('#username');

    this.password = page.locator('#password');

    this.loginBtn = page.locator('#login');

  }

  async login(user, pass) {

    await this.username.fill(user);

    await this.password.fill(pass);

    await this.loginBtn.click();

  }

}

module.exports = LoginPage;

• Test Suite Structure

/tests

  login.spec.js

/pages

  login.page.js

---

8. Integration with CI/CD

• Run tests in Jenkins/GitHub Actions/GitLab CI

• Example GitHub Actions workflow:

name: Playwright Tests

on: [push]

jobs:

  test:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3

        with:

          node-version: 20

      - run: npm install

      - run: npx playwright install

      - run: npx playwright test

---

9. Advanced Automation Topics

• Parallel Execution

npx playwright test --workers=4

• Data-Driven Testing

test.each([

  { user: 'user1', pass: 'pass1' },

  { user: 'user2', pass: 'pass2' }

])('login test', async ({ user, pass }) => { ... });

• Handling Popups/Alerts

page.on('dialog', dialog => dialog.accept());

• API Testing

const response = await page.request.get('https://api.example.com/data');

expect(response.status()).toBe(200);

---

10. Reporting and Debugging

• Playwright Reports:

npx playwright test --reporter=html

• Debug Mode:

npx playwright test --debug

• Tracing (record test run for debugging):

await page.tracing.start({ screenshots: true, snapshots: true });

await page.tracing.stop({ path: 'trace.zip' });

---

11. Best Practices

1. Use Page Object Model for maintainability.

2. Keep selectors unique and stable.

3. Use explicit waits instead of random sleep.

4. Integrate with CI/CD for automated execution.

5. Use environment variables for sensitive data.

6. Write reusable utility functions for repeated actions.

Git basic commands to work on Git Bash command promt

 

Steps to use Git commands on the Git Bash command prompt:

1. Create a new folder

2. Right click with mouse on the newly created folder, then you will be prompted with following snap

3. Click on Git Bash Here option

4. Then you will see a new icon displayed on the toolbar as shown below

5. Click on the icon to view the Git Bash window with $ symbol 

6. Here you go...  use the below git commands as per the need

Git commands

Task to Perform	Description	Git commands
Configure the user name and email address	Configure User name and mail ID in repository	git config --global user.name "Vasu Chiluveru" git config --global user.email vasu@chiluveru.com
Create	New local repository	git init
Checkout	In local working directory	git clone repositoryURL
	In remote working directory	git clone username@host:repositoryURL
	Clone from Branch	git clone –b <branchname> repositoryURL
	When see any SSL issue while cloning	git config --global http.sslVerify false
Add file/files to repository	Add one	git add <filename>
	more files	git add *
Commit	Commit changes to Master	git commit -m "Commit message"
	Commit any files you've added or changed	git commit -a
Push	Send changes to the master	git push origin master
Status	List the files that changed	git status
Connect to a remote	remote repository	git remote add origin <server>
	List all remote repositories	git remote -v
Branches	Switch to new branch	git checkout -b <branchname>
	Switch between branches	git checkout <branchname>
	List all the branches	git branch
	Delete the branch	git branch -d <branchname>
	Push the branch to origin	git push origin <branchname>
	Push all branches	git push --all origin
	Delete a branch	git push origin :<branchname>
Update remote repository	1.     Fetch and merge changes	git pull
	2.     To merge a different branch	git merge <branchname>
	3.     View all the merge conflicts the source file	git diff git diff --base <filename> git diff <sourcebranch> <targetbranch>
	4.     After resolve any conflicts, you mark the changed file	git add <filename>
Tags	tagging to mark a significant changeset	git tag 1.0 <Commit_ID>
	Commit_ID is the leading characters of the changeset ID	git log
	Push all tags to origin	git push --tags origin
Rollback local changes	Have you mess up, you can replace the changes back	git checkout --<filename>
	To drop all your local changes and commits, fetch the latest history	git fetch origin   git reset --hard origin/master
Search	Search the working directory	git grep "foo()"
Remove	Remove any file/s	git rm /main/src/*.txt
Move or Rename	Move or rename a file	git mv oldname newname