Deno Puppeteer, how sweet!

To open source 叒 to a bunch of deno plugins, this time they are turning their attention to puppeteer, deno-Puppeteer, puppeteer_deno, deno-Puppeteer-adapter… Almost all of them were born in the last month, and even raised the question of “building the wheel”. As for how to use Puppeteer in Deno, if you just want to use it in a simple way, just follow the steps of Copy Raider. If you want to learn more about Puppeteer, it is recommended to learn in the source code!

Start with the screenshots

Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium via the DevTools protocol. Puppeteer runs as headless by default, but can run as non-headless by modifying the configuration file. Puppeteer is often used to generate screen shots and PDFS of pages, to implement SSR, to automate testing and so on. There are also many enterprise-level applications in the industry. For example, the front-end team of Uzan Mall uses Puppeteer to build a unified poster rendering service, and TCB cloud functions also support Puppeteer dependency. There are also developers who want to use Puppeteer in deno, resulting in the issue shown above.

Although some people reject the wheel, no one should object to its use for convenience. “Are these wheels too common?” I searched for Puppetter in deno-X-ranking. Both of these plug-ins are based on the puppetter source code modification – “Hug TS, hug deno”. Now that you have the wheels, try installing them!

Try puppetter on deno

Copy siege lion’s best skill is Copy, after trying the demo under the issue in the screenshot, puppeteer_deno is still available in the deno community. Just Do IT!

On the Mac, a short piece of code captures the first screen of the nuggets:

// mod.ts
/ / into the puppeteer
import puppeteer from 'https://deno.land/x/pptr/mod.ts';

/ / run Chrome
const browser = await puppeteer.launch({
  executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'});// Open the nuggets and take a screenshot to generate a PDF
const page = await browser.newPage();

await page.goto('https://juejin.cn', {waitUntil: 'networkidle2'});await page.screenshot({ path: 'juejin.png' });
await page.pdf({ path: 'juejin.pdf'.format: 'a4' });

/ / close
await browser.close();

Copy the code

To obtain juejin. PNG and juejin. PDF from the current directory, run deno run -a — Unstable mod.ts.

Get the nuggets ‘personal achievement

Originally want to from the search entry of the Denver nuggets, begin with the keyword search to the user list, and then from the user in the list of links to jump to the individual pages, but because of who not jing was stumped by the nuggets skeleton screen, another page. I use the waitFor also error, therefore, from the perspective of the useid temporarily, obtain the specified useid personal achievement, horrible code:

/ / / / mod. The ts introduced puppeteer import puppeteer from 'https://deno.land/x/pptr/mod.ts'. // Run Chrome const browser = await puppeteer.launch({executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome', headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false, }); const page = await browser.newPage(); Const uid = '1556564194374926' // jump to personal page await page.goto('https://juejin.cn/user/' + uid, {waitUntil: 'networkidle2', }) const staticInfo = await page. Evaluate (() => {const element:any = document.querySelector('.minor-area') const elementLen:number = element.getElementsByClassName('stat-item').length const obj:any = {} for(let i:number = 0; i<elementLen; i++) { obj[i] = element.getElementsByClassName('stat-item').item(i).querySelector('.content') .innerHTML.replace(/<[^>]+>/g," ") } return {obj} }) await browser.close() console.dir(staticInfo)Copy the code

The above code returns to the Nuggets’ personal achievements:

{
  obj: { "0": "Gold Digging Excellent writer"."1": "Got 2,710 likes"."2": "Articles read 386,134"."3": "Dig value 6,571"}}Copy the code

summary

In general, using Puppeteer on Deno is as good an experience as Using Node. For Copy, one more Copy of code, one more choice, and a bold experiment will always pay off, even if it’s only a small one. Make a little progress every day and get better every year!

If this article inspires you, or you have a different opinion, welcome to comment, thank you!