Blog Artikel

In diesem Guide lernst du die grundlegenden JavaScript-Themen, die du für deine Testautomatisierung brauchst. Wenn du die Beispiele und Übungen direkt ausprobieren möchtest, empfehlen wir dir für den Start einen einfachen Online-Editor wie playcode.io. Einfach den Link öffnen und loslegen!

JavaScript ist die wichtigste Programmiersprache für die Webentwicklung. Sie wurde Mitte der 1990er Jahre entwickelt und hat sich seitdem zu einer universellen Sprache entwickelt, die in jedem Browser läuft und mittlerweile auch für serverseitige Anwendungen eingesetzt wird. Für Softwaretester ist JavaScript besonders interessant, weil viele moderne Testtools fürs Web auf JavaScript basieren.

JavaScript-Grundlagen für Tester

1. Variablen & Datentypen

Variablen sind Behälter, in denen Werte gespeichert werden. Du kannst dir eine Variable wie eine beschriftete Box vorstellen, in der du etwas ablegst, z. B. eine Zahl, einen Text oder eine Liste.

let alter = 30;        // 'alter' speichert die Zahl 30
const name = "Max";   // 'name' speichert den Text "Max"

let bedeutet, der Wert in der Variable kann sich ändern (z. B. alter kann später 31 sein).
const bedeutet, der Wert bleibt immer gleich (z. B. dein Name bleibt "Max").

Wichtige Datentypen im Überblick:

Codebeispiele zu den Datentypen:

// Number (Zahlen)
const anzahlTests = 42;
console.log(anzahlTests);     // Ausgabe: 42

// String (Text)
const fehlermeldung = "Passwort falsch";
console.log(fehlermeldung);   // Ausgabe: Passwort falsch

// Boolean (Wahrheitswerte)
const testErfolgreich = true;
console.log(testErfolgreich); // Ausgabe: true

// undefined (Variable ohne Wert)
let testErgebnis2;
console.log(testErgebnis2);   // Ausgabe: undefined

2. Die console.log Funktion

Mit console.log() kannst du den Wert einer Variablen in der Konsole anzeigen lassen, super zum Nachvollziehen, was dein Programm gerade macht!

let stadt = "Hamburg";
const geburtsjahr = 1980;

console.log("Ich wohne in " + stadt);     // Ausgabe: Ich wohne in Hamburg
console.log("Geburtsjahr: " + geburtsjahr); // Ausgabe: Geburtsjahr: 1980

3. Die length-Eigenschaft

Strings und Arrays haben eine length-Eigenschaft. Da du jetzt schon Arrays kennst, hier ein besseres Beispiel:

const text = "Hallo";
const früchte = ["Apfel", "Banane", "Orange"];

console.log(text.length);    // 5 (Anzahl Buchstaben)
console.log(früchte.length); // 3 (Anzahl Früchte)

4. Funktionen: Warum sind sie so wichtig?

Funktionen sind wiederverwendbare Code-Blöcke, die spezifische Aufgaben erledigen. Sie nehmen Eingaben (Parameter) entgegen, verarbeiten diese und können Ergebnisse zurückgeben. Funktionen helfen dir, deinen Code übersichtlich zu halten, Wiederholungen zu vermeiden und komplexe Aufgaben in kleinere Teile zu zerlegen.

Beispiel: Eine einfache Funktion

function begruessung(name) {
  console.log("Hallo " + name + "!");
}

begruessung("Max");  // Ausgabe: Hallo Max!
begruessung("Anna");  // Ausgabe: Hallo Anna!

Beispiel: Funktion mit Rückgabewert

function addiere(a, b) {
  return a + b;
}

const ergebnis = addiere(5, 3);
console.log(ergebnis);  // Ausgabe: 8

Die erste Funktion begruessung gibt etwas aus, die zweite Funktion addiere berechnet etwas und gibt das Ergebnis zurück.

Objekte & Arrays verstehen

1. Arrays: Listen von Werten

Arrays sind Listen, die mehrere Werte speichern können. Stelle dir ein Array wie eine Einkaufsliste vor, du kannst mehrere Dinge hineinschreiben und später einzeln abrufen. Jedes Element hat eine Position (Index), die bei 0 anfängt.

const früchte = ["Apfel", "Banane", "Orange"];
const zahlen = [1, 2, 3, 4, 5];

console.log(früchte[0]);     // "Apfel" (erstes Element, Index 0)
console.log(früchte[1]);     // "Banane" (zweites Element, Index 1)
console.log(zahlen.length);  // 5 (Anzahl Elemente)

2. Objekte: Zusammengehörige Daten

Objekte speichern zusammengehörige Informationen mit Namen (Schlüssel). Anstatt nur eine Liste zu haben, kannst du Daten benennen, wie ein Kontakt mit Name, Alter und Email. Du greifst auf die Werte mit dem Punkt-Operator zu.

const person = {
  name: "Laura",
  alter: 28,
  email: "laura@example.com"
};

console.log(person.name);   // "Laura"
console.log(person.alter);  // 28

3. Arrays mit Objekten kombinieren

In der Praxis kombiniert man oft Arrays und Objekte. Du kannst eine Liste (Array) von Personen (Objekten) erstellen. Das ist sehr häufig, zum Beispiel für Kontaktlisten oder Produktkataloge.

const kontakte = [
  { name: "Laura", email: "laura@example.com" },
  { name: "Mark", email: "mark@example.com" }
];

console.log(kontakte[0].name);  // "Laura" (Name der ersten Person)
console.log(kontakte[1].email); // "mark@example.com" (Email der zweiten Person)

Vergleiche & Bedingungen: Wie trifft dein Code Entscheidungen?

