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.