Javascript Advanced

1. What is the difference between synchronous and asynchronous JavaScript?

Synchronous: Code runs sequentially, blocking execution until completion.
Asynchronous: Code runs in the background, allowing other operations to continue (e.g., setTimeout, fetch).

Example (Asynchronous code using async/await in testing):

Javascript

Copy

async function checkElement() {
  await page.waitForSelector("#button");
  console.log("Element found");
}

2. What are promises in JavaScript, and how are they used in automation?

Promises handle asynchronous operations and avoid callback hell. They have three states: Pending, Resolved, Rejected.
Example (Handling async operations in Playwright):

Javascript

Copy

page.click("#button").then(() => {
  console.log("Button clicked!");
}).catch(error => {
  console.error("Error clicking button", error);
});

3. What is the difference between map(), filter(), and reduce() in JavaScript, and how are they useful in test automation?

map(): Transforms each element in an array.
filter(): Returns elements that meet a condition.
reduce(): Accumulates values into a single result.

Example (Filtering visible elements in Cypress):
const visibleElements = elements.filter(el => el.isVisible());

4. What is the role of closures in automation testing?

A closure allows a function to retain access to variables from its outer scope even after the function has finished execution.
Example (Encapsulating test logic using closures in JavaScript automation):

Javascript

Copy

function testWrapper(testCase) {
  return function () {
    console.log("Running test: " + testCase);
  };
}

const loginTest = testWrapper("Login Functionality");
loginTest(); // Output: Running test: Login Functionality

5. What is the use of the Spread and Rest operators in automation scripts?

Spread (...): Expands elements of an array/object.
Rest (...): Gathers function arguments into an array.

Example (Passing multiple locators to a function in Selenium WebDriverJS):

Javascript

Copy

function clickElements(...selectors) {
  selectors.forEach(selector => driver.findElement(By.css(selector)).click());
}

clickElements("#btn1", "#btn2", "#btn3");

6. What are Higher-Order Functions, and how do they help in test automation?

A Higher-Order Function (HOF) is a function that takes another function as an argument or returns a function.
Example (Logging Test Steps Using HOFs)

Javascript

Copy

function logAction(action) {
  return function (details) {
    console.log(`Executing: ${action} - ${details}`);
  };
}

const logClick = logAction("Click");
logClick("Login Button"); // Executing: Click - Login Button

7. What is the Event Loop in JavaScript, and why is it important in automation?

The Event Loop allows JavaScript to handle asynchronous tasks like timers, promises, and user interactions without blocking execution.
Example:

Javascript

Copy

console.log("Step 1");
setTimeout(() => console.log("Step 2 (Delayed)"), 1000);
console.log("Step 3");

Output:

Step 1  
Step 3  
Step 2 (Delayed)

Use Case in Automation: Handling delays, waiting for elements, and ensuring scripts don't break due to async execution.

8. What is the difference between setTimeout and setInterval?

setTimeout: Runs a function once after a delay.
setInterval: Runs a function repeatedly at fixed intervals.

Example:

Javascript

Copy

setTimeout(() => console.log("Runs once after 2s"), 2000);
setInterval(() => console.log("Runs every 3s"), 3000);

9. What is async/await, and how does it help in test automation?

async/await simplifies handling asynchronous operations, making test scripts more readable.
Example (Waiting for Element in Automation)

Javascript

Copy

async function test() {
  await new Promise(resolve => setTimeout(resolve, 2000));  
  console.log("Waited 2 seconds before executing test");
}

test();

10. What is Object Destructuring, and how does it help in automation?

Destructuring extracts values from objects/arrays into variables.
Example (Extracting API Response Data)

Javascript

Copy

let response = { status: 200, body: { user: "tester", role: "admin" } };
let { status, body: { user, role } } = response;
console.log(status, user, role); // 200, tester, admin