Manchmal will man lästige Klick-Arbeiten im Browser einfach automatisieren. Wie das geht, lernt ihr in diesem Tutorial.

https://youtu.be/Xv9rokKD6_U

Schritt 1: Website analysieren

Beim Automatisieren geht es meist darum, Text in bestimmte Felder einzutragen oder bestimmte Buttons zu klicken. Diese Eingabefelder müssen lokalisiert werden, um später dem Browser mitzuteilen, in welche Eingabefelder etwas eingetragen werden soll. Mit einem Rechtsklick auf das Element und ein Klick auf „Element untersuchen“ im Kontextmenü, blendet die HTML-Ansicht unten im Browser ein und hebt das aktuelle Element hervor. Die einzelnen Elemente lokalisiert man jetzt folgendermaßen:

• Ist ein Attribut id="irgendwas" vorhanden, lokalisiert man das Element mit #irgendwas
• Ist ein Attribut name="irgendwas" vorhanden, lokalisiert man das Element mit [name="irgendwas"]
• Gibt es weder id noch name bleibt nur der Gang über die Umgebung des Elements: Dazu dienen alle Anhaltspunkte, die dazu geeignet sind, das Element eindeutig zu identifizieren, insbesondere umgebende Klassen und die Klassen des Elements. Beispiel: Wir wollen das Input-Feld in der p-Umgebung identifizieren <p class="input-name"><input></p> wird beispielsweise mit p.input-name input lokalisiert
• Eine genaue Dokumentation aller Selektoren, um Elemente zu lokalisieren, bietet das W3C unter diesem Link

Schritt 2: Sichergehen, dass jQuery vorhanden ist

Ist man in der Element-Untersuchen-Ansicht, gibt es unten eine Textzeile, die meist mit einem >> beginnt. Dort gibt man JavaScript-Befehle ein. Nun muss noch die jQuery-Bibliothek geladen sein. Das überprüft man, indem man dort ein „$“ eingibt und ENTER drückt. Kommt als Antwort ein „function()“, ist jQuery ordentlich geladen. Kommt stattdessen ein „undefined“, müssen wir es noch laden. Das geht, indem folgendes Kommando eingibt und ENTER drückt: „script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-latest.min.js'; document.body.appendChild(script);„. Anschließend sollte die Eingabe von „$“ ein „function()“ zurückgeben.

Schritt 3: Eingabefelder automatisch ausfüllen

Aus Schritt 1 haben wir uns die Selektoren für die Eingabefelder herausgesucht. Diese verwenden wir jetzt in einem Kommando: $('hier Selektor eintragen').val('hier Wert eintragen');

Beispiel: $('#url').val('http://launix.de');

Sind bei den Werten nicht nur feste Texte gewünscht, sondern beispielsweise der Vor- und Nachname des Xing-Kontakts, für den Sie die Kontakt-Anfrage senden, arbeiten Sie sich einfach etwas tiefer in JavaScript und jQuery hinein. Es geht im Prinzip ganz einfach, hat man erst die Grundmechanismen verstanden.

Schritt 4: den Klick auslösen

Aus Schritt 1 haben wir den Selektor für den Submit-Button herausgesucht. Für diesen lösen wir jetzt noch den Klick aus: $('hier Selektor eintragen').click();

Beispiel: $('input[type="submit"]').click();

Fazit

Ich habe bereits Stunden an Arbeit gespart bzw. konnte tausende Dinge mehr erledigen, als wenn ich alles von Hand gemacht hätte.