1. @ice/screenshot
Take a screenshot of web page
@ice/screenshot
Package: @ice/screenshot
Created by: alibaba
Last modified: Tue, 04 Jul 2023 03:11:12 GMT
Version: 0.1.9
License: MIT
Downloads: 12
Repository: https://github.com/alibaba/ice/tree/master/packages/ice-screenshot

Install

npm install @ice/screenshot
yarn add @ice/screenshot

@ice/screenshot

Take a screenshot of a web page in the terminal.

Options:

-V, --version                output the version number
-u, --url <url>              The target url or path to local server
-l, --local [local]          Set up a local server in [local] directory and take screenshot, defaults set up in `./`
-s, --selector <selector>    Select a element through CSS selector
-o, --output <output>        Output path
-h, --help                   output usage information

Usage

Install:

 $ npm i -g @ice/screenshot

For ICE materials, you can take screenshot use following commands:

 # for scaffold
$ npm run build && screenshot -l

# for block
$ npm run build && screenshot -l -s \#mountNode

Others:

 # take a screenshot of taobao.com
$ screenshot -u https://www.taobao.com

# take screenshot of a element
$ screenshot -u https://www.taobao.com -s .service.J_Service

# take screenshot export to ~/taobao.jpg
$ screenshot -u https://www.taobao.com -o ~/taboa.jpg

# Set up local server in current working directory and take screenshot of http://localhost:8100/public/index.html
# By default, this will run the contents of current directory on a local server, the URL is http://localhost:8100
$ screenshot -u /public/index.html -l

# Set up local server in ./public directory and take screenshot of http://localhost:8100/index.html
# By default, this will run the contents of `public/` directory on a local server, the URL is http://localhost:8100
$ screenshot -u /index.html -l ./public

Puppeteer

The CLI based on Puppeteer. But we don't want to depend on puppeteer locally, because puppeteer takes a long to install, it's easy to install failed. So we will find puppeteer in the local node_modules, if not found, find in the global node_modules, if still not found, we will install it globally, and you don't need to install it again next time.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin