Puppeteer is the Google Chrome team’s official Headless Chrome tool. Puppeteer is a Node library that provides an advanced API to control the DevTools protocol on The Headless Chrome. It can also be configured to use the full (non-headless) Chrome. Chrome has long been the dominant browser, so Chrome Headless is set to become the industry standard for automated testing of Web applications. Using Puppeteer, you can operate both Linux and Chrome in a variety of applications. This warehouse is built to try all sorts of tricks using GoogleChrome Puppeteer; In order to have fun at the same time, learn more interesting operations.

Amway Puppeteer

What can Puppeteer do

Most of the things you can do manually in a browser can be done with Puppeteer! Here are a few examples to start with:

  • Generate screenshots and PDF of the page.
  • Grab the SPA and generate the pre-rendered content (that is, “SSR”).
  • Grab the content you need from the website.
  • Automatic form submission, UI testing, keyboard input, etc
  • Create an up-to-date automated test environment. Run tests directly in the latest version of Chrome, using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.

Puppeteer is an easy entry point

To use Puppeteer in a project, run the following command to install the Puppeteer: Puppeteer needs at least Node V6.4.0. To use async/await, only Node V7.6.0 or later supports Puppeteer. In addition, when Puppeteer is installed, it downloads the latest version of Chromium (~ 71Mb for Mac, ~ 90Mb for Linux, ~ 110Mb for Win) to work with the API.

yarn add puppeteer
# or "npm i puppeteer"Copy the code

It is very easy to use Puppeteer; This is done in a simple example: Navigate to https://example.com and save the screenshot as example.png;

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'example.png'}); await browser.close(); }) ();Copy the code

For more examples, see GoogleChrome Puppeteer Usage; After a little familiarity with the Puppeteer Api, she can manipulate the browser to do what you want for you; However, it is worth noting that it is still under development and the Api may change slightly as the release changes. Toss Puppeteer is a Github repository for all sorts of things you can do with GoogleChrome Puppeteer:

Note: Since personal information is not easy to submit, git submission has been set to ignore private configuration files. To run the following demos, manually create secretsample. js in the SRC /config directory in the secretsample. js format (🍀️).

Automatically grab the specified website articles to share to the specified website

This is based on Puppeteer grabbing links to a web page (specifically at jeffjade.com/categories/… ) and push it to the tech headlines; The purpose is to practice the initial use of Puppeteer.

Run the command

Git clone https://github.com/nicejade/toss-puppeteer NPM I recommended yarn (more) yarn run shareBlogToBlogreadCopy the code

Detailed steps

  • [X] Open the technical headline-submit page, and at the same time go to the Front-End to grab a random article, get the title, address, description.
  • [X] Simulate human operation, click on the button of “Log with Weibo” (it will jump to the page of log with Weibo);
  • [X] Simulate human operation, fill in the user name and password and “click” the login button to complete the login (redirecting to the Technical headlines – Submit page);
  • [X] Simulate artificial operation, fill previously obtained title, address, description, and “click” to submit, finished work.
  • [] Deploy it on the server, set tasks, execute them at regular intervals, and complete automatic sharing on time.

Submit a link to 🈯️

Some sharing needs, occasionally involving the need to: share a specified link (Url) to a specified website; This takes a few steps less than the above function. You can submit as many different target sites as you like, if you want to mess with it, by adding information about setting the target address, how to log in, and submitting the form. Of course, for sites that involve complex verification of login, extra processing is required. Only technical headlines are configured here, run the following command :(Update@17-12-17)

Url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSite
url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSiteCopy the code

Grab the specified web page and print it as a PDF

This is done by enabling Puppeteer to grab pages from a given website (for example, all articles from Jeffjade.com/) and print them as PDF; The aim is to become more familiar with Puppeteer.

Run the command

Git clone https://github.com/nicejade/toss-puppeteer NPM I recommended yarn (more) NPM run printWebsiteToPDFCopy the code

Detailed steps

  • [X] Go to the jeffjade.com/archives page to get the total number of blog post pages;
  • [X]axios & cheerioGrab pages and analyze, so as to get all the links to articles on the site, and store them in data;
  • [X] traverses all links (with the help ofasyncControl concurrency), after the page is rendered, print it as a PDF and save it.

