puppeteer的使用

本博客參考大神視頻(https://space.bilibili.com/306107070/channel/detail?cid=79090)整理完成

目錄：

 1、puppeteer配置安裝
 2、puppeteer元素基本操作-輸入文本與元素點擊
 3、puppeteer獲取文本元素值
 4、puppeteer處理多個元素
 5、pupputeer切換iframe進行安居客登陸操作
 6、puppeteer拖拽操作阿里雲驗證碼
 7、puppeteer自動抓取網頁內容，然后自動發一條微博
 8、puppeteer模擬快捷鍵
 9、puppeteer切換瀏覽器tab頁
10、puppeteer處理彈出對話框
11、puppeteer執行JavaScript方法
12、配置typescript環境(puppeteer包已經安裝)

 

1、puppeteer配置安裝    <--返回

 　　首先需要node環境；然后安裝puppeteer（同時會安裝Chromium）

npm i puppeteer

　　參考：https://www.cnblogs.com/xy-ouyang/p/12167226.html

 

2、puppeteer元素基本操作-輸入文本與元素點擊    <--返回

// puppeteer元素基本操作-輸入文本與元素點擊
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 } })
    const page = await browser.newPage()
    await page.goto('https://www.baidu.com')
    const input_area = await page.$('#kw') // 定位輸入框
    await input_area.type('hello world') // 輸入文本

    // const search_btn = page.$('#su') // 定位'百度一下'搜索按鈕
    // await search_btn.click() // 點擊
    await page.click('#su')
}

fun()

 

3、puppeteer獲取文本元素值    <--返回

// puppeteer獲取文本元素值
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 } })
    const page = await browser.newPage()
    await page.goto('https://www.baidu.com')
    const input_area = await page.$('#kw') // 定位輸入框
    await input_area.type('hello world') // 輸入文本

    // const search_btn = page.$('#su') // 定位'百度一下'搜索按鈕
    // await search_btn.click() // 點擊
    await page.click('#su')
    
    await page.waitForSelector('div#content_left > div.result-op.c-container.xpath-log')

    let resultText = await page.$eval('div#content_left > div.result-op.c-container.xpath-log', ele => ele.innerHTML)
    console.log(`resultText=${resultText}`)
}

fun()

 

4、puppeteer處理多個元素    <--返回

// puppeteer處理多個元素
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 } })
    const page = await browser.newPage()
    await page.goto('https://www.jd.com')

    const input = await page.$('#key') // 定位輸入框
    await input.type('手機') // 輸入文本

    await page.keyboard.press('Enter') // 按下回車鍵

    await page.waitForSelector('ul.gl-warp > li')

    let resultTextList = await page.$$eval('ul.gl-warp > li', eles => eles.map(ele => ele.innerText))
    console.log('resultTextList = ', resultTextList)
}

fun()

 

5、pupputeer切換iframe進行安居客登陸操作    <--返回

// pupputeer切換iframe進行安居客登陸操作
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 } })
    const page = await browser.newPage()
    await page.goto('https://login.anjuke.com/login/form')

    // 打印頁面所有的frame的地址
    await page.frames().map(frame => { console.log(frame.url()) })

    // 通過frame的url定位到frame
    const targetFrameUrl = 'https://login.anjuke.com/login/iframeform'
    const frame = await page.frames().find(frame => frame.url().includes(targetFrameUrl))

    const phone = await frame.waitForSelector('#phoneIpt')
    await phone.type('13530125464')
}

fun()

 

6、puppeteer拖拽操作阿里雲驗證碼    <--返回

