Kikis web dengan dalang!

Pembimbing penuh dalang pt.1

Puppeteer: Alat Kuasa untuk Automasi Web

Dalam landskap pembangunan web yang serba pantas hari ini, automasi adalah penting—dan di situlah Puppeteer masuk. Dibangunkan oleh Google, Puppeteer ialah perpustakaan Node.js yang berkuasa yang membolehkan pembangun mengawal penyemak imbas Chrome menggunakan JavaScript. Sama ada anda menavigasi web dalam mod tanpa kepala untuk kecekapan atau dalam penyemak imbas penuh untuk maklum balas visual, Puppeteer menjadikannya lebih mudah berbanding sebelum ini untuk mengautomasikan tugas seperti mengikis web, ujian dan banyak lagi. Dengan Puppeteer, apa yang dahulunya memerlukan usaha manual kini hanya tinggal skrip.

Mengapa web mengikis?

Dalam projek baru-baru ini, saya bekerja dengan pelanggan yang memerlukan halaman pendaratan untuk komuniti dagangan forexnya. Dia mahukan sesuatu yang serupa dengan penanda saham yang anda lihat di MarketWatch atau Yahoo Finance, tetapi bukannya saham, dia mahukan kadar penukaran mata wang masa nyata untuk $1 USD dipaparkan di seluruh tapak.

Walaupun terdapat API tersedia yang boleh memberikan data—dengan had penggunaan dan yuran bulanan—saya melihat peluang untuk mencipta penyelesaian tersuai menggunakan Puppeteer. Dengan melaburkan sedikit masa terlebih dahulu, saya dapat mengikis dan memaparkan data secara percuma, akhirnya menjimatkan pelanggan saya daripada kos berulang.

Tapak web pelanggan: Majesticpips.com

Menyediakan dalang dibuat mudah

Sebelum kita boleh mula mengikis web untuk semua kemuliaannya, kita mesti memasang puppeteer pada aplikasi kita.

Sama seperti yang diterangkan pada dokumen

Langkah 1

Pasang perpustakaan menggunakan npm, benang atau pnpm pilihan anda.

• npm saya dalang

• benang tambah dalang

• pnpm tambah dalang

Ini akan memuat turun versi krom yang serasi semasa pemasangan yang lebih mudah untuk pemula untuk menyediakan dan berjalan dengan cepat.

Jika anda seorang pembangun yang lebih berpengalaman dan mempunyai versi krom/kromium tertentu yang anda ingin bekerjasama; kemudian memasang pakej ini

• npm i teras dalang

• benang tambah teras dalang

• pnpm tambah teras dalang

adalah yang terbaik untuk anda, pakejnya akan ringan kerana ia hanya memasang dalang dan menyerahkan versi krom kepada anda untuk membuat keputusan.

Memasang 'puppeteer' ialah pilihan yang lebih baik untuk penguji kali pertama. Ia memudahkan persediaan dan memastikan anda mempunyai versi Chromium yang berfungsi, membolehkan anda menumpukan pada menulis skrip anda.

Langkah 2

kini pada fail JS anda, anda ingin mengimport puppeteer untuk aplikasi menggunakan sistem modul ES(standard ES6) dengan versi nod 12 dan ke atas.

import dalang daripada 'dalang'; (disyorkan)
atau
import dalang dari 'puppeteer-core';

atau anda boleh menggunakan sintaks yang diperlukan untuk sistem modul commonJs untuk Node.js yang juga serasi dengan versi lama Node.js.

dalang konst = memerlukan('puppeteer');
atau
const puppeteer = memerlukan('puppeteer-core');

Langkah 3

Selepas mengimport Puppeteer, kami boleh mula menulis arahan untuk melakukan pengikisan web. Kod di bawah menunjukkan perkara yang anda perlu gunakan.

Kami melancarkan penyemak imbas menggunakan kaedah yang disediakan oleh perpustakaan ini.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Kaedah ini melancarkan tika penyemak imbas baharu.

browser.newPage() = Kaedah ini mencipta halaman (atau tab) baharu dalam contoh penyemak imbas.

browser.close() = Kaedah ini menutup tika penyemak imbas.

Dalam puppeteer.launch(), kami boleh memberikan hujah untuk menyesuaikan pelancaran penyemak imbas mengikut keutamaan kami. Kami akan membincangkan perkara ini dengan lebih terperinci dalam bahagian 2. Walau bagaimanapun, secara lalai, puppeteer.launch() mempunyai nilai pratetap, seperti mod tanpa kepala ditetapkan kepada benar.

Langkah 4

Pelayar telah dilancarkan dan kami kini mempunyai halaman yang sedia untuk melayari web. Mari kita menavigasi ke tapak web di mana kita akan mengikis beberapa data.

Untuk contoh ini, kami akan mengikis data daripada tapak web qoutes.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

Saya telah menambahkan await page.screenshot({ path: 'screenshot.png' }) pada campuran. Ini adalah alat yang hebat untuk memastikan semuanya berjalan mengikut rancangan. Apabila kod ini dilaksanakan, anda akan mempunyai fail imej dalam direktori projek anda yang menangkap keadaan semasa tapak web yang anda sedang mengikis. Anda juga boleh melaraskan nama fail mengikut keinginan anda.

Jika semuanya selesai, teruskan ke langkah 5.

Langkah 5

Sekarang skrip kami mula terbentuk, mari selami bahagian penting yang kami mengekstrak data daripada halaman web. Begini rupa skrip kami setakat ini:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

Untuk mengesahkan bahawa data berjaya dikikis, kami boleh menjalankan "nama fail pelayan" nod dalam CLI dan data akan dipaparkan dalam konsol menggunakan console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): This is where the magic happens. The evaluate method allows us to run JavaScript code within the context of the page we're scraping. It's as if you're opening the browser's developer console and running the code directly on the page.

const quotes = document.querySelectorAll(".quote");: Here, we're selecting all elements on the page that match the .quote class. This gives us a NodeList of quote elements.

const quotesArray = [];: We initialize an empty array to store the quotes we extract.

for (const quote of quotes) { ... }: This loop iterates over each quote element. For each one, we extract the text of the quote and the author.

quotesArray.push({ quote: texts, author });: For each quote, we create an object containing the quote text and the author, then push this object into the quotesArray.

return quotesArray;: Finally, we return the array of quotes, which is then stored in quotesScraper in our Node.js environment.

This method of extracting data is powerful because it allows you to interact with the page just like a user would, but in an automated and programmatic way.

Closing the Browser

await browser.close();: After scraping the data, it's important to close the browser to free up resources. This line ensures that the browser instance we launched is properly shut down.

Looking Ahead to Part 2

With this script, you've successfully scraped data from a website using Puppeteer. But we're just scratching the surface of what's possible. In Part 2, we’ll explore more advanced techniques like handling dynamic content and use Express.JS to create API functionality of scrapped data. Stay tuned as we delve deeper into the world of Puppeteer!

Atas ialah kandungan terperinci Kikis web dengan dalang!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!