Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

[Rued]

Ich will auf einer website einen mit JavaScript gebildeten Totoschein mit 12 Tippfeldern aus meinem Programm heraus ausfüllen. Die website lade ich in den EdgeBrowser meines Programms. Das Thema DOM ist mir völlig fremd muss ich gestehen, so dass ich mir Antwort darauf erhoffe, wie ich das einzelne Kästchen identifiziere kann, um es dann per ExecuteScript zu "checken".

Dem Anhang habe ich den Ausschnitt eines Spielscheins beigefügt.

Das Tippfeld 1 wird so eingeleitet:

Code:

<div id="tip-field-0" class="field toto13-field field0" data-field-number="1" data-action-layer="">

Der Code für die drei Checkboxen der ersten Begegnung, bei der die "1" gechecked ist, lautet:

Code:

<div class="toto13-tiprow" tabindex="-1" data-tab="0" role="contentinfo" aria-labelledby="span-0">
<div class="box checked" data-value="1" data-row="0">
1
</div>
<div class="box" data-value="2" data-row="0">
0
</div>
<div class="box" data-value="3" data-row="0">
2
</div>
<p class="visible-xs-block clearfix">
<i data-toggle="tooltip" data-placement="bottom" class="ask fa fa-info-circle" data-original-title="RB Leipzig - Borussia Mönchengladbach"></i>
</p>
</div>

Wäre schön, wenn Ihr mir auf die Sprünge helfen könntet.

[himitsu]

Man wende sich an den Betreiber der Webseite und nutze die API! (REST)

[Rued]

Zitat:

Zitat von himitsu (Beitrag 1543002)

Man wende sich an den Betreiber der Webseite und nutze die API! (REST)

Betreiber ist Lotto-Bayern, die sind unwillig.

[himitsu]

Dann wollen sie wohl nicht, dass man ihr System automatisiert benutzt? :stupid:

[Rued]

Zitat:

Zitat von himitsu (Beitrag 1543006)

Dann wollen sie wohl nicht, dass man ihr System automatisiert benutzt? :stupid:

Kann ich mir kaum vorstellen. WestLotto ermöglicht sogar den Upload einer CSV-Datei mit Tippreihen, die anderen 15 Landes-Lottogesellschaften sehen sich dazu nicht in der Lage. Das sind alles Monopolisten, deren Spitzen umsatzunabhängig jährlich sechsstellige Boni kassieren.

Gibt es eine Antwort in der Sache?

[himitsu]

Ich sagte ja ... die API nutzen. ;)
Dass es oft Eine gibt, zeigen die vielen Handyapps. (oft geht es aber einfach nur darum, dass man die Werbung nicht umgehen kann)

Für den Download der Zahlen sind die APIs aber mehr öffentlich bekannt.

[jaenicke]

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

[Rued]

Zitat:

Zitat von jaenicke (Beitrag 1543010)

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

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

[himitsu]

Zitat:

Zitat von Rued (Beitrag 1543183)

Beim Multiline-String

DAS ist kein MultiLine-String.
Das sind mehrere aneinandergehänge, auf mehrere Zeilen verteilte, einzelne String-Konstanten.

Dieses ''' ist ein MultiLineString.

Code:

var
  s: string;
begin
  {$TEXTBLOCK LF JavaScript}  // damit vielleicht in 20 Jahren das ''' weiß, dass wie es den/die nachfolgenden Text(e) highlighten darf
  s := '''
    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);
  ''';

(auch wenn der Highlighter in unserem Forum damit noch nichts anfangen kann)

[Rued]

gubbe, DeddyH jetzt klappt es, so dass ich weitertüfteln kann, wenn es mal wieder regnet. Im Moment feinstes Wetter in La Herradura.