JavaScript Grundlagen für Testautomatisierung

Du willst Tests mit Playwright schreiben, aber Begriffe wie Variable, Funktion oder await sagen dir noch wenig? So geht es vielen Testern, die aus dem manuellen Testen kommen. Hier findest du die JavaScript-Grundlagen, die du für deine Testautomatisierung brauchst, mit Beispielen und Übungen. Zum Ausprobieren empfehle ich dir einen einfachen Online-Editor wie playcode.io. Dort führst du jedes Beispiel direkt im Browser aus.

JavaScript ist die zentrale Programmiersprache fürs Web. Seit Mitte der 1990er Jahre gehört sie zum Standard jedes Browsers. Heute läuft JavaScript nicht nur auf Webseiten, sondern auch auf Servern. Für Software Tester ist das wichtig, weil Testtools wie Playwright oder Cypress JavaScript als Sprache für die Tests nutzen.

Die Grundlagen: Kommentare, Variablen und Datentypen

Kommentare und console.log()

Kommentare sind Notizen im Code, die nicht ausgeführt werden. Sie helfen dir und anderen, den Code besser zu verstehen. Kommentare beginnen mit zwei Schrägstrichen // und werden von JavaScript ignoriert:

// Das ist ein Kommentar und wird nicht ausgeführt

Mit console.log() zeigst du Werte in der Konsole an. Das ist praktisch zum Lernen und wichtig für die folgenden Abschnitte. Merke dir vorerst nur die Schreibweise. Den Wert, den du ausgeben möchtest, setzt du in die Klammern:

console.log("Hallo Welt!");
// Ausgabe: Hallo Welt!

Variablen

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.

Um eine Variable zu erstellen, benutzt du das Schlüsselwort let. Dann vergibst du einen Namen und weist den Wert mit dem Gleichheitszeichen = zu. Jede Anweisung endet mit einem Semikolon ;. Die allgemeine Form und zwei konkrete Beispiele sehen so aus:

let variablenname = wert;

// Die Variable 'age' speichert die Zahl 30
let age = 30;

// Die Variable 'name' speichert den Text "Max"
let name = "Max";

Primitive Datentypen

Jeder Wert hat einen Datentyp. Für den Einstieg in die Testautomatisierung reichen diese vier:

JavaScript erkennt automatisch, welchen Datentyp eine Variable hat. Du musst den Typ also nicht explizit angeben.

Arrays

Ein Array ist eine Liste, in der du mehrere Werte speichern kannst. Du kannst Werte hinzufügen, einzeln abrufen oder später wieder entfernen. Jedes Element hat eine Position, den sogenannten Index. Er beginnt immer bei 0. Außerdem kannst du jederzeit die Länge des Arrays abfragen.

let obst = ["Apfel", "Banane", "Orange"];

// Auf Elemente zugreifen
console.log(obst[0]);     // "Apfel"
console.log(obst[1]);     // "Banane"

// Ein Element hinzufügen
obst.push("Kiwi");
console.log(obst);        // ["Apfel", "Banane", "Orange", "Kiwi"]

// Das letzte Element entfernen
obst.pop();
console.log(obst);        // ["Apfel", "Banane", "Orange"]

// Die Länge des Arrays abfragen
console.log(obst.length); // 3

Logik: Funktionen, Bedingungen und await

Funktionen

Funktionen sind wiederverwendbare Code-Blöcke, die bestimmte Aufgaben erledigen. Sie nehmen Eingaben (Parameter) entgegen, verarbeiten diese und können Ergebnisse zurückgeben. So hältst du deinen Code übersichtlich und vermeidest Wiederholungen.

Eine Funktion beginnt mit dem Schlüsselwort function. Danach folgt der Funktionsname. In runden Klammern ( ) gibst du die Parameter an, also die Eingabewerte, die die Funktion benötigt. Der eigentliche Code steht in geschweiften Klammern { }, dem sogenannten Funktionskörper. Optional gibt die Funktion mit return ein Ergebnis zurück, das du weiterverwenden kannst.

function funktionsName(parameter1, parameter2) {
  // Funktionskörper
  return ergebnis;
}

In der Praxis sieht das zum Beispiel so aus. Die erste Funktion gibt eine Begrüßung aus, die zweite liefert ein Ergebnis zurück:

