Coder Social home page Coder Social logo

pageres-cli's Introduction

pageres-cli

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.

See pageres for the programmatic API and issues tracker.

Install

npm install --global pageres-cli

Note to Linux users: If you get a "No usable sandbox!" error, you need to enable system sandboxing.

Usage

Specify urls and screen resolutions as arguments. Order doesn't matter.

If no resolution is specified it will default to 1366x768 which is the most popular resolution.

pageres <url> <resolution>
pageres <resolution> <url>

# <url> can also be a local file path.
pageres <file> <resolution>

List multiple urls and resolutions for pageres to capture all combinations.

pageres <url> <resolution> ...

pageres https://sindresorhus.com 1024x768 1366x768 # 2 screenshots
pageres https://sindresorhus.com https://example.com 1024x768 # 2 screenshots
pageres https://sindresorhus.com https://example.com 1024x768 1366x768 # 4 screenshots

Group arguments with square brackets.

pageres [ <url> <resolution> ] [ <url> <resolution> ]
pageres [ <url> <resolution> ... ]

# Mix grouped and single arguments
pageres [ https://example.com 1024x768 1600x900 ] https://sindresorhus.com 1366x768

# Options defined inside a group will override the outer ones.
pageres [ https://example.com 1024x768 --no-crop ] https://sindresorhus.com 1366x768 --crop

Screenshots are saved in the current directory.

Examples

# Basic multi-url, multi-resolution usage
pageres https://sindresorhus.com https://example.com 1366x768 1600x900

# Override outer option within group
pageres [ https://example.com 1366x768 1600x900 --no-crop ] [ https://sindresorhus.com 1024x768 480x320 ] --crop

# Provide a custom filename template
pageres https://sindresorhus.com 1024x768 --filename='<%= date %> - <%= url %>'

# Capture a specific element
pageres https://example.com 1366x768 --selector='.page-header'

# Hide a specific element
pageres https://example.com 1366x768 --hide='.page-header'

# Capture a local file
pageres unicorn.html 1366x768

Options

--verbose, -v

Verbose output to see errors if you need to troubleshoot.

--crop, -c

Crop to the set height.

pageres https://sindresorhus.com 1024x768 --crop
--delay=<number>, -d

Delay screenshot capture.

pageres https://sindresorhus.com 1024x768 --delay=3
--filename=<template>

Custom filename.

pageres https://sindresorhus.com 1024x768 --filename='<%= date %> - <%= url %>'
--overwrite

Overwrite destination file if it exists. Defaults to appending (n) to the file name if --overwrite is not set.

pageres https://sindresorhus.com 1366x768 --overwrite
--selector=<element>

Capture DOM element.

pageres https://example.com 1366x768 --selector='.page-header'
--hide=<element>

Hide DOM element. Can be set multiple times.

pageres https://example.com 1366x768 --hide='.page-header'
--no-crop

Override a global crop option within a group.

pageres [ https://example.com 1366x768 --no-crop ] https://sindresorhus.com 1024x768 --crop
--css=<string>

Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.

pageres https://sindresorhus.com --css='body { background: red; }'
pageres https://sindresorhus.com --css='style.css'
--cookie=<cookie>

Browser cookie. Can be set multiple times.

pageres https://example.com --cookie='foo=bar'
--header=<header>

Custom HTTP request header. Can be set multiple times.

pageres https://example.com --header='Cache-Control: no-cache'
--username=<username>

Username for HTTP auth.

--password=<password>

Password for HTTP auth.

--scale=<number>

Scale webpage n of times.

--format=<string>

Image format. Either png (default) or jpg.

--user-agent=<string>

Custom user agent.

--transparent

Set background color to transparent instead of white if no background is set.

--darkMode

Emulate preference of dark color scheme.

Config file

You can persist your commands into a file and run it whenever with eg. sh .pageres:

# .pageres
pageres [ https://sindresorhus.com 1000x1000 --crop ] [ https://example.com 500x500 ]
pageres [ https://google.com 1000x1000 --crop ] [ https://github.com 500x500 ]

Related

pageres-cli's People

Contributors

allensh12 avatar arthurvr avatar brudaswen avatar brutaldev avatar c0b41 avatar dwoodiwiss avatar honzajavorek avatar ionicabizau avatar janivihervas avatar kevva avatar paazmaya avatar rauberdaniel avatar samverschueren avatar scottweinstein avatar shekhargulati avatar sindresorhus avatar sushantdhiman 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

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.