Kopfloses Webkit und Phantomjs

Kernpunkte

• Phantomjs, ein webkit-basierter Kopflosenbrowser, der eine schnellere programmatische Automatisierung und das Testen von Webseiten ermöglicht, ohne dass eine grafische Benutzeroberfläche erforderlich ist.
• Phantomjs bietet leistungsstarke Funktionen wie die Möglichkeit, über JavaScript mit Seiten zu interagieren, um eine einfache Automatisierung von Aufgaben wie Klicken auf Schaltflächen, Senden von Formularen und sogar das Laden und Manipulieren von Webseiten mit Bibliotheken wie Standard -DOM -API oder JQuery zu ermöglichen.
• Phantomjs bietet eine umfangreiche Dateisystem -API, mit der Anwendungen Quellcode für das Dateisystem speichern, Screenshots von Webseiten aufnehmen und sogar externe Skriptdateien in Seiten einbeziehen können.
• Obwohl Phantomjs leistungsstark ist, ist es nicht sehr integriert in Node.js.

Wenn Sie diesen Artikel lesen, werden Sie höchstwahrscheinlich wissen, was ein Browser ist. Entfernen Sie nun die GUI und Sie erhalten den sogenannten kopflosen Browser . Ein kopfloser Browser kann dieselben Dinge wie ein normaler Browser tun, aber er ist schneller. Sie eignen sich perfekt für die programmgestützte Automatisierung und Testen von Webseiten. Derzeit gibt es viele kopflose Browser, und Phantomjs ist die beste unter ihnen. Phantomjs basiert auf Webkit, dem Motor hinter Chrome und Safari und bietet Ihnen leistungsstarke Browserfunktionen, ohne dass eine sperrige GUI erforderlich ist. Der Einstieg mit Phantomjs ist einfach - laden Sie einfach die ausführbare Datei herunter. Erstellen Sie als Nächstes eine Datei mit dem Namen hello.js und fügen Sie die folgenden Codezeilen hinzu:

console.log("Hello World!");
phantom.exit();

Um das Skript auszuführen, führen Sie den folgenden Befehl aus. Beachten Sie, dass die ausführbaren Phantomjs im aktuellen Verzeichnis oder irgendwo im Weg der Umgebung liegen müssen. Wenn alles korrekt konfiguriert ist, druckt Phantomjs "Hello World!" Zur Konsole und endet, wenn Phantom.exit () aufgerufen wird.

phantomjs hello.js

Verwenden Sie die Webseite

Nachdem Phantomjs ausgeführt wurde, können Sie das Web automatisieren. Das folgende Beispiel lädt die Google -Startseite und speichert den Screenshot in einer Datei. Zeile 1 erstellt eine neue Instanz der Webseite. Zeile 4 lädt Google.com. Nachdem die Seite geladen wurde, wird die Rückruffunktion für Onloadfineished () ausgeführt. Die Rückruffunktion empfängt einen einzelnen Parameterstatus, der angibt, ob die Seite erfolgreich geladen wird. Die URL zum Laden der Seite ist auf Seite.url verfügbar. Diese Eigenschaft ist besonders nützlich, wenn die Seite Weiterleitungen enthält, und Sie möchten genau wissen, wo Sie sich befinden. Zeile 8 verwendet die Render () -Methode der Seite, um einen Screenshot zu machen. Render () kann PNG-, GIF-, JPEG- und PDF -Dateien erstellen.

console.log("Hello World!");
phantom.exit();

Seiteneinstellungen

Viele Einstellungen von Seitenobjekten können gemäß den Anforderungen der Anwendung angepasst werden. Wenn Sie beispielsweise nur daran interessiert sind, Quellcode herunterzuladen, können Sie Ihre Anwendung beschleunigen, indem Sie die Bilddatei ignorieren und JavaScript schließen. Das folgende Umschreiben -Beispiel spiegelt diese Änderungen wider. Die geänderten Einstellungen werden in den Zeilen 3 und 4 angezeigt. Beachten Sie, dass alle Einstellungsänderungen vor dem Aufrufen von Open () vorgenommen werden müssen. Wenn Sie sich den Screenshot dieses Beispiels ansehen, werden Sie feststellen, dass das Google -Logo -Bild fehlt, der Rest der Seite bleibt jedoch gleich.

phantomjs hello.js

Zugriff auf das Dateisystem