// Eine Funktion, die eine Begrüßung ausgibt
function greet(name) {
  console.log("Hallo " + name + "!");
}

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

// Eine Funktion mit Rückgabewert
function addiere(a, b) {
  return a + b;
}

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

Bedingungen

Um im Code verschiedene Wege zu gehen, nutzt du if-else-Bedingungen. Dabei ist es wichtig, den richtigen Vergleichsoperator zu wählen. Die wichtigsten sind:

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

So prüfst du zum Beispiel, ob eine Zahl gleich 5, ungleich 5 oder kleiner als 10 ist:

let zahl = 5;

// Überprüfen, ob die Zahl gleich 5 ist
if (zahl === 5) {
  console.log("Die Zahl ist genau 5");        // Ausgabe: Die Zahl ist genau 5
} else {
  console.log("Die Zahl ist nicht 5");
}

// Überprüfen, ob die Zahl ungleich 5 ist
if (zahl !== 5) {
  console.log("Die Zahl ist nicht 5");
} else {
  console.log("Die Zahl ist genau 5");        // Ausgabe: Die Zahl ist genau 5
}

// Überprüfen, ob die Zahl kleiner als 10 ist
if (zahl < 10) {
  console.log("Die Zahl ist kleiner als 10"); // Ausgabe: Die Zahl ist kleiner als 10
} else {
  console.log("Die Zahl ist 10 oder größer");
}

Das Schlüsselwort await

In JavaScript laufen manche Vorgänge verzögert ab, zum Beispiel das Laden einer Seite. Man nennt das asynchron. Mit dem Schlüsselwort await wartet JavaScript auf das Ergebnis, bevor es mit dem nächsten Schritt weitermacht. Für den Einstieg reicht diese Regel: Wenn du eine Funktion aufrufst, die mit async gekennzeichnet ist, setzt du await davor. So laufen deine Testschritte in der richtigen Reihenfolge ab.

Bei Playwright brauchst du das ständig. Zum Beispiel, wenn du auf einen Seitenaufruf oder ein Element wartest, das erst geladen wird:

