JavaScript Basics für Testautomatisierung - Teil 1

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 zentrale Programmiersprache fürs Web. Seit ihrer Entstehung Mitte der 1990er Jahre gehört sie zum Standard jedes Browsers. Heutzutage wird JavaScript nicht nur von Webseiten genutzt, sondern auch für serverseitige Anwendungen. Für Softwaretester ist JavaScript daher besonders spannend, weil viele moderne Testtools wie Cypress oder Playwright darauf basieren.

1. Hilfswerkzeuge

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. Beispiele:

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

Mit console.log() kannst du Werte in der Konsole anzeigen lassen. Das ist besonders praktisch zum Lernen und wichtig für die folgenden Abschnitte. Merke dir vorerst nur: Die Schreibweise von console.log() und dass du den Wert, den du ausgeben möchtest, in die Klammern setzt. So sieht das aus:

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

2. 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 Variablennamen und weist ihr den Wert mit dem Gleichheitszeichen = zu. Jede Anweisung endet mit einem Semikolon ;.

let variablenname = wert;

Hier sind konkrete Beispiele:

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

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

3. Primitive Datentypen

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

4. Arrays

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

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

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

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

// Ein Element entfernen
früchte.pop();
console.log(früchte);        // ["Apfel", "Banane", "Orange"]

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

5. Funktionen

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.

Eine Funktion beginnt mit dem Schlüsselwort function. Danach folgt der Funktionsname. In runden Klammern ( ) kannst du Parameter angeben, also Eingabewerte, die die Funktion benötigt. Diese Parameter, zum Beispiel parameter1 und parameter2. Der eigentliche Code wird in geschweifte Klammern { } geschrieben, der sogenannte Funktionskörper. Optional kann die Funktion mit return ein Ergebnis zurückgeben, das du später weiterverwenden kannst.

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

Ein paar Beispiele:

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

greetings("Max");  // Ausgabe: Hallo Max!
greetings("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

6. Bedingungen

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

Wichtige Vergleichsoperatoren

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

Beispiel einer if-else Bedingung

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
} else {
  console.log("Die Zahl ist 10 oder größer");
}

7. Schlüsselwort await

In JavaScript laufen manche Vorgänge, wie zum Beispiel das Abrufen von Daten, verzögert ab, also asynchron. Mit dem Schlüsselwort await sorgst du dafür, dass JavaScript auf das Ergebnis wartet, bevor es mit dem nächsten Schritt weitermacht. Für Testeinsteiger ist zunächst nur wichtig: Merke dir await und setze es ein, wenn eine Funktion mit async gekennzeichnet ist, damit dein Testcode wirklich synchron abläuft. Bei Playwright ist das häufig nötig, wenn du auf einen Seitenaufruf wartest oder auf ein Element, das erst geladen werden muss.

8. Wiederverwendbarkeit von Code

Wenn dein Testcode größer wird, ist es wichtig, ihn übersichtlich und gut strukturiert zu halten, damit er leicht wartbar bleibt. Das bedeutet, Funktionen und Variablen so zu schreiben, dass du sie mehrfach verwenden kannst, ohne sie jedes Mal neu erstellen zu müssen. Dafür teilst du den Code in einzelne Dateien (Module) auf, die du bei Bedarf wiederverwenden kannst. Mit den Schlüsselwörtern export und import kannst du Funktionen oder Variablen kennzeichnen und in anderen Dateien nutzen.

Die export- und import-Syntax funktioniert so: Mit export function funktionsName() machst du eine Funktion für andere Dateien verfügbar. In einer anderen Datei kannst du die Funktion dann mit import { funktionsName } from './dateiname.js' wiederverwenden. Die geschweiften Klammern { } geben an, welche Funktionen genau importiert werden, und der Pfad './dateiname.js' zeigt auf die Datei, aus der die Funktion stammt.

// Datei: mathUtils.js - Hilfsfunktionen für mathematische Operationen
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

9. Übungen

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!");

// Aktueller 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 deren Typ und Wert 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 basierend auf der Anzahl der gefundenen Fehler eine Bewertung ausgibt: 0 Fehler = "Perfekt", 1-3 Fehler = "Gut", mehr als 3 Fehler = "Ü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. (Diese Übung zeigt das Konzept - in playcode.io kannst du es als einen zusammenhängenden Code schreiben)

// ===== 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);

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!