Bisher hat unser Beispiel die Seite geladen und den Screenshot als Bilddatei gespeichert. Während dies zweifellos cool ist, bevorzugen viele Anwendungen, Quellcode in ein Dateisystem zu speichern. Phantomjs macht dies durch eine breite Palette von Dateisystem -APIs. Das folgende Beispiel verwendet das Dateisystemmodul, um Google.com -Quellcode in eine Datei zu schreiben. Importieren Sie zunächst das Dateisystemmodul in Zeile 2. Öffnen Sie in Zeile 6 die Ausgabedatei zum Schreiben. Verwenden Sie in Zeile 7 die Methode write (), um die Daten in die Datei zu schreiben. Der tatsächliche Quellcode kann über die Inhaltseigenschaft der Seite erhalten werden. Schließlich schließen Sie die Datei und beenden Sie Phantomjs.

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

Führen Sie JavaScript

aus

Eines der leistungsstärksten Merkmale von Phantomjs ist die Fähigkeit, über JavaScript mit Seiten zu interagieren. Dies erleichtert es extrem einfach, Aufgaben wie Klicken auf Schaltflächen und das Senden von Formularen zu automatisieren. Unser nächstes Beispiel führt eine Websuche durch, indem die Google -Homepage geladen, eine Abfrage eingegeben und ein Suchformular gesendet wird. Der Beginn des Beispiels sollte bekannt aussehen. Der neue Inhalt beginnt in Zeile 8 und wir bestimmen, welche Seite geladen wurde. Wenn dies die Startseite ist, wird die Methode Evaluate () der Seite aufgerufen. Evaluate () führt den Code aus, den Sie im Kontext der Seite bereitstellen. Dies gibt Ihnen tatsächlich die gleichen Berechtigungen wie der ursprüngliche Entwickler der Seite. Wie cool ist das?

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

Inside Evaluation () finden wir das Suchfeld und das Formular. Wir setzen den Wert des Suchfelds auf "JSPRO" und reichen das Formular ein. Dies führt dazu, dass die Onloadfineed () -Methode der Seite erneut abgefeuert wird. Diesmal werden jedoch Screenshots der Suchergebnisse genommen, und Phantomjs beenden. PhantomJs bietet auch zwei Methoden, einschließlich Js () und InjectJS (), mit denen Sie einer Seite externe Skriptdateien hinzufügen können. Includejs () wird verwendet, um jede Skriptdatei aufzunehmen, auf die von der Seite zugegriffen werden kann. Sie können beispielsweise den folgenden Code verwenden, um JQuery in das vorherige Beispiel einzubeziehen. Beachten Sie, dass der Anruf in Zeile 9 und die JQuery -Syntax in Evaluate () einbezogen wird.

var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};

Die Methode

injectjs () ähnelt includejs (). Der Unterschied besteht darin, dass auf die injizierte Skriptdatei nicht über das Seitenobjekt zugegriffen werden muss. Auf diese Weise können Sie beispielsweise Skripte aus Ihrem lokalen Dateisystem injizieren.

phantomjs und node.js

Leider wurde Phantomjs nicht in node.js. Einige Projekte wurden erstellt, um zu versuchen, Phantomjs von Node.js zu kontrollieren, aber sie sind alle etwas ungeschickt. Bestehende Projekte verwenden untergeordnete Prozessmodule, um Phantomjs -Instanzen zu generieren. Als nächstes lädt Phantomjs eine spezielle Webseite, die mit node.js mithilfe von Websockets kommuniziert. Es mag nicht ideal sein, aber es funktioniert. Zwei weitere beliebte Phantomjs-Knotenmodule sind Knotenphantom und Phantomjs-Node. Ich habe kürzlich angefangen, mein eigenes Phantomjs -Knotenmodul namens Ghostbuster zu entwickeln. Ghostbuster ähnelt dem Knotenphantom, versucht jedoch, die Rückrufverschachtel durch leistungsfähigere Befehle zu verringern. Je weniger Anrufe bei Phantomjs, desto weniger Zeit verschwenden Sie Kommunikation auf Websockets. Eine weitere Option ist Zombie.js, ein leichter, kopfloser Browser, der auf JSDOM gebaut wurde. Zombie ist nicht so mächtig wie Phantomjs, aber es ist ein echtes Node.js -Modul.

Schlussfolgerung

