Puppeteer Adapter

OliverIO

Der Adapter nutzt eigentlich nur das folgende package.
Dies sorgt sich um das herunterladen und das richtige ansprechen des Browsers.

https://www.npmjs.com/package/puppeteer

Hauptanwendungszweck dieses Pakets ist automatisierter Tests von webanwendungen.
Dazu wird meist die applikation in einer gekapselten virtuellen Umgebung (meist sowas wie docker) installiert, die Tests ausgeführt und am Ende die komplette Umgebung wieder weggeworfen.
Andere anwendungsfälle sind webscraping oder sowas wie hier, was aber wahrscheinlich bei weitem nicht so oft in der Welt angewendet wird.

Das deinstallieren von Browsern wurde erst letztes Jahr hinzugefügt
https://github.com/puppeteer/puppeteer/pull/10179
Ob das im Adapter berücksichtigt ist weiß ich nicht.

Die Ursache deiner Fehler kann vielfältig sein.
Bei flot stand im Ergebnis ein net_err drin. Das deutet darauf hin, das irgendwas mit der netzverbindung nicht passt. Aber auch hier kann es vielfältig sein. Am wahrscheinlichsten sind timeouts, aber daher wollte ich das mal für mich selbst probieren um das einzugrenzen.

Bei deinem msnwetter kann es sein, das der Anbieter Begrenzungen eingebaut hat, die ein automatisiertes Abrufen verhindert. Ich selbst bin im Zusammenhang einer nieten Fragestellung letztens auch auf sowas gestoßen, das der Abruf im Browser funktioniert, mit puppeteer aber nicht. Wie die verhinderungsstrategie funktioniert weiß ich aktuell nicht.

Also ichdenke nicht das der Fehler aktuell noch an puppeteer liegt

OliverIO

@jensen sagte in Puppeteer Adapter:

also flot funktioniert bei mir

msn weather eigentlich auch, allerdings erhalte ich mit puppeteer nur die folgende seite

link ist
https://www.msn.com/en-us/weather/forecast/in-Frankfurt,Hesse

aufgrund des net_err vermute ich, das irgendwas mit dem abruf der daten von deinem nuc nicht passt.
probiere es mal direkt von dort mit curl

um im script eine bessere fehlermeldung zu erhalten ändere mal die zeile zu.
da waren die falschen anfürhungszeichen drin und message ist da auch nicht vorhanden.
ich frage mich wie du die fehlermeldung weiter oben produzieren konntest?

        log(`Error taking screenshot: ${obj.error}`, 'error');

wenn der timeout von puppeteer nicht reicht, dann solltest du die folgende option einbauen

