puppeteer的使用

Posted 2021-03-13 xy-ouyang

 

1、

 

2、

 

// 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获取文本元素值
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处理多个元素
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.innerText))
    console.log(‘resultTextList = ‘, resultTextList)
}

fun()

5、

// 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拖拽操作阿里云验证码
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、

 

 

 

 

 

---