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 Playwright, Cypress oder Selenium 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
| Datentyp |
Beschreibung |
Wert |
Beispiel |
| Number |
Ganze Zahlen oder Dezimalzahlen |
42, 3.14 |
let peopleCount = 42; |
| String |
Text (immer in Anführungszeichen) |
"Hallo Welt" |
let greeting = "Hallo Welt"; |
| Boolean |
Wahrheitswerte |
true, false |
let isTestSuccessful = true; |
| undefined |
Variable ohne Wert |
|
let x; |
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.
💡 Lösung anzeigen
// 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.
💡 Lösung anzeigen
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)
💡 Lösung anzeigen
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.
💡 Lösung anzeigen
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.
💡 Lösung anzeigen
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".
💡 Lösung anzeigen
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)
💡 Lösung anzeigen
// ===== 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!