// puppeteer拖拽操作阿里雲驗證碼
async function fun() {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 }, ingoreDefaultArgs: ['--enable-automation'] })
    const page = await browser.newPage()
    await page.goto('https://account.aliyun.com/register/register.htm', { waitUntil: 'networkidle2' }) // 等待頁面加載完

    // 定位到frame
    const frame = await page.frames().find(frame => frame.url().includes('https://passport.aliyun.com'))
    // 定位到驗證滑塊
    const span = await frame.waitForSelector('#nc_1_nlz')
    const spanInfo = await span.boundingBox()
    console.log(spanInfo)

    const div = await frame.waitForSelector('div#nc_1_scale_text > span')
    const divInfo = await div.boundingBox()

    await page.mouse.move(spanInfo.x, spanInfo.y)
    await page.mouse.down()

    // 鼠標移動
    for (let i = 0, width = divInfo.width; i < width; i++) {
        await page.mouse.move(spanInfo.x + i, spanInfo.y)
    }
    // 松開鼠標
    await page.mouse.up()
}

fun()

 

7、puppeteer自動抓取網頁內容，然后自動發一條微博    <--返回

// puppeteer自動抓取網頁內容，然后自動發一條微博
const puppeteer = require('puppeteer')
const username = 'xxxxxxxx'
const password = 'xxxxxxxx'

async function fun() {
    const browser = await puppeteer.launch({ 
        headless: false, 
        defaultViewport: { width: 1366, height: 768 },
        ignoreDefaultArgs: ['enable-automation'],
        slowMo: 200,
        args: ['--window-size=1366,768']
    })
    const page = await browser.newPage()

    // 抓取網頁內容文本
    await page.goto('http://wufazhuce.com', { waitUntil: 'networkidle2'})
    const oneCita = await page.waitForSelector('div.fp-one-cita-wrapper > div.fp-one-cita > a')
    const oneText = await page.$eval('div.fp-one-cita-wrapper > div.fp-one-cita > a', ele => ele.innerHTML)
    console.log('oneText: ', oneText)

    /* 自動發一條微博 */
    await page.goto('https://weibo.com/', { waitUntil: 'networkidle2'})
    await page.waitFor(2000)
    await page.reload()
    await page.waitFor(5000)

    // 輸入用戶名
    const usernameInput = await page.waitForSelector('div.input_wrap > #loginname')
    await usernameInput.click()
    await usernameInput.type(username)
    // 輸入密碼
    const passwordInput = await page.waitForSelector('input[type="password"]')
    await passwordInput.click()
    await passwordInput.type(password)
    // 點擊'登陸'按鈕
    const loginBtn = await page.waitForSelector('a[action-type="btn_submit"]')
    await loginBtn.click()

    // 輸入發表微博內容
    const textArea = await page.waitForSelector('textarea[class="W_input"]')
    await textArea.click()
    await textArea.type(oneText)
    // 點擊'發布'按鈕
    const sendBtn = await page.waitForSelector('a[node-type="submit"]')
    await sendBtn.click()
}

fun()

 

8、puppeteer模擬快捷鍵    <--返回

// puppeteer模擬快捷鍵
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: { width: 1366, height: 768 },
        ignoreDefaultArgs: ['enable-automation'],
        slowMo: 200,
        args: ['--window-size=1366,768']
    })
    const page = await browser.newPage()

    await page.goto('http://39.107.96.138:3000/signin', { waitUntil: 'networkidle2' })
    const username = await page.waitForSelector('#name')
    await username.type('user1')
    const pwd = await page.waitForSelector('#pass')
    await pwd.type('123456')

    const loginBtn = await page.waitForSelector('.span-primary')
    await loginBtn.click()

    const createTopicBtn = await page.waitForSelector('#create_topic_btn')
    await createTopicBtn.click()

    const textarea = await page.waitForSelector('.CodeMirror-code')
    await textarea.click()
    await page.keyboard.type('hello world')

    // ctrl + a
    await page.keyboard.down('Control')
    await page.keyboard.press('a')
    //await page.keyboard.down('a')
    //await page.keyboard.up('a')
    await page.keyboard.up('Control')

    // ctrl + b
    await page.keyboard.down('Control')
    await page.keyboard.press('b')
    //await page.keyboard.down('b')
    //await page.keyboard.up('b')
    await page.keyboard.up('Control')
}

fun()

 

9、puppeteer切換瀏覽器tab頁    <--返回

