WWW::Mechanize::Chrome

Max Maischein

Frankfurt.pm

English Version

https://corion.net/talks/

English Questions are OK

Überblick

  • Warum WWW::Mechanize::Chrome?

  • Was ist WWW::Mechanize::Chrome?

  • Entwicklung von WWW::Mechanize::Chrome

  • Anwendungen

Wer bin ich

  • Max Maischein

  • DZ BANK Frankfurt

  • Deutsche Zentralgenossenschaftsbank

  • Datenlösungen

Automation - Mein Leitmotiv

  • Wenn ich es manuell machen kann

  • ... kann der Computer es wiederholen

  • ... jedesmal korrekt

Meine Werkzeuge

  • Perl (na klar)

  • WWW::Mechanize

  • WWW::Mechanize::Shell (GPW 2002)

  • WWW::Mechanize::Firefox (GPW 2010)

  • WWW::Mechanize::PhantomJS (GPW 2014)

  • WWW::Mechanize::Chrome (heute)

  • (und auch Chromium, v59+)

Browser Evolution

  • Web Applications sind immer noch cool

  • Web Service Workers sind ein weiterer Layer

  • PhantomJS wird nicht mehr weiterentwickelt

  • Firefox bekämpft Erweiterungen

Entwicklungsevolution

  • Lokale Regressionstests

  • Travis CI

Javascript (I)

  • Javascript::SpiderMonkey ( Mike Schili, Thomas Busch auf CPAN )

  • Nur Javascript, kein DOM

  • Javascript::Duktape ( Mahmoud A. Mehyar auf CPAN )

  • Nur Javascript, kein DOM

  • Installierbar über CPAN

  • Windows braucht Patch

Javascript (Ia)

  • Javascript::Engine ( Father Chrysostomos/SPROUT auf CPAN )

  • Pure Perl, laaangsam

  • JavaScript::Any

Javascript (II)

  • Anerkannte Plattform

  • Kompatible Plattform

  • Interaktive Plattform

  • WWW::Mechanize::Chrome

Interaktivität ist nicht alles

  • Chrome ist ein Browser, mit meinen Cookies

  • Chrome möchte ein UI Fenster

  • --headless

Steuerung

  • Chrome

Steuerung

  • Chrome

  • Chrome DevTools

Steuerung

  • Chrome

  • Chrome DevTools

  • WebSocket

Steuerung

  • Chrome

  • Chrome DevTools

  • WebSocket

  • AnyEvent oder Mojolicious

Steuerung

  • Chrome

  • Chrome DevTools

  • WebSocket

  • AnyEvent oder Mojolicious

  • WWW::Mechanize::Chrome

Steuerung

  • Chrome

  • Chrome DevTools

  • WebSocket

  • AnyEvent oder Mojolicious

  • WWW::Mechanize::Chrome

  • Mein Programm

Definition von WWW::Mechanize::Chrome

  • eine erweitertes Schnittstelle

  • von WWW::Mechanize

  • mit Chrome als Backend

WWW::Mechanize::Chrome

 1:  my $mech = WWW::Mechanize::Chrome->new();
 2:  $mech->get('http://act.yapc.eu/gpw2017');
 3:  $mech->content_as_png();

Features

  • Normale WWW::Mechanize API

  • Javascript

  • CSS Selektoren (via HTML::Selector::XPath)

  • XPath Selektoren

  • Javascript Fehlermeldungen!

Wozu kann ich WWW::Mechanize::Chrome verwenden?

  • Webseitenautomation

  • Integrierte JS Unit Tests

  • Websockets belauschen

  • Android Browser fernsteuern

Live Demo

Chrome steuern

01-open-local.pl

 1:  my $mech = WWW::Mechanize::Chrome->new();
 2:  $mech->get_local('file.html');

Live demo

Webseite Test auf Usability

02-dump-links.pl

 1:  my $mech = WWW::Mechanize::Chrome->new();
 2:  $mech->get_local('links.html');
 3:
 4:  print $_->get_attribute('href'),
 5:        "\n\t-> ",
 6:        $_->get_attribute('innerHTML'), "\n"
 7:    for $mech->selector('a.download');

Live demo

Javascript ausführen

03-javascript.pl

 1:  // Javascript
 2:      
 3:      
 4:      
 5:      " ".join(["Just","another","Perl","Hacker"]);

Live demo

Javascript ausführen

03-javascript.pl

 1:  # Perl
 2:  my $mech = WWW::Mechanize::Chrome->new(
 3:      headless => 1,
 4:  );  
 5:  
 6:  print( ($mech->eval_in_page(<<'JS'))[0]);
 7:      " ".join(["Just","another","Perl","Hacker"]);
 8:  JS

Screenshots zur Dokumentation/logging

  • Google Keep Clone

  • Javascript+Perl

  • Service worker

  • Tests

Screenshots zur Dokumentation

05-screenshot-online.pl

 1:  my $mech = WWW::Mechanize::Chrome->new();
 2:  my $url= 'https://corion.net/notes.psgi';
 3:  print "Loading $url\n";
 4:  $mech->get($url);

End-to-end Test of JS app