waitForTimeout

    sendTo('puppeteer.0', 'screenshot', { 
        url: _url,
        path: '../../images/' + _output,
        viewportOptions: {
            width: 700,
            height: 300
        },
      renderTime: 20000,
      waitOption: {
        waitForTimeout: 20000,
      },

der generelle timeout ist auf 5 sekunden eingestellt, was eigentlich reichen sollte.

überprüfe auch mal noch deinen bilderpfad, ob der existiert.
evtl mal ohne pfad nur mit img.png eintragen, dann findest du das bild unter /opt/iobroker/ioberoker-data

Jensen

@oliverio
Für msnweather brauchst du die von mir geparste Datei.
msnweather1.html
(Bitte nicht an den komischen Zeichen vor dem °C stören, das ist ein anderes Thema.

Was ist der Unterschied bei diesen verschiedenen Apostrophen?
Ich habe meine Log Zeile geändert.
Die waitOption habe ich auch dazu gebaut.

Ergebnis:

javascript.0
   2024-09-09 15:48:27.524	error	script.js.test.PuppeteerSample3: Error taking screenshot: timeout
javascript.0
   2024-09-09 15:48:07.516	info	script.js.test.PuppeteerSample3: registered 0 subscriptions, 0 schedules, 0 messages, 0 logs and 0 file subscriptions
javascript.0
   2024-09-09 15:48:07.516	info	script.js.test.PuppeteerSample3: try to create : msnweather1.png
javascript.0
   2024-09-09 15:48:07.516	info	script.js.test.PuppeteerSample3: file:///C:/ioBroker/images/msnweather1.html
javascript.0
   2024-09-09 15:48:07.495	info	Start JavaScript script.js.test.PuppeteerSample3 (Javascript/js)

Interessant ist, ich habe waitOption auf 60000, renderTime auf 30000, aber der timeout kommt nach 20000.

Jensen

Ohne Pfad bringt auch keine Änderung.

OliverIO

@jensen

Was sagt curl?

Jensen

@oliverio
curl ?
Was muß ich tun?

OliverIO

@jensen

curl müsste seit windows 10 installiert sein.

du gehst auf die komandozeile deines nucs
am besten mit der gleichen berechtigung wie iobroker
und führst bspw das aus

in anführungszeichen steht der link.
curl ruft dann die daten ab, ungefähr so wie es puppeteer macht und gibt sie aus.
wenn irgendwelche fehler dabei angezeigt werden könnte das interessant sein

curl "https://www.msn.com/en-us/weather/forecast/in-Frankfurt,Hesse?loc=eyJsIjoiRnJhbmtmdXJ0IiwiciI6Ikhlc3NlIiwicjIiOiJGcmFua2Z1cnQgYW0gTWFpbiIsImMiOiJHZXJtYW55IiwiaSI6IkRFIiwidCI6MTAyLCJnIjoiZW4tdXMiLCJ4IjoiOC42Nzk0OTk2MjYxNTk2NjgiLCJ5IjoiNTAuMTEwOTAwODc4OTA2MjUiLCJvIjp0cnVlfQ%3D%3D&weadegreetype=C"

hier die anleitung für curl
https://curl.se/docs/manpage.html

Jensen

@oliverio
Wir müssen das verschieben.
Ich bin jetzt erst mal 2 Wochen auf Montage und hier ist die Internetverbindung momentan sehr schlecht, komme nicht per VPN auf den Rechner.

OliverIO

@jensen

alles gut. du schreibst am besten wieder in diesen thread wenns weitere fragen gibt

e_a_s_y

hallo,

ich versuche gerade vergeblich einen screenshot meiner vis zu erstellen.

nach updates funktioniert der phantomJS nicht mehr der das seit 2 jahren gut erledigt hatte.
daher bin ich nun zu puppeteer gewechselt.

mittels send-to wird hier auch ein screeshot erstellt. leider aber zu früh so das nicht alles mit drauf ist.

laut der docu von puppetier gibt es hier den rendertime parameter, leider ist dieser aber im beispiel nicht mit drin.

ich habe einiges versucht und dann versucht im netz etwas zu finden.
lande aber immer wieder hier.

kann mir evtl. jemand erklären was ich falsch mache. ich bräuchte nur eine verzögerung von 8-10 sekunden erhalte aber immer nach 5s das bild. (oder teile davon)

hier mein test-script:

sendTo('puppeteer.1', 'screenshot', { 
        url: 'http://192.168.5.153:8082/vis/?main#Heizung',
        ioBrokerOptions: { storagePath: 'tempt.png'  },
        path: 'c://iobroker//test-screenshot-heizung.png',
        fullPage: false,
        omitBackground: true,
        encoding: 'binary',
        captureBeyondViewport: false,
        renderTime: 8000,
    });

e_a_s_y

@e_a_s_y

nach 2 abenden testen ohne erfolg hier eine notlösung.

nur für mich wenn ich wieder hier lande:

in datei: ...node_modules\iobroker.puppeteer\build\main.js

await this.delay(7000);

hinter die wait condition einfügen (ca. zeile 105 & ca. zeile 170)

mcm1957

@e_a_s_y
Hast du ein Issue im Adapter repository eröffnet und dein problem (und deinen9 Workaround dort abgelegt?

Ohne issue wird da siher nichts gendert / gefixed / verbessert.

https://github.com/foxriver76/ioBroker.puppeteer/issues

liv-in-sky

@e_a_s_y

hast du mal waitForTimeout oder waitForSelector probiert - siehe: https://github.com/foxriver76/ioBroker.puppeteer

e_a_s_y

@liv-in-sky
ja die hatte ich versucht zu mit einzubinden, selector schließt das die rendertime ja aus, das steht auch so im code, das konnte ich sehen. leider ist mir nicht ganz klar was ein selector sein soll. vermute das es ein div mit einem tag ist. das kann ich aber so bei der vis nicht ganz hinten einbauen.
ich hab in meiner vis auch noch iframes mit highchart-diagrammen, auch hier laden die kurven etwas verzögert.
so blöd es auch ist timer zu verweden, aber hier passt das schon.

das timeout ändert leider nichts da die seite der vis ja antwortet und der hintergrund auch meist schon geladen ist.
die elemente fehlen zwar meist oder viele. aber selbst mit langem TO (60s) macht der adapter nach ca 5s das bild.

so wie es im code steht sollte es eigentlich funktionieren macht es aber leider nicht, hatte etwas rum probiert aber nur der WA hat das ergebniss gebracht.

bin ich wiedermal der erste der die vis ablichten will?
sind alle anderen seiten in <5s schon fertig?
oder gibts noch einen adapter der für so etwas taugt.

OliverIO

@e_a_s_y

Mit selektoren sind die css selektoren gemeint.Alternativ kannst du auch xpath verwenden.
Also ein Mechanismus jedes beliebige html Element zu adressieren.
Puppeteer wartet dann darauf, das dieses Element dem der Dom hinzugefügt wird und sagt dann, nun ist die Seite geladen. Das ist besonders wichtig bei Seiten, bei denen Seiteninhalte dynamisch nachgeladen werden und erst bei Verfügbarkeit es dann weitergehen soll.

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Life auf einer Seite kannst du das in den webdeveloper Tools von Chrome in der Konsole mit
https://developer.chrome.com/blog/search-dom-tree-by-css-selector
Ausprobieren

liv-in-sky

@e_a_s_y

lt. github page ist die syntax anders angegeben, als du es oben zeigst - https://github.com/foxriver76/ioBroker.puppeteer

github:

waitOption?: {
        /**
         * Define a Timeout in ms
         */
        waitForTimeout?: 5000,
    
        /**
         * Wait for a given id/tag/etc to be occured
         */
        waitForSelector?: '#testId'
      },

bin mir nur nicht sicher, ob das fragezeichen richtig ist bei waitOption?

hast du das mal getestet ?

OliverIO

@liv-in-sky

Fragezeichen bedeutet, das der Parameter optional ist.

e_a_s_y

@liv-in-sky

ja das hatte ich getestet.

ich hatte das fragezeichen so gedeutet das der paramater anzupassen ist.
mit fragezeichen wird er als fehlerhaft markiert.

wie schon geschrieben den selector habe ich noch nicht ganz verstanden und kann den auch aktuell nicht einbauen.
eine änderung des timeouts bringt nichts. da der adapter davon aus geht das die seite geladen wurde sobald der hintergrund aufgebaut ist.
die vis läd dann aber erst nach und nach die elemente und diagramme.
selbst in der entwiklerconsole vom browser sieht man das an der eigentlichen seite nichts mehr passiert.

der timeout ist ja nur für den fehler fall , falls keine daten kommen.

ich bräuchte die rendertime diese steht zwar auf der seite noch in der doku, allerdings ist die im beispiel nicht mehr mit drinn.
da dort auch geschrieben steht das jede wait-option die rendertime aushelbelt habe ich dann auch darauf verzichtet.
habe in summe ca. 24h damit rum probiert

@OliverIO

danke für die bestätiging, soetwas in der art hatte ich vermutet, dache zwar das es html-div-tags sind aber war ja nah drann.
ich schaue mir die sache bei gelegenheit mal an und versuche mal ein css element in die vis zu bauen.
evtl. kann ich auch einen vorhanden nutzen.
danke für den tip.

OliverIO

@e_a_s_y sagte in Puppeteer Adapter:

danke für die bestätiging, soetwas in der art hatte ich vermutet, dache zwar das es html-div-tags sind aber war ja nah drann.
ich schaue mir die sache bei gelegenheit mal an und versuche mal ein css element in die vis zu bauen.
evtl. kann ich auch einen vorhanden nutzen.
danke für den tip.

ach vis. das ist speziell
dort werden ja elemente ebenfalls dynamisch erstellt, allerdings ist die reihenfolge nicht gesichert. d.h. wenn du auf ein element (bspw eine element mit einer widget id) wartest, heißt das nicht, das das auch das letzte element ist.

bei vis würde ich dann einfach mit einem timeout arbeiten

tatsächlich ist sogar eine callback funktion onReady vorgesehen
https://github.com/ioBroker/ioBroker.vis/blob/8518f7fbadf76519b3c6bceb5a34e298b9257c0a/www/js/vis.js#L3405
allerdings wird diese nie belegt
https://github.com/ioBroker/ioBroker.vis/blob/master/www/js/vis.js#L3999

e_a_s_y

@oliverio

ok, super, läuft doch.

ja so hatte ich das auch im gefühl. daher wollte ich dann nicht noch mehr zeit investieren.
bin wohl wirklich der erste der die vis ablichtet.

bevor fragen kommen.
das mache ich weil ich überall unsichtbare buttons drüber habe um diagramme im popup zu öffnen.
leider hat sich herrausgestellt das dies recht unpraktisch ist wenn man auf dem phone mal zoomen und schieben will.
daher gibt für das phone eine website mit dem foto der vis welches zyklisch erstellt wird. (... sofern das möglich ist...)

Community Forum

NEWS

Puppeteer Adapter

Support us

715

32.4k

81.4k

1.3m