Nach dem Lesen dieses Artikels sollten Sie ein grundlegendes Verständnis von Phantomjs haben. Eine der besten Merkmale von Phantomjs ist die Benutzerfreundlichkeit. Wenn Sie mit JavaScript bereits vertraut sind, ist die Lernkurve klein. Phantomjs unterstützt auch verschiedene andere Funktionen, die in diesem Artikel nicht behandelt werden. Wie immer ermutige ich Sie, die Dokumentation anzusehen. Es gibt auch einige Beispiele, die die volle Funktionalität von Phantomjs zeigen!

FAQs über Kopflosen Webkit und Phantomjs

Was ist der Hauptunterschied zwischen kopflosen Webkit und Phantomjs?

Headless Webkit und PhantomJs sind beide Tools zur Automatisierung von Webbrowsern. Der Hauptunterschied ist jedoch ihre Funktion. Headless Webkit ist ein Browser ohne grafische Benutzeroberfläche, die es programmgesteuert für die Automatisierung, das Testen und die serverseitige Renderung steuern kann. Phantomjs hingegen ist ein kriptierbarer kopfloser Browser zur Automatisierung von Web -Interaktionen und bietet JavaScript -APIs, die automatisierte Navigation, Screenshots, Benutzerverhalten und Behauptungen unterstützen.

Ist Phantomjs noch aufrechterhalten?

Ab März 2018 wurde Phantomjs nicht mehr aktiv aufrechterhalten. Der Hauptgrund ist die Entstehung moderner, kopfloser Browser wie Chrome Headless Browsers und Firefox Headless Browsers, die mehr Funktionen und bessere Unterstützung bieten.

Was sind einige Alternativen zu Phantomjs?

Da Phantomjs nicht mehr aufrechterhalten wird, treten einige Alternativen auf. Dazu gehören Puppeteer, eine Knotenbibliothek, die eine API auf hoher Ebene zur Steuerung von Chrom oder Chrom über das Devtools-Protokoll und Selenium WebDriver bietet, eine Open-Source-Sammlung von APIs für automatisierte Testen von Webanwendungen.

Wie funktioniert Phantomjs?

Phantomjs arbeitet durch Bereitstellung einer JavaScript -API, die automatisierte Navigation, Screenshots, Benutzerverhalten und Behauptungen unterstützt. Es handelt sich um ein skriptierbares, kopfloser Webkit, das die JavaScript -API verwendet. Es bietet eine schnelle und native Unterstützung für eine Vielzahl von Webstandards: DOM -Verarbeitung, CSS -Selektor, JSON, Canvas und SVG.

Kann ich Phantomjs für das Webkriechen verwenden?

Ja, Phantomjs können zum Webkriechen verwendet werden. Sie können Webseiten mit gemeinsamen Bibliotheken wie Standard -DOM -API oder JQuery laden und manipulieren.

Wie installiere ich Phantomjs?

PhantomJs können über NPM (Knotenpaketmanager) installiert werden. Sie können den Befehl "NPM Phantomjs" im Terminal oder in der Eingabeaufforderung verwenden.

Welche Rolle spielt der kopflose Webkit beim serverseitigen Rendering?

Headless Webkit spielt eine entscheidende Rolle beim serverseitigen Rendering, da der Server Javascript-renderierte Seiten vorrenderen, sie in HTML konvertieren und dann an den Client senden. Dies verbessert die Leistung und SEO Ihrer Webanwendung.

Kann ich Headless Webkit für automatisierte Tests verwenden?

Ja, Headless Webkit ist ein hervorragendes Tool für automatisierte Tests. Sie können Tests in einer echten Browserumgebung ausführen, ohne dass eine sichtbare Benutzeroberfläche erforderlich ist.

Wie installiere ich Headless Webkit?

Der Installationsprozess von Headless WebKit hängt von dem spezifischen Tool ab, das Sie verwenden. Wenn Sie beispielsweise Puppeteer verwenden, können Sie es über NPM mit dem Befehl "NPM installieren puppeteerer" installieren.

Was sind die Vorteile der Verwendung von Kopflosen Webkit im Vergleich zu herkömmlichen automatisierten Browsern?

Headless Webkit hat mehrere Vorteile gegenüber herkömmlichen Browsern in der Automatisierung. Es ist schneller, weil es keine Zeit braucht, um das Bild zu machen. Es ermöglicht auch automatisiertes, skriptierbares Surfen, das sehr nützlich für das Testen und das Webkriechen ist.

Das obige ist der detaillierte Inhalt vonKopfloses Webkit und Phantomjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!