test('Startseite zeigt den Titel', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Code wiederverwenden mit export und import

Wenn dein Testcode größer wird, ist es wichtig, ihn übersichtlich und gut strukturiert zu halten. Nur so bleibt er leicht wartbar. Schreib Funktionen und Variablen deshalb so, dass du sie mehrfach verwenden kannst. Dafür teilst du den Code in einzelne Dateien (Module) auf. Mit den Schlüsselwörtern export und import nutzt du Funktionen oder Variablen in anderen Dateien.

Mit export function funktionsName() machst du eine Funktion für andere Dateien verfügbar. In einer anderen Datei holst du sie mit import { funktionsName } from './dateiname.js' dazu. Die geschweiften Klammern { } geben an, welche Funktionen du importierst. Der Pfad './dateiname.js' zeigt auf die Datei, aus der die Funktion stammt.

// Datei: mathUtils.js (Hilfsfunktionen für Rechenoperationen)
export function addiere(a, b) {
  return a + b;
}

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

// Datei: testScript.js (nutzt die Funktionen aus mathUtils.js)
import { addiere, subtrahiere } from './mathUtils.js';

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

Übungen

Jetzt bist du dran. Versuch jede Übung erst selbst zu lösen, bevor du die Lösung aufklappst.

a. Übung: Console.log und Kommentare verwenden

Schreibe einen Code, der drei verschiedene Nachrichten mit console.log() ausgibt. Füge oberhalb jeder console.log()-Anweisung einen Kommentar hinzu, der erklärt, was ausgegeben wird.

// Begrüßung ausgeben
console.log("Willkommen zum JavaScript-Test!");

// Aktuellen Status ausgeben
console.log("Test wird gestartet...");

// Erfolgsmeldung ausgeben
console.log("Alle Vorbereitungen abgeschlossen!");

b. Übung: Variablen erstellen und verwenden

Erstelle eine Variable für eine Webseiten-URL und eine für die erwartete Anzahl von Elementen auf der Seite. Gib beide Werte mit console.log() aus.

let websiteUrl = "https://example.com";
let expectedElements = 5;

console.log(websiteUrl);
console.log(expectedElements);

c. Übung: Mit verschiedenen Datentypen arbeiten

Erstelle Variablen für folgende Testwerte und gib ihre Werte aus:

• Eine Anzahl von gefundenen Fehlern (Number)
• Den Namen eines Tests (String)
• Ob der Test erfolgreich war (Boolean)
• Eine nicht zugewiesene Variable (undefined)

let fehlerAnzahl = 3;
let testName = "Login-Test";
let testErfolgreich = true;
let nichtZugewiesen;

console.log(fehlerAnzahl);
console.log(testName);
console.log(testErfolgreich);
console.log(nichtZugewiesen);

d. Übung: Arrays für Testdaten verwenden

Erstelle ein Array mit verschiedenen Benutzernamen für Tests. Füge einen neuen Benutzernamen hinzu, gib die Gesamtanzahl aus und greife auf den ersten und letzten Benutzernamen zu.

let testBenutzer = ["admin", "user123", "testuser"];

// Neuen Benutzer hinzufügen
testBenutzer.push("poweruser");

console.log(testBenutzer.length);
console.log(testBenutzer[0]);
console.log(testBenutzer[testBenutzer.length - 1]);

e. Übung: Funktion für Testvalidierung schreiben

Schreibe eine Funktion validatePassword, die prüft, ob ein Passwort mindestens 8 Zeichen lang ist. Die Funktion soll true oder false zurückgeben. Teste sie mit verschiedenen Passwörtern.

function validatePassword(password) {
  if (password.length >= 8) {
    return true;
  } else {
    return false;
  }
}

console.log(validatePassword("123"));                 // false
console.log(validatePassword("sicheresPasswort123")); // true
console.log(validatePassword("test123"));             // false

f. Übung: Testergebnisse mit Bedingungen auswerten

Schreibe eine Funktion, die je nach Anzahl der gefundenen Fehler eine Bewertung zurückgibt. Bei 0 Fehlern lautet sie „Perfekt“, bei 1 bis 3 Fehlern „Gut“ und bei mehr als 3 Fehlern „Überarbeitung nötig“.

function bewerteFehler(anzahlFehler) {
  if (anzahlFehler === 0) {
    return "Perfekt";
  } else if (anzahlFehler <= 3) {
    return "Gut";
  } else {
    return "Überarbeitung nötig";
  }
}

console.log(bewerteFehler(0));   // Perfekt
console.log(bewerteFehler(2));   // Gut
console.log(bewerteFehler(5));   // Überarbeitung nötig

g. Übung: Code-Wiederverwendung mit Export/Import

Erstelle eine Datei testUtils.js mit wiederverwendbaren Test-Hilfsfunktionen. Exportiere sie und importiere sie in einer anderen Datei. In playcode.io kannst du das Konzept auch in einer einzigen Datei nachbauen.

// ===== Simulation von testUtils.js =====
// Diese Funktionen würden normalerweise exportiert werden
function generateTestData() {
  let daten = ["Testdaten-1", "Testdaten-2", "Testdaten-3"];
  return daten;
}

function logTestResult(testName, erfolgreich) {
  let status = erfolgreich ? "✓ BESTANDEN" : "✗ FEHLGESCHLAGEN";
  console.log(testName);
  console.log(status);
}

// ===== Simulation der Haupt-Testdatei =====
// Normalerweise würde hier import { generateTestData, logTestResult } from './testUtils.js'; stehen

// Funktionen verwenden
let meineDaten = generateTestData();
console.log(meineDaten);

logTestResult("Login-Test", true);
logTestResult("Navigation-Test", false);

Fazit: Dranbleiben und ausprobieren

Mit Variablen, Datentypen, Arrays, Funktionen, Bedingungen und await kennst du jetzt die Bausteine, die in fast jedem Playwright-Test vorkommen. Je mehr du spielerisch ausprobierst, desto besser verstehst du, wie JavaScript funktioniert.

Öffne am besten gleich playcode.io und löse die erste Übung, ohne in die Lösung zu schauen. Danach nimmst du dir jeden Tag eine weitere vor. Wenn du die Grundlagen lieber gemeinsam mit anderen lernen möchtest, schau dir unsere Online-Schulung JavaScript Grundlagen für Einsteiger an.