06-create-note.pl

 1:  $mech->get($url);
 2:
 3:  $mech->sleep( 5 );
 4:  # Create note
 5:    $mech->eval_in_page(<<'JS', $name);
 6:  ...

End-to-end Test of JS app

06-create-note.pl

 1:  $mech->get($url);
 2:
 3:  $mech->sleep( 5 );
 4:  # Create note
 5:  $mech->eval_in_page(<<'JS', $name);
 6:      var item = {
 7:          title : "Hallo Perlworkshop",
 8:          body : "Erstellt mit WWW::Mechanize::Chrome",
 9:          ...
10:      };
11:      saveItem( item );
12:  JS
13:  sleep 1;

Convert HTML to PDF

Kleiner Scherz!

saveToPDF ist dokumentiert, funktioniert aber nicht unter Windows Chrome 59 bis 61.

07-screenshot-pdf.pl

 1:  my $mech = WWW::Mechanize::PhantomJS->new();
 2:  my $url= 'http://localhost:5000';
 3:  print "Loading $url\n";
 4:  $mech->get($url);
 5:
 6:  $mech->render_content(
 7:      format => 'pdf',
 8:      filename => 'screen.pdf'
 9:  );

API-Erweiterungen

  • Alerts (window.alert())

  • $mech->on_dialog(...)

  • $mech->handle_dialog( 1 );

  • Browser Console

Voraussetzungen für WWW::Mechanize::Chrome?

  • Chrome / Chromium

  • WWW::Mechanize::Chrome

  • AnyEvent oder Mojolicious

Was fehlt WWW::Mechanize::Chrome?

  • API Implementation (->post() , ...)

  • Documentation

Fehlende API Implementation

  • ->post()

Need-driven Development

NDD

Need-driven Development

NDD

Need-driven Development

Need-driven Development

  • Einfache Sachen zuerst

  • ->post() halb implementiert

  • Bisher kein Bedarf

  • HTTP::Cookies::Chrome für Cookie-Management

Fehlende API

API für

  • Browserfenster (open, close, popup)

  • Downloads

  • Event API? Callback API?

Fehlende Dokumentation

  • Documentation für die API

  • WWW::Mechanize::Chrome

  • Documentation für FAQs

  • WWW::Mechanize::Chrome::Examples

Fehlende Dokumentation

  • Umschreiben der ::Firefox Documentation

  • WWW::Mechanize::Chrome::Examples

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox
 2:  
 3:  Display        Optional   Nein           Ja

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox
 2:  
 3:  Display        Optional   Nein           Ja
 4:
 5:  Cookies
 6:    persistent   Ja         Nein           Ja

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox
 2:  
 3:  Display        Optional   Nein           Ja
 4:
 5:  Cookies
 6:    persistent   Ja         Nein           Ja 
 7:  Custom
 8:    certificates Ignore     Easy           Hard

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox
 2:  
 3:  Display        Optional   Nein           Ja
 4:
 5:  Cookies
 6:    persistent   Ja         Nein           Ja 
 7:  Custom
 8:    certificates Ignore     Easy           Hard
 9:  Dialogs        Ja         Possible       Hard

Vergleich der Module

 1:                 Chrome     PhantomJS      Firefox
 2:  
 3:  Display        Optional   Nein           Ja
 4:
 5:  Cookies
 6:    persistent   Ja         Nein           Ja 
 7:  Custom
 8:    certificates Ja         Easy           Hard
 9:  Dialogs        Ja         Possible       Hard
10:  Dialogs        Easy       Possible       Hard

Erfahrungen in der Entwicklung

Erfahrungen in der Entwicklung

The Good

  • Testsuite von WWW::Mechanize::Firefox und ::PhantomJS

  • API von WWW::Mechanize

  • Erfahrung mit ::Firefox

  • 32bit App, 64bit Perl -> TCP!

  • Future ideal statt Callbacks

  • WebSocket trivial durch AnyEvent oder Mojolicious

  • API viel besser als Selenium

A look back on the development of WWW::Mechanize::Chrome

The Good, the Bad

  • Kein PDF-Support obwohl dokumentiert

A look back on the development of WWW::Mechanize::PhantomJS

The Good, the Bad, the Ugly

  • API Abdeckung durch Tests

  • Feine Unterschiede zwischen ::Firefox , ::PhantomJS and ::Chrome

Sample code

Der Code ist auf CPAN unter

WWW::Mechanize::Chrome::Examples

Danke

Danke

Fragen?

Danke

Fragen?

Slides sind online:

https://corion.net/talks/

WWW::Mechanize::Chrome on CPAN

https://github.com/corion/www-mechanize-chrome on Github

Bonus Section

Ausblick

  • Firefox --headless

  • seit gerade eben unter Windows

  • nur Selenium (PhantomJS)

  • Firefox hasst Erweiterungen und XUL

Ausblick

  • Screencast Modus

  • Automatisches Replay bei Fehlern

Danke

Fragen?

Danke

Fragen?

Slides sind online:

https://corion.net/talks/

WWW::Mechanize::Chrome on CPAN

https://github.com/corion/www-mechanize-chrome on Github