Websites parsen und bedienen mit puppetteer

[Marty56]

Ich hatte das Problem, dass ich per ioBroker Script eine Website bedienen und Werte auslesen wollte. Die Seite benutzt Javascript und einfaches Parsen von statischem HTML Code ist nicht möglich.
Konkret geht es um ein Capture Portal, das ich mit iobroker automatisiert bedienen möchte, also Login und Passwort eintragen möchte. Dabei bin auf die Node Library puppetteer von Google gestoßen.

https://github.com/GoogleChrome/puppeteer

Puppetteer ermöglicht es sehr einfach via node.js script, Websites aufzurufen, zu bedienen und vieles mehr.
Die Installation funktioniert sogar auf headless Systemen, wie z.B. dem Raspberry Pi, ohne Desktop Oberflächen.
Voraussetzung ist node Node v7.6.0 und höher.

Man trägt im Javascript Adapter das module 'puppeteer' ein und restartet den Adapter.
Dann muss man auf dem Raspberry noch Chromium headless installieren.
Wie das geht ist unter
https://code-flow-hjbello.blogspot.com/2018/11/make-puppeteer-work-with-raspbian-vers.html
beschrieben.

Dann kann man Puppetteer in ioBroker Scripten benutzen.

Als Test habe ich ein einfaches Script in ioBroker erzeugt, dass ein Login bei GitHub macht und ein Screencapture nach dem Login erzeugt.

// Github Login mit puppeteer
const puppeteer = require('puppeteer')
const screenshot = 'github.png';
const GITHUB_USER='Marty56';
const GITHUB_PWD='xxxxxxxxxxx';
(async () => {
  const browser = await puppeteer.launch({args:['--no-sandbox'],executablePath: '/usr/bin/chromium-browser'})
  const page = await browser.newPage()
  await page.goto('https://github.com/login')
  await page.type('#login_field', GITHUB_USER)
  await page.type('#password', GITHUB_PWD)
  await page.click('[name="commit"]')
  await page.waitForNavigation()
  await page.screenshot({ path: screenshot })
  browser.close()
  console.log('See screenshot: ' + screenshot)
})()

Mehr Beispiele gibt es unter
https://github.com/checkly/puppeteer-examples

Zum Debuggen empfiehlt sich VSCode auf einem Desktop PC, weil man da auch das Browser Fenster, das bedient wird, sehen kann und außerdem Single Step unterstützt wird.

Vielleicht habe Ihr noch tolle Ideenen, was man mit Puppetteer und iobroker alles machen kann.

[Marty56]

1. Use Case Wetterbericht

Ich war mit der Qualität der Wettervorhersage der Wetterdienste, die bei ioBroker unterstützt werden, nicht zufrieden. Das liegt natürlich nicht an den Adaptern, sondern an den Daten, die die Wetterdienste zur Verfügung stellen (besonders Yahoo war super schlecht)
Für mich, ist der Wetterbericht des Bayrischen Rundfunks, am besten. Leider gibt es davon kein maschinenlesbares Format.

Ich habe deshalb mit Puppeteer ein Script geschrieben, das die entsprechende Website aufruft, ein paar Werte in Datenpunkte schreibt und von einem Teil der Site ein Screenshot macht, den ich in Vis benutze.

schedule("0 * * * *", function (obj) {
    const puppeteer = require('puppeteer');
    (async () => {
    const browser = await puppeteer.launch({args:['--no-sandbox'],executablePath: '/usr/bin/chromium-browser'});
    const page = await browser.newPage();
    await page.goto('http://www.br.de/wettervorhersage/wetterprognose/81825/M%C3%BCnchen%20Trudering');
    //await page.goto('http://www.br.de/wettervorhersage/wetterprognose/83246/Unterw%C3%B6ssen');
    setState('precipitation_probablity',await page.evaluate(() => document.querySelector('#id23 > div > ul > li.listValue-1 > span:nth-child(3)').textContent));
    setState('precipitation_level',await page.evaluate(() => document.querySelector('#id23 > div > ul > li.listValue-2 > span:nth-child(3)').textContent));
    setState('forecast_actual_temperature',await page.evaluate(() => document.querySelector('#id23 > ul > li.mainTemp > span.semiLight').textContent));
    await page.waitFor(8000);
    await page.screenshot({path: '/opt/iobroker/iobroker-data/files/vis.0/wetter/br3wetter.jpg', clip: {x:22,y:153,width:760,height:310}});
    log('Br3Wetter parsing completed');
    await browser.close();
    })();
});

[OliverIO]

Die Daten des BR stammen vom Deutschen Wetterdienst.
Hast du den iobroker.dwd adapter schon ausprobiert?

[Marty56]

@OliverW Danke für den Hinweis.
Ja hatte ich wohl. Aber irgendein Wert, ich glaube Niederschlagsmenge, hat gefehlt. Mein Test ist aber schon länger her.