Code Monkey home page Code Monkey logo

screenshoteer's Introduction

Screenshoteer

Makes web screenshots and mobile emulations from the command line.


Tool based on puppeteer.

Installation

npm i -g screenshoteer

You can use screenshoteer like this:

screenshoteer  --url https://www.example.com

or .html localy copy the url path from the browser

screenshoteer --url file:///Users/../index.html
screenshoteer --url file:///C:/Users/../Random-HTML-file.html

And with the help of puppeteer(Headless Chrome) it will generate screenshot of the entire web page.

Parameters:

-h help
--url web page url
--emulate - emulate web device example: --emulate "iPhone 6"
--fullpage - can be true or false. It will take screenshot of entire web page if is true. True is the default parameter.
--pdf - generate additional pdf
--w - width of the Web Page in px
--h - height of the Web Page in px
--waitfor - wait time for the page load in milliseconds
--waitforselector - wait for the selector to appear in page --el - css selector document.querySelector
--auth - basic http authentication
--no - exclude "image", "stylesheet", "script", "font"
--click - example: ".selector>a" excellent way to close popups or to click some buttons on the page.
--file - output file name (optional, otherwise based on page title and timestamp)
--theme - switch to dark or light color theme
--vd - Emulate vision deficiency 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia', 'blurredVision', and 'none'

Example:

screenshoteer  --url https://news.ycombinator.com --fullpage false

screenshoteer  --url https://www.reddit.com/r/nodejs --emulate "iPhone 7"

screenshoteer  --url https://www.nytimes.com  --emulate "Nexus 4"

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false

screenshoteer --url https://lobste.rs --pdf

screenshoteer --url https://lobste.rs --w 500

screenshoteer --url  https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

screenshoteer --url  https://site.com --auth "username;password"

screenshoteer --url https://www.nytimes.com --no "image"

screenshoteer --url https://www.nytimes.com --no "script"

screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button"

screenshoteer --url file:///Users/../index.html

screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png

screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark

screenshoteer --url https://news.ycombinator.com --vd blurredVision

List of of supported mobile devices: https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js

License

This project is licensed under the MIT License

screenshoteer's People

Contributors

ankur-omar avatar atefbb avatar builtbylane avatar crease29 avatar gianlucacesari avatar nkjoep avatar phelma avatar subsven avatar theissn avatar vid-pas avatar vladocar avatar zyszys avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

screenshoteer's Issues

Run with just width and not height

I've noticed that if I run the command with just width and no height, width is ignored.

From line 41: if (program.w && program.h) await page.setViewport({width: Number(program.w), height: Number(program.h)})

If I run it with a specified width, and height 0, I do get the specified width.
So the user can get around this but a nice addition might be to set h to 0 if it's unset.

Maybe something like this

diff --git a/index.js b/index.js
index 40f5b02..cb7b821 100755
--- a/index.js
+++ b/index.js
@@ -38,7 +38,8 @@ console.log(fullPage);
     const browser = await puppeteer.launch()
     const page = await browser.newPage()
     const d = new Date()
-    if (program.w && program.h) await page.setViewport({width: Number(program.w), height: Number(program.h)})
+    const height = !program.h?0:program.h;
+    if (program.w && height) await page.setViewport({width: Number(program.w), height: Number(height)})
     if (program.emulate) await page.emulate(devices[program.emulate]);
     await page.goto(urlvalue)
     const title = await page.title()

net::ERR_FAILED (that happens with all pages)

root@test-jlinux_denis:~/screenshoteer# node index.js --url http://distrowatch.com                                                       
http://distrowatch.com
true
Error: net::ERR_FAILED at http://distrowatch.com
    at navigate (/home/s/screenshoteer/node_modules/puppeteer/lib/FrameManager.js:120:37)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (/home/s/screenshoteer/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.goto (/home/s/screenshoteer/node_modules/puppeteer/lib/Page.js:670:49)
    at Page.<anonymous> (/home/s/screenshoteer/node_modules/puppeteer/lib/helper.js:112:23)
    at execute (/home/s/screenshoteer/index.js:75:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Password-protected pages

Great, great work on screenshoteer! I've been looking for a good scriptable solution to screen shots for a long time.

One question: what, if any, strategies might there be to get screenshoteer to work with URLs that require authentication beyond basic http auth?

SyntaxError: Unexpected token

[root@VM_0_14_centos ~]# screenshoteer  --url https://www.baidu.com
/usr/lib/node_modules/screenshoteer/index.js:33
(async () => {
       ^

SyntaxError: Unexpected token (
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)

[root@VM_0_14_centos ~]# node -v
v6.14.3
[root@VM_0_14_centos ~]# npm -v
3.10.10

waitUntil parameter

maybe add --waitUntil="networkidle2" parameter

await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});

waitUntil can be either:
load - consider navigation to be finished when the load event is fired.
domcontentloaded - consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0 - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.

CI

I see that #4 was closed.

But we should write some small tests to test on Travis CI an so on and catch regressions / bugs.

Allow local paths

Would love to be able to do:

screenshoteer --url=./test-output.html

Unauthorized characters in file names on windows

Command:
screenshoteer --url https://vk.se
OS:
Windows 10

output:
https://vk.se true (node:32328) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'C:\Users\marcu\Desktop\Västerbottens-Kuriren | Västerbottens nyhetsportal undefined 1543958297443.png' -- ASYNC -- at Page.<anonymous> (C:\Users\marcu\AppData\Roaming\npm\node_modules\screenshoteer\node_modules\puppeteer\lib\helper.js:144:27) at C:\Users\marcu\AppData\Roaming\npm\node_modules\screenshoteer\index.js:45:16 at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) (node:32328) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:32328) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

this character "|" you can not have in a file / folder name on windows

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.