JavaScript Basics

Storing Information

Think of variables as labeled boxes where you can store information. In JavaScript, you create a variable to hold a value that you might need to use later. This is fundamental for writing tests, as you'll constantly need to store things like user credentials, test results, or element IDs.

To declare a variable, you'll most often use the keywords let and const. Use const for values that will never change, like a website's base URL. Use let for values that might need to be updated, such as a counter in a loop.

// Use const for a value that won't change.
const siteName = "ExampleApp";

// Use let for a value that might change.
let loginAttempts = 0;

// Now we can use these variables.
console.log("Testing on " + siteName);
loginAttempts = loginAttempts + 1; // We can update it

The information you store in variables comes in different forms, or data types. The most common ones you'll encounter are:

Strings: Plain text, wrapped in quotes. Used for things like names, messages, or passwords.
Numbers: Any kind of number, including integers and decimals. Used for calculations or counts.
Booleans: Can only be one of two values: true or false. Perfect for tracking states, like whether a user is logged in or if a test has passed.

// A string data type
const welcomeMessage = "Login successful!";

// A number data type
let numberOfUsers = 25;

// A boolean data type
const isAdmin = false;

Making Decisions and Repeating Actions

Automated tests often need to make decisions. For example, if a login succeeds, check the dashboard. If it fails, report an error. This is handled with control structures.

The most basic decision-maker is the if...else statement. It checks if a condition is true and runs a block of code. If it's not true, it runs a different block in the else section.

let password = "123456";

// Check if the password is long enough
if (password.length >= 8) {
  console.log("Password is strong.");
} else {
  console.log("Password is too short.");
}

What if you need to perform the same action multiple times? Instead of copying and pasting code, you use a loop. A for loop is great when you know exactly how many times you want to repeat an action, like checking every item in a list.

A for loop has three parts inside its parentheses: a starting counter, a condition to keep the loop going, and an action to increment the counter after each cycle.

// This loop will run 5 times
for (let i = 1; i <= 5; i++) {
  // The code inside this block repeats
  console.log("Running test attempt #" + i);
}

// Output will be:
// Running test attempt #1
// Running test attempt #2
// ...and so on, up to 5

Creating Reusable Code Blocks

Functions are reusable blocks of code that perform a specific task. Think of them like recipes. You define the recipe once, and then you can use it whenever you need it, perhaps with slightly different ingredients. This keeps your code organized and prevents repetition.

In testing, you might write a function to log in a user. Instead of writing out the steps for finding the username field, typing the name, finding the password field, and clicking 'submit' every time, you can just call your loginUser() function.

// Define a function that takes two numbers and adds them
function addNumbers(num1, num2) {
  // The variables num1 and num2 are 'parameters'
  let sum = num1 + num2;
  return sum; // Send the result back
}

// Call the function with two 'arguments'
let result = addNumbers(5, 10);

console.log(result); // Prints 15

An important concept with functions is scope. Variables declared inside a function with let or const only exist within that function. This is a good thing! It prevents variables from different parts of your code from accidentally interfering with each other.

Grouping Related Information

As your tests get more complex, you'll need a way to group related data and functionality together. That's where objects come in.

An object in JavaScript is a collection of key-value pairs. You can use it to model a real-world thing, like a user. A user has properties (like a name and email) and can perform actions (like logging in or changing their password). In an object, these properties are keys with values, and the actions are functions, which we call methods.

// An object representing a test user
let testUser = {
  // Properties
  username: "qa_tester_01",
  email: "tester@example.com",
  isLoggedIn: false,

  // A method (a function inside an object)
  displayInfo: function() {
    console.log("Username: " + this.username);
    console.log("Email: " + this.email);
  }
};

// Access a property
console.log(testUser.username);

// Call a method
testUser.displayInfo();

Notice the this keyword in the method. When used inside a method, this refers to the object itself. It lets us access other properties of the same object, like this.username.

These fundamentals are the building blocks you'll use to write every automated test. Now, let's check your understanding.

Quiz Questions 1/6

When declaring a variable in JavaScript, which keyword should you use for a value that you know will not change, such as a website's base URL?

Quiz Questions 2/6

What is the data type of the value false in JavaScript?

JavaScript QA Automation Essentials