// puppeteer切換瀏覽器tab頁
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: { width: 1366, height: 768 },
        // ignoreDefaultArgs: ['enable-automation'],
        // slowMo: 200,
        args: ['--window-size=1366,768']
    })
    const page = await browser.newPage()
    await page.goto('http://music.taihe.com/', { waitUntil: 'networkidle2' })

    // 關閉廣告
    const ad = await page.waitForSelector('#__qianqian_pop_closebtn')
    await ad.click()

    // 點擊'鏈接'，打開新窗口
    const link = await page.waitForSelector('div.mod-tag-box>h3')
    await link.click()
    // 獲取到新窗口
    const target = await browser.waitForTarget(target => target.url().includes('tag'))
    const newPage = await target.page()
    // 等待新窗口加載完成
    await newPage.waitForSelector('ul[select="20"]')
    const text = await newPage.$eval('ul[select="20"]', ele => ele.innerText)
    console.log(text)
}

fun()

 

10、puppeteer處理彈出對話框    <--返回

 　　index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <p>點擊顯示一個確認對話框.</p>
    <button id='btn1' onclick="myFunction1()">點擊</button>

    <p>點擊顯示一個輸入文本的對話框.</p>
    <button id="btn2" onclick="myFunction2()">Try it</button>

    <p id="demo"></p>

    <script>
        function myFunction1() {
            confirm("Press a button!");
        }
        function myFunction2() {
            var person = prompt("Please enter your name", "Harry Potter");
            if (person != null) {
                document.getElementById("demo").innerHTML =
                    "Hello " + person + "! How are you today?";
            }
        }
    </script>

</body>
</html>

---

// puppeteer處理彈出對話框
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: { width: 1366, height: 768 },
        ignoreDefaultArgs: ['enable-automation'],
        slowMo: 200,
        args: ['--window-size=1366,768']
    })
    const page = await browser.newPage()
    await page.goto('file:///C:/Users/oy/Desktop/index.html', { waitUntil: 'networkidle2' })

    page.on('dialog', async dialog => {
        console.log(dialog.type())
        console.log(dialog.message())

        await dialog.accept('haha') // 點擊'確認'
    })

    const btn1 = await page.waitForSelector('#btn1')
    await btn1.click()
    const btn2 = await page.waitForSelector('#btn2')
    await btn2.click()
}

fun()

 

11、puppeteer執行JavaScript方法    <--返回

// puppeteer執行JavaScript方法
const puppeteer = require('puppeteer')

async function fun() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: { width: 1366, height: 768 },
        ignoreDefaultArgs: ['enable-automation'],
        slowMo: 200,
        args: ['--window-size=1366,768']
    })
    const page = await browser.newPage()
    await page.goto('https://www.ctrip.com/', { waitUntil: 'networkidle2' })

    await page.evaluate(() => {
        document.querySelector('#HD_CheckIn').value = '2020-xx-xx'
    })
}

fun()

 

 12、配置typescript環境(puppeteer包已經安裝)    <--返回

 　　1) 安裝typescript

npm i typescript -g

　　2) 執行tsc -version命令

 

 

　　3）npm i @types/node -D

　　4) npm i @types/puppeteer -D

　　5）項目根目錄下執行 tsc --init 命令, 會在項目根目錄下生成 tsconfig.json 文件

 

 

 　　6）測試代碼

 

 　　TestAction.ts

import { Page, Browser, launch } from "puppeteer";

class TestAction {
    public gotoUrl(page: Page, url: string) {
        page.goto(url, { waitUntil: 'networkidle2' })
    }
}

async function main() {
    const browser: Browser = await launch({ headless: false })
    const page: Page = await browser.newPage()

    const testAction = new TestAction()
    testAction.gotoUrl(page, 'https://www.baidu.com/')
}

main()

　　7）執行tsc命令，會在項目根目錄下生成 out/actions/TestAction.js 文件

　　8）執行命令

node .\out\actoins\TestAction.js

---