Um im Code verschiedene Wege zu gehen, benutzt man if-else Bedingungen. Dabei ist es wichtig, dass du den richtigen Vergleichsoperator nutzt.

1. Wichtige Vergleichsoperatoren

• === gleich
• !== ungleich
• < kleiner als, > größer als

2. Warum immer === statt ==?

== prüft nur den Wert, nicht den Typ, das kann zu Fehlern führen. === prüft Wert und Typ. Deswegen immer === verwenden!

3. Beispiel einer if-else Bedingung

let zahl = 5;

if (zahl === 5) {
  console.log("Die Zahl ist genau 5");      // Ausgabe: Die Zahl ist genau 5
} else {
  console.log("Die Zahl ist nicht 5");
}

// Weiteres Beispiel mit anderer Zahl
let andereZahl = 7;
if (andereZahl === 5) {
  console.log("Die Zahl ist genau 5");
} else {
  console.log("Die Zahl ist nicht 5");      // Ausgabe: Die Zahl ist nicht 5
}

Schleifen und moderne Iteration

Manchmal musst du eine Liste von Werten durchgehen, z. B. eine Kontaktliste oder Produktdaten. Anstatt jeden Wert einzeln zu schreiben, nutzt du Schleifen.

1. Moderne forEach-Methode

Die forEach-Methode ist moderner und lesbarer. Sie führt eine Funktion für jedes Element im Array aus, ohne dass du dich um Indizes kümmern musst:

const namen = ["Anna", "Boris", "Clara"];

namen.forEach((name) => {
  console.log(name);  // gibt nacheinander "Anna", "Boris", "Clara" aus
});

2. Array-Methoden: map und filter

map transformiert jedes Element und erstellt eine neue Liste. Beispiel: Alle Namen in Großbuchstaben umwandeln:

const namen = ["Anna", "Boris", "Clara"];
const grosseNamen = namen.map(name => name.toUpperCase());
console.log(grosseNamen); // ["ANNA", "BORIS", "CLARA"]

filter filtert Elemente nach einer Bedingung und behält nur die, die zutreffen:

const namen = ["Anna", "Boris", "Clara"];
const langeNamen = namen.filter(name => name.length > 4);
console.log(langeNamen); // ["Boris", "Clara"] (Namen mit mehr als 4 Buchstaben)

Modularisierung & Wiederverwendbarkeit im Testcode

Wenn dein Testcode wächst, willst du ihn strukturieren, damit er übersichtlich bleibt. Dafür teilst du deinen Code in kleine Module auf.

Exportieren und Importieren, so einfach geht’s:

// Datei: mathUtils.js
export function addiere(a, b) {
  return a + b;
}

export function subtrahiere(a, b) {
  return a - b;
}

// Datei: testScript.js
import { addiere, subtrahiere } from './mathUtils.js';

console.log(addiere(10, 5));      // Ausgabe: 15
console.log(subtrahiere(10, 5));  // Ausgabe: 5

Das macht deinen Code modular, leichter wartbar und wiederverwendbar.

Übungen zum Mitmachen

1. Übung: Erstelle Variablen und gib sie aus

Erstelle eine Variable für deinen Namen und eine für dein Alter. Gib beide mit console.log() aus.

const meinName = "Anna";
let meinAlter = 25;

console.log("Mein Name ist: " + meinName);  // Ausgabe: Mein Name ist: Anna
console.log("Ich bin " + meinAlter + " Jahre alt");  // Ausgabe: Ich bin 25 Jahre alt

2. Übung: Schreibe eine Funktion, die prüft, ob eine Zahl größer als 10 ist

Die Funktion soll "groß" zurückgeben, wenn die Zahl größer als 10 ist, sonst "klein".

Teste die Funktion mit den Zahlen 15 und 7.

function istGross(zahl) {
  if (zahl > 10) {
    return "groß";
  } else {
    return "klein";
  }
}

console.log(istGross(15));  // groß
console.log(istGross(7));   // klein

3. Übung: Füge einem Objekt einen neuen Schlüssel-Wert hinzu

Gegeben ist das Objekt: const person = { name: "Tina" };

Füge die Eigenschaft "alter" mit dem Wert 28 hinzu und gib das komplette Objekt aus.

const person = { name: "Tina" };
person.alter = 28;
console.log(person);  // { name: "Tina", alter: 28 }

4. Übung: Greife auf Array-Elemente zu

Gegeben ist das Array: const früchte = ["Apfel", "Banane", "Orange"];

Gib das erste und das letzte Element des Arrays aus.

const früchte = ["Apfel", "Banane", "Orange"];

console.log(früchte[0]);  // Ausgabe: Apfel (erstes Element)
console.log(früchte[2]);  // Ausgabe: Orange (letztes Element)

Abschluss & Tipp

Bleib dran und probiere jeden Code direkt im Browser auf playcode.io aus! Experimentiere mit kleinen Änderungen. Je mehr du spielerisch ausprobierst, desto besser verstehst du, wie JavaScript funktioniert und bist perfekt gerüstet für deine ersten eigenen automatisierten Tests!

  cy.visit('/login')
  cy.get('#username').type('testuser')
  cy.get('#password').type('hidden')
  cy.get('#login').click()
  cy.get('#profile').should('have.text', 'welcome testuser')

In unseren Schulungen auf codesurfer.io zeigen wir dir Schritt für Schritt, wie du Cypress einsetzt – von den Basics bis zu echten Projekten. Für Tester gedacht. Für den Alltag gemacht.

Wenn du den ersten Schritt machen willst, unterstützen wir dich gerne: mit praxisnahen Schulungen, konkreten Tools und einem Fahrplan, der zu deinem Team passt. Jetzt Kurs entdecken.