Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

[Rued]

gubbe, Sebastian entschuldigt bitte meine späte Reaktion, aber zum einen bin ich momentan mit dem Wohnmobil in Andalusien unterwegs, zum anderen hatte ich die - vergebliche - Hoffnung, auf offene Fragen anderweitig Antworten zu bekommen, um Euch zu schonen.

Mir ist z. B. unklar, wie ich das Kästchen-Array speichern kann oder wie ich den Befehl document.querySelector('div.box[data-value="2"]') einbaue. Gibt es zu dem Thema ein Tutorial? Ich habe nichts gefunden.

[QuickAndDirty]

Ich kenne das nur aus C#...aber die Bibliotheken sind ja beide von Anders Hejlsberg konzipiert.
Du müstest vermutlich eine TWebBrowser Komponente auf dem Form plazieren mit Browser.navigate(url) dahin navigieren und dann wie beschrieben
das dargestellte HTML dokument via screen-scraping auswerten(Browser.document = DOM).
auf Stackoverflow gibt es dieses Beispiel zum Klicken eines Buttons im DOM

Delphi-Quellcode:

//Source
//https://stackoverflow.com/questions/47126729/delphi-webbrowser-document-check-existence-of-element-by-id
uses
  MSHTML;

procedure TForm1.WebBrowser1DocumentComplete(ASender: TObject; const pDisp: IDispatch; const URL: OleVariant);
var
  Element: IHTMLElement;
begin
  if pDisp = TWebBrowser(ASender).ControlInterface then
  begin
    Element := (WebBrowser1.Document as IHTMLDocument3).getElementById('linkDtlC0-3');
    if Assigned(Element) then
      Element.click;
  end;
end;

Sh

[gubbe]

Der Code aus Stackoverflow ist hier zu alt. Da geht es noch um den Internet Explorer. Die Frage bezog sich ja schon auf den Edge-Browser.

Ankreuzen kannst Du z.B. so:

Code:

document.querySelector('div.box[data-value="2"]').classList.add('checked');

Du rufst das in Delphi mit Browser.Executescript auf.

Code:

 browser.executeScript('document.querySelector(''div.box[data-value="2"]'').classList.add(''checked'')');

Zum Ankreuzen mehrerer Kästchen kannst Du den Befehl mehrfach hintereinander schreiben mit Semikolon getrennt und natürlich fortlaufendem Wert für "data-value".
Ich wäre nur nicht sicher, ob das tatsächlich ankreuzt. Es sieht so aus, aber ggf. speichern die den Zustand nochmal separat irgendwo in JavaScript ab, wenn man die Felder anklickt. Das musst Du ausprobieren.

Wenn Du nicht nur setzen, sondern auch abfragen willst, musst Du zusätzlich das Event "OnExceuteScript" des Browsers nutzen. Der Skriptaufruf ist asynchron, d.h. Du führst das Script aus und bekommst die Antwort erst über das Event.
Der Parameter AResultObjectAsJson enthält die Antwort im JSON-Format.

z.B.

Code:

document.querySelector('div.box[data-value="2"]').classList.contains('checked')

würde als Antwort true oder false zurückgeben, je nachdem ob das Kästchen angekreuzt ist.

[gubbe]

Zusatz: Da es mehrere Tipreihen gibt, solltest Du die auch direkt ansprechen..

Die zweite z.B. so:

Code:

document.querySelector('div#tip-field-2 div.box[data-value="2"]').classList.add('checked')

[Rued]

gubbe, ich danke Dir für Deine Mühe.

Mit

Code:

browser.executeScript('document.querySelector(''div.box[data-value="2"]'').classList.add(''checked'')');

kreuze ich für die erste Begegnung die "0" an. Das klappt, somit auch das Ankreuzen von "1" und "2".

Der Code

Code:

document.querySelector('div#tip-field-2 div.box[data-value="2"]').classList.add('checked')

löst den Fehler "Undeklararierter Bezeichner", da ich nicht weiß, wo und wie ich document deklariere.

Zudem würde ich gerne einmal alle Kästchen in ein zweidimensionales Array[1..12,1..39] speichern. Von welchem Typ ist der Speicher, wie identifiziere ich, wie ersetzte ich einen Wert in An- und Abführungszeichen durch eine Variable?

Für mich ist das völliges Neuland und ein Tutorial oder dergleichen habe ich nicht finden können.

Das erste Tippfeld wird mit

Code:

<div id="tip-field-0"

bezeichnet,
die Kästchen eines Tippfeldes werden mit

Code:

<div class="box" data-value="4" data-row="1"></div>

fortlaufend nummeriert.

data-value wird von 1 bis 39 hochgezählt, data-row von 0 bis 12 (s. Anhang mit Code-Ausschnitt).

[gubbe]

Ich bin nicht sicher, ob ich es richtig verstehe, aber ich versuche mal weitere Erklärungen:

document ist nur im Browser deklariert. Der Code muss also immer von Delphi aus mit browser.ExecuteScript aufgerufen werden.

Das Skript ist nur ein String, den Du in Delphi zusammenbauen kannst. Du könntest Dir also zunächst in Delphi das Array bauen mit den Werten, die Du setzen willst.
Dann kannst Du das nochmal durchgehen und den Code zum Ankreuzen im Browser daraus generieren.

Das Ergebnis könnte dann so ähnlich aussehen:

Code:

let kaestchen = [2,5,8,11];

function ankreuzen(kaestchen, tippfeld) {
  for (const element of kaestchen) {
    document.querySelector('div#tip-field-' + tippfeld + ' div.box[data-value="' + element + '"]').classList.add('checked');
  }
}

ankreuzen(kaestchen, 1);

Diese Javascript-Code rufst dann mit browser.ExecuteScript auf.

[Rued]

Ich kann mich nur nochmals bedanken für Deine Unterstützung. Leider ist mir das Zusammenspiel von Delph-Code und JavaScript ein Rätsel.

Zunächst habe ich keine Ahnung, wie ich mehrzeiligen JavaScript-Code mit browser.ExecuteScript aufrufe.
Dann ist mir unklar, wie ich Variablen im JavaScript-Code per Delphi-Code ändere.

Daher noch einmal meine Frage nach einem Tutorial oder ähnlichem Erklärwerk.

[gubbe]

Diese Fragen haben aber nichts mehr speziell mit den Themen Browser und JavaScript zu tun. Jetzt geht es eher um Strings in Delphi.

Ab Delphi 12 kannst Du einen Multiline-String direkt im Code schreiben.

Delphi-Quellcode:

code := '''
Zeile1
Zeile2
Zeile3
'''

Dann übergibst Du einfach "code" an Executescript. Alternativ lädst Du den Code aus einer Datei (mit TFile.ReadAllText) oder baust ihn zur Not in älteren Delphi-Versionen klassisch zusammen

Delphi-Quellcode:

code := 'Zeile1'#13#10 + 
'Zeile2'#13#10 + 
'Zeile3'#13#10;

Wobei #13#10 ein CR/LF also ein Zeilenumbruch unter Windows ist.

Wenn Du Werte an Javascript übergeben willst, baust Du sie einfach in den String ein.

Angenommen, Du hast ein Delphi-Array mit den Kästchen. Dann setzt Du im Javascript einen Platzhalter und ersetzt diesen durch Deine Werte.

Delphi-Quellcode:

var
  Kaestchen: array of string;
  Code: string;
begin
  // Dein Delphi-Array
  Kaestchen := ['2', '5', '8', '11', '14'];
  // Der Javascript-Code mit Platzhalter
  Code := 'let kaestchen = [%kaestchen%];';
  // Platzhalter ersetzen durch die Werte aus dem Delphi-Array  
  Code := Code.Replace('%kaestchen%', String.Join(',', kaestchen));
  // Ergibt dann 'let kaestchen = [2,5,8,11,14];'; und kann an Executescript übergeben werden, um im Browser die Variable zu setzen
end;

Wie Du das genau machst, bleibt Dir überlassen. Die Idee ist einfach, den Javascript-Code in Delphi zusammenzubauen und mit ExecuteScript aufzurufen.

[Rued]

Beim Multiline-String erhalte ich Fehlermeldungen. Der Code "s:=..." beginnt in Zeile 160

Code:

var
s:string;
begin
s:= 'let kaestchen = [2,5,8,11];'+#13#10 +
'function ankreuzen(kaestchen, tippfeld) {' +#13#10 +
  'for (const element of kaestchen) {' +#13#10 +
    'document.querySelector('div#tip-field-' + tippfeld + ' div.box[data-value="' + element + '"]').classList.add('checked');' +#13#10 +
  '}' +#13#10 +
'}' +#13#10 +
'ankreuzen(kaestchen, 1);';

browser1.executeScript(s);

Die Fehlermeldungen:
[dcc32 Fehler] order.pas(163): E2026 Konstantenausdruck erwartet
[dcc32 Fehler] order.pas(163): E2029 Ausdruck erwartet, aber '.' gefunden
[dcc32 Fehler] order.pas(163): E2038 Ungültiges Zeichen in Eingabedatei: '"' (#$22)
[dcc32 Fehler] order.pas(163): E2038 Ungültiges Zeichen in Eingabedatei: '"' (#$22)
[dcc32 Fehler] order.pas(163): E2015 Operator ist auf diesen Operandentyp nicht anwendbar
[dcc32 Fehler] order.pas(166): E2014 Anweisung erforderlich, aber Ausdruck vom Typ 'string' gefunden

[DeddyH]

Du musst auch die einfachen Hochkommata im Javascript im Delphi-String verdoppeln. Ungetestet:

Delphi-Quellcode:

var
s:string;
begin
s:= 'let kaestchen = [2,5,8,11];'+#13#10 +
'function ankreuzen(kaestchen, tippfeld) {' +#13#10 +
  'for (const element of kaestchen) {' +#13#10 +
    'document.querySelector(''div#tip-field-'' + tippfeld + '' div.box[data-value="'' + element + ''"]'').classList.add(''checked'');' +#13#10 +
  '}' +#13#10 +
'}' +#13#10 +
'ankreuzen(kaestchen, 1);';