wip

bin/browser.js

@@ -16,6 +16,8 @@ const request = args[0].startsWith('-f ')
 
 const requestsList = [];
 
+const consoleMessages = [];
+
 const getOutput = async (page, request) => {
     let output;
 
@@ -25,6 +27,12 @@ const getOutput = async (page, request) => {
         return output;
     }
 
+    if (request.action == 'consoleMessages') {
+        output = JSON.stringify(consoleMessages);
+
+        return output;
+    }
+
     if (request.action == 'evaluate') {
         output = await page.evaluate(request.options.pageFunction);
 
@@ -111,6 +119,12 @@ const callChrome = async pup => {
             request.url = contentUrl;
         }
 
+        page.on('console',  message => consoleMessages.push({
+            type: message.type(),
+            message: message.text(),
+            location: message.location()
+        }));
+
         page.on('request', interceptedRequest => {
             var headers = interceptedRequest.headers();
 
@@ -271,7 +285,7 @@ const callChrome = async pup => {
         if (request.options.delay) {
             await page.waitForTimeout(request.options.delay);
         }
-        
+
         if (request.options.initialPageNumber) {
             await page.evaluate((initialPageNumber) => {
                 window.pageStart = initialPageNumber;

docs/miscellaneous-options/getting-console-ouput.md

@@ -0,0 +1,16 @@
+---
+title: Getting console output
+weight: 9
+---
+
+To get all output of the Chrome console call `consoleMessages`.
+
+```php
+$consoleMessages = Browsershot::url('https://example.com')->consoleMessages(); // returns an array
+```
+
+The `consoleMessages` method return an array of which each item is yet another array with these keys:
+
+- `type`: the type of output (`log`, `error`, ...)
+- `message`: the message itself
+- `location`: an array with information on where the console message was triggered. In most cases, the `url` key will contain the URL where the message was triggered.

docs/miscellaneous-options/ignore-https-errors.md

@@ -1,6 +1,6 @@
 ---
 title: Ignore HTTPS errors
-weight: 9
+weight: 10
 ---
 
 You can ignore HTTPS errors, if necessary.

docs/miscellaneous-options/passing-environment-variables-to-the-browser.md

@@ -1,6 +1,6 @@
 ---
 title: Passing environment variables to the browser
-weight: 10
+weight: 11
 ---
 
 If you want to set custom environment variables which affect the browser instance you can use:

docs/miscellaneous-options/prevent-unsuccessful-responses.md

@@ -1,6 +1,6 @@
 ---
 title: Prevent unsuccessful responses
-weight: 11
+weight: 12
 ---
 
 You may want to throw an error when the page response is unsuccessful, you can use the following method :

docs/miscellaneous-options/sending-post-requests.md

@@ -1,6 +1,6 @@
 ---
 title: Sending POST requests
-weight: 12
+weight: 13
 ---
 
 By default, all requests sent using GET method. You can make POST request to the given url by using the `post` method.

docs/miscellaneous-options/setting-an-arbirary-option.md

@@ -1,6 +1,6 @@
 ---
 title: Setting an arbitrary option
-weight: 13
+weight: 14
 ---
 
 You can set any arbitrary options by calling `setOption`:

docs/miscellaneous-options/setting-the-css-media-type-of-the-page.md

@@ -1,6 +1,6 @@
 ---
 title: Setting the CSS media type of the page
-weight: 14
+weight: 15
 ---
 
 You can emulate the media type, especially useful when you're generating pdf shots, because it will try to emulate the print version of the page by default.

docs/miscellaneous-options/setting-the-timeout.md

@@ -1,6 +1,6 @@
 ---
 title: Setting the timeout
-weight: 15
+weight: 16
 ---
 
 The default timeout of Browsershot is set to 60 seconds. Of course, you can modify this timeout:

docs/miscellaneous-options/setting-the-user-agent.md

@@ -1,6 +1,6 @@
 ---
 title: Setting the user agent
-weight: 16
+weight: 17
 ---
 
 If you want to set the user agent Google Chrome should use when taking the screenshot you can do so:

docs/miscellaneous-options/specifying-a-proxy-server.md

@@ -1,6 +1,6 @@
 ---
 title: Specifying-a-proxy-server
-weight: 17
+weight: 18
 ---
 
 You can specify a proxy server to use when connecting. The argument passed to `setProxyServer` will be passed to the `--proxy-server=` option of Chromium. More info here: https://www.chromium.org/developers/design-documents/network-settings#TOC-Command-line-options-for-proxy-settings

docs/miscellaneous-options/typing-on-the-page.md

@@ -1,6 +1,6 @@
 ---
 title: Typing on the page
-weight: 18
+weight: 19
 ---
 
 You can type on the page (you can use this to fill form fields).

docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md

@@ -1,6 +1,6 @@
 ---
 title: Using a pipe instead of a WebSocket
-weight: 19
+weight: 20
 ---
 
 If you want to connect to the browser over a pipe instead of a WebSocket, you can use:

docs/miscellaneous-options/using-cookies.md

@@ -1,6 +1,6 @@
 ---
 title: Using cookies
-weight: 20
+weight: 21
 ---
 
 You can add cookies to the request to the given url:

docs/miscellaneous-options/using-http-authentication.md

@@ -1,6 +1,6 @@
 ---
 title: Using HTTP Authentication
-weight: 21
+weight: 22
 ---
 
 You can provide credentials for HTTP authentication:

docs/miscellaneous-options/using-url-for-html-content.md

@@ -1,6 +1,6 @@
 ---
 title: Using url for html content
-weight: 21
+weight: 23
 ---
 
 Using the method *setContentUrl* you can set the base url of the request when using the *html* method. Sometimes you may have relative paths in your code. When passing a html page to puppeteer, you don't have a base url set. So any relative path present in your html content will not fetch correctly.

docs/miscellaneous-options/writing-options-to-a-file.md

@@ -1,6 +1,6 @@
 ---
 title: Writing options to a file
-weight: 21
+weight: 24
 ---
 
 When the amount of options given to puppeteer becomes too big, Browsershot will fail because of an overflow of characters in the command line.

docs/requirements.md

@@ -16,7 +16,7 @@ npm install puppeteer
 Or you could opt to just install it globally
 
 ```bash
-npm install puppeteer --global
+npm install puppeteer --location=global
 ```
 
 ### Installing puppeteer a Forge provisioned server

src/Browsershot.php

@@ -631,6 +631,16 @@ public function triggeredRequests(): array
         return json_decode($this->callBrowser($command), true);
     }
 
+    /**
+     * @return array{type: string, message: string, location:array}
+     */
+    public function consoleMessages(): array
+    {
+        $command = $this->createConsoleMessagesCommand();
+
+        return json_decode($this->callBrowser($command), true);
+    }
+
     public function applyManipulations(string $imagePath)
     {
         Image::load($imagePath)
@@ -709,11 +719,22 @@ public function createEvaluateCommand(string $pageFunction): array
 
     public function createTriggeredRequestsListCommand(): array
     {
-        $url = $this->html ? $this->createTemporaryHtmlFile() : $this->url;
+        $url = $this->html
+            ? $this->createTemporaryHtmlFile()
+            : $this->url;
 
         return $this->createCommand($url, 'requestsList');
     }
 
+    public function createConsoleMessagesCommand(): array
+    {
+        $url = $this->html
+            ? $this->createTemporaryHtmlFile()
+            : $this->url;
+
+        return $this->createCommand($url, 'consoleMessages');
+    }
+
     public function setRemoteInstance(string $ip = '127.0.0.1', int $port = 9222): self
     {
         // assuring that ip and port does actually contains a value

tests/BrowsershotTest.php

@@ -1508,3 +1508,12 @@
 
     $this->assertStringContainsString("file://", $responseUrl);
 });
+
+it('can get the console messages', function() {
+    $consoleMessages = Browsershot::url('https://bitsofco.de/styling-broken-images/')->consoleMessages();
+
+    expect($consoleMessages)->toBeArray()
+        ->and($consoleMessages[0]['type'])->toEqual('log')
+        ->and($consoleMessages[0]['message'])->toEqual('👀 I 👀 see 👀 you 👀')
+        ->and($consoleMessages[0]['location']['url'])->toStartWith('https://bitsofco.de/assets');
+});