At this Google Developer conference, Lighthouse engineer Eric Bidelman is here to share how Lighthouse, Puppeteer, can be used to automate our daily processes. It is an open source automation tool for improving the quality of web applications. All you need to do is provide the url, and it tests the page and generates a performance report on the page. See what you can do to improve your application.

Lighthouse values the speed at which a user loads a page for the first time, the speed at which a page displays content for the first time, the speed at which meaningful content is displayed, and the amount of time that can be interacted with.

Take a page load cycle. First the page sends the first byte to the user, then displays some non-blank images, then displays meaningful content, then displays everything, allows the user to click or whatever, and then completes the load cycle.

Method of use

You can run Lighthouse in one of two ways: as a Chrome extension, or as a command-line tool. The Chrome extension provides a user-friendly interface for easy reading of reports. The command line tool allows you to integrate Lighthouse into a continuous integration system.

Developer tools

All you need to do is open Chrome’s developer tools, click on the Audits, and you see the Lighthouse interface:

add-in

You can download and install the Lighthouse Chrome extension from the Chrome Web Store.

Command line tool

Requirement: node.js >= 5

  1. Global Installation of Lighthouse
npm install -g lighthouse
Copy the code
  1. Then enter your page
lighthouse https://example.com
Copy the code

Lighthouse automatically generates HTML reports, or you can use JSON.

Automatic part

You can also use TravisCI to automatically analyze the impact of code changes on page performance.

You just need to add the following code to.travis. Yml:

language: node_js
script:
  - npm run lint
  - npm run build
after_success:
  - ."./travis/deploy_pr_gae.sh"
  - export LH_MIN_PASS_SCORE=96
  - export LH_TEST_URL=https://your.staging.server.com/
  - node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE
Copy the code

More details can be found in the lecturer’s post on Github: ebidel/ Lighthouse -ci

Puppeteer

The underlying

Before we talk about Puppeteer, we need to mention that it’s Headless Chrome. Simply put, it’s Google Chrome without the view layer.

It allows you to test your page with the latest browser, with all the latest properties, such as CSS Grid patterns, Web push notifications, etc.

Most importantly, it exposes the programmable interfaces of developer tools, such as network conditions, analog devices, and code coverage.

For example, you can open a WebSocket and listen to what happens in the browser, such as getStyleSheetText for CSS, markUndoableState for DOM, etc.

You also can go to the website to read more extensive documentation: chromedevtools. Making. IO/devtools – pr…

Actual part

It can do most of the things you do manually in the browser. Such as:

  1. Take screenshots and generate PDF
  2. Automatic form filling, UI testing, keyboard input
  3. Testing Chrome plugins

Installation method

It downloads the latest version of Chromium and exposes the packaged interface for developers to use.

Note that the source code has a lot of async/await operations, and you can do the same with your code.

npm i puppeteer --save
Copy the code

The instructor also provides many examples for learning how to use Puppeteer.

screenshots

Let’s say I want to take a screenshot of https://example.com and save it as example.png. I just need to write a few lines of code:

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" });

  awaitbrowser.close(); }) ();Copy the code

The page data

You just use the page.metrics() method, which returns a page data object.

Code coverage

You can start testing coverage by using the methods startJSCoverage(), startCSSCoverage() in Page.coverage. And use stopJSCoverage(), stopCSSCoverage() to end the test.

Blocking network requests

You can block requests for images, or even replace them with other requests, such as HTTP over HTTPS, or images with placeholders.

Generate a report

You can generate PDFS from code, for example using the page.pdf() method.

Github.com/GoogleChrom…

PPTRAAS

These are everyday examples that repeat themselves. Puppeteer as a service [Puppeteer as a service] encapsulates the above code and uses the service by adding url parameters after the URL.

For example, you can use https://pptraas.com/screenshot?url=https://example.com/ to capture.

For more examples, visit Puppeteer as a service to use the service.

Other quality tools

The Node Debugger allows you to debug Node applications by opening developer tools in your browser.

Page Speed Insights allows you to test sites and generate reports through Google’s platform.

Afterword.

This is a fruitful harvest. I thought these tools were too technical and hard to understand, but I didn’t realize that you could test your site with a few buttons, a few lines of code, or even no code at all.

Let me make good use of these tools to optimize my personal blog

The resources

  1. Github – ebidel/lighthouse-ci
  2. Github – GoogleChrome/lighthouse
  3. Puppeteer as a service
  4. Tools for Web Developers – Lighthouse

Read more Google Developer Conference 2018 tech dry goods