Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

[Rued]

Zitat von jaenicke:

Du kannst auf einer im EdgeBrowser angezeigten Webseite Skripte mit ExecuteScript ausführen. Das Ergebnis bekommst du in OnExecuteScript.
Siehe diesen Blogeintrag dazu

Ich erhoffte mir Antworten darauf, wie ich - s. o. - das einzelne Kästchen identifiziere kann, um es dann per ExecuteScript zu "checken". Wenn ich den Blogeintrag richtig verstehe, hilft er mir hinsichtlich der Elemente-Indentifizierung nicht weiter - oder?

[gubbe]

Du kannst es ausprobieren auf der Konsole in den Entwicklertools im Browser.

Die Kästchen als Array bekommst Du z.B. mit

document.getElementById('tip-field-1').getElementsByClassName('box')

oder einzelne dann mit

document.getElementById('tip-field-1').getElementsByClassName('box')[0]

[jaenicke]

Ups, den Satz mit ExecuteScript habe ich übersehen, Entschuldigung.

Die Identifizierung scheint ja über data-value zu passieren. Entsprechend kommst du so da heran:

Code:

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

Oder du holst dir alle DIVs

Code:

document.querySelectorAll('div.box')

und iterierst darüber

Code:

boxes.forEach((box) => {
    box.getAttribute('data-value')
...

[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')