Detaillierte Erläuterung der Schritte zur Implementierung der Website-Anmeldung mit Node Puppeteer (mit Code)

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Implementierung der Website-Anmeldung mit Node Puppeteer (mit Code) geben. Was sind die Vorsichtsmaßnahmen für die Implementierung der Website-Anmeldung mit Node Puppeteer? Fall, werfen wir einen Blick darauf.

Einführung in Puppenspieler

Puppenspieler ist eine vom Chrome-Team entwickelte Knotenbibliothek, die Browserverhalten wie Klicks und Sprünge steuern kann. über APIs Übertragen, aktualisieren, Ausführen von JS-Skripten in der Konsole usw. Mit diesem Artefakt ist es einfach, einen Crawler zu schreiben, sich automatisch anzumelden, Screenshots von Webseiten zu erstellen, PDFs zu generieren und Tests zu automatisieren.

Ein einfaches Beispiel für Puppenspieler

Der Code stammt von der offiziellen Website:

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();//关掉浏览器
})();

Nachdem wir den obigen Code gelesen haben, haben wir Sie können feststellen, dass 1. jeder Schritt im Code eine asynchrone Operation ist, 2. jeder Schritt einem tatsächlichen Verhalten bei der Verwendung des Browsers entspricht. Das Verständnis dieser beiden Punkte ist eine große Hilfe bei der Verwendung dieser Bibliothek. Darüber hinaus sind die beiden am häufigsten verwendeten Objekte die Browser- und Seitenobjekte. Es gibt eine Reihe von Methoden für die Objekte, mit denen die beiden Objekte bedient werden. Als nächstes schreiben wir eine kleine Demo für die Anmeldung auf der Website.

Websites ohne Verifizierungscode

Für Websites ohne Bestätigungscode geben Sie grundsätzlich die Kontonummer und das Passwort ein. Die drei Schritte zum Klicken zum Anmelden erfordern die Verwendung von zwei Methoden des Seitenobjekts: Typ wird zum Eingeben von Informationen in das Eingabefeld verwendet, und Klicken wird zum Klicken zum Anmelden verwendet. Nehmen wir als Beispiel die Anmeldung bei Douban:

const puppeteer = require('puppeteer');
const account = `123456@qq.com`;
const password = `123456`;
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://www.douban.com/');//打开豆瓣网站
 await page.type('#form_email', account);  
 await page.type('#form_password', password);
 await page.click('.bn-submit');
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

Einige Leute fragen sich, woher ich weiß, ob ich mich erfolgreich angemeldet habe, indem ich Screenshots verwende. Um anzuzeigen, dass die Anmeldung nicht erfolgreich war, gibt es einen anderen Weg wie den folgenden:

const browser = await puppeteer.launch({headless: false});//打开有界面的浏览器

Durch die Übergabe von headless: false wird tatsächlich eine Browseroberfläche geöffnet, sodass Sie in Echtzeit sehen können, wo der Code ausgeführt wird. Lassen Sie uns als Nächstes darüber sprechen, was zu tun ist, wenn Sie auf einen Bestätigungscode stoßen.

Websites mit Bestätigungscodes

Wenn Sie auf Websites mit Bestätigungscodes stoßen, können Sie Headless auf „False“ setzen, den Bestätigungscode über die Schnittstelle eingeben und überwachen Die Seite gleichzeitig Ladeereignis realisiert die Anmeldung. Der Code lautet wie folgt:

...
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
//代码中监听跳转事件
if(page.url() === 'https://www.douban.com/accounts/login'){ 
   //登录不成功
  console.log('需要输入验证码');
  //等待再一次跳转
  while(true){
    await page.waitForNavigation({
      waitUntil: 'load'
    })
    console.log(page.url())
    if(page.url() === 'https://www.douban.com/'){
      console.log('登录成功');
      break;
    }
  }
 }

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS ruft URL-Parameter ab und sendet POST-Schritte im JSON-Format im Detail

js übergibt JSON-Parameter an Controller-Schrittanalyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der Website-Anmeldung mit Node Puppeteer (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!