Use Puppeteer to grab and print a PDF of the specified web page

One-key initializationGitmentReview system

The background that 、

Earlier in About Me, he said:

He who is independent is his own. From the very beginning, the blog used many words. After closing the service on June 1, 2017, it switched to netease Cloud to follow posts. It closed on August 1st. Simply turn to foreign Disqus, but the wall is very powerful, home although also over the wall, but still can not be very good access; Then it turned to Gitment; 😂 many words all tears, feeling quite a lot of ah – independent is their own, after free time, or their own to engage in a set of 😪, Fighting.

The Gitment mentioned here is a comment system based on GitHub Issues; Some of its own features make it a lot of advantages for maintaining “program” related topics blog. Therefore, personal blog wanqing Youcao xuan uses this comment system; However, it also has some problems, such as the need to actively initialize comments,initialize-your-comments, of course, can also use some tools to help complete ✅. For Wanqing Youcao Xuan, who has written 140+ blog posts, this is necessary. Therefore, this refers to the use of Puppeteer to initialize the Gitment comment system (note that each system structure is different, this is only for reference, but not for direct use).

Run the command

Git clone https://github.com/nicejade/toss-puppeteer NPM I recommended yarn (more) NPM run initializeGitmentCopy the code

Detailed steps

  • [X] Go to the jeffjade.com/archives page to get the total number of blog post pages;
  • [X]axios & cheerioGrab pages and analyze, so as to get all the links to articles on the site, and store them in data;
  • [X] Open Github login address: github.com/login, and enter the user name and password to complete the login.
  • [X] traverses the stored links and opens them in different Windows (with the help ofasyncControl concurrency);
  • [X] Wait until the initialization button is displayed and clicked (actually triggering the Github login link for the blog page first);

One-click initialization of Gitment comment system

Hosted blog comments can be viewed at jadeblog-backups#issues; (In fact, when using Gitment, the initialization button is triggered and the initialization is not actually complete. I guess this may be a problem with the plugin itself, or something else, which needs further investigation) (Update@17-11-23).

withPuppeteer TracePerform performance analysis

Tracing. Start and tracing. Stop can be used to create a Trace file that can be opened in the Chrome development tools or timeline viewer (only one Trace can be activated per browser at a time). See the Puppeteer Trace Api for details.

await page.tracing.start({path: 'trace.json'})
await page.goto('https://www.google.com')
await page.tracing.stop()Copy the code

Run the command

Git clone https://github.com/nicejade/toss-puppeteer NPM I recommended yarn (more) NPM run performanceAnalysisCopy the code

One-click initialization of Gitment comment system

For details on how to use Chrome Performance/Timeline, see the Chrome Developer Tools or take a look at Chrome Tutorial, which provides a detailed and ongoing reference.

As mentioned earlier, Puppeteer has the ability to operate both Linux and Chrome in a wide variety of applications. This is just something you write in your spare time for fun, but you can do more as your imagination expands. Such as advanced crawler, front-end monitoring and so on; We can mention that we can refer to similar ideas of Capture webpage and diff the dom change with Phantomjs ♨, combined with Puppeteer, MongoDB and other devices, Implement a set of front end page front end monitoring to implement regular checks, but also assist in testing, which can do more than Sentry; In the realization, to continue to explore the practice.

It should be added that the title of this article; A “big” word was added for no reason; It’s not just that “front-end developers” are doing more and more important work in related industries; And its own also need to constantly learn, enrich the knowledge base; The barriers to entry are getting tougher; All this, and so on, in advance with The Times version of the front-end resources tutorial article, visible; Unfortunately, in the chain of contempt, there are always some individual “collaborators” who lack due respect for people due to different roles in their work. Although, the individual is not as a front-end developer, encounter this kind of evil, the total will inevitably provoke chivalrous; What can be said is: whether the setting of the role is clever or not, the relevant practitioners can laugh at themselves, why outsiders light blame and slander? At the end of his essay on style, Mr. Wang xiaobo wrote, “You can only sing the devil’s advocate of a stupid thing.” The word “big”, that’s all.

@2017-12-17 In Shenzhen. Last Modify: 2017-12-17