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.