【PUPPETEER】初探之拖拽操做（五）

1、知識點

1. page.mouse
2. elementHandle.boundingBox()
3. ignoreDefaultArgs:['--enable-automation']  
4. waitUntil

2、解析知識點

　　1.page.mouse 

　　如下，截圖來自github puppeteer api(自行對照github) ,puppeteer已經提供給咱們使用方法，很簡單，move - 移動，down - 按下， up - 擡起 ，經過這個咱們能夠很簡單的明白，場景拖拽的時候，咱們先按下（down）,再移動（move）,最後鬆開（up）,是否是很好理解

　　2.elementHandle.boundingBox()

　　boundingBox() 又是用來幹嗎呢，咱們看api, 他返回的是 x,y 座標，還有寬度，長度，那就很好理解了，好比我上面運用了page.mouse，進行拖拽，可是我拖拽什麼呢，拖拽的東西，鼠標點擊後確定有x,y座標，也有固定的長度，不可能一直讓你無限拖拽。

　　3.ignoreDefaultArgs:['--enable-automation']   

　　這個是幹嗎的，當咱們運行發現chrome 左上角有個 Chrome 正受自動軟件控制，可是有時候有的網站會檢測到自動化腳本，會禁止掉，這時候咱們如何避免puppeteer 被前端JS檢測到

const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false,
        ignoreDefaultArgs:['--enable-automation']
    });

 

3、實例

1. 登入大麥網，咱們今天來註冊一下，可是發現他須要滑動驗證，那麼咱們來試一下

 

 

2. 如何定位，如何切換iframe 這邊省略，前面已經講過了，這邊直接進入正題，前面代碼

　　/**1.切換iframe,2.向輸入框中輸入密碼**/

　　const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://passport.damai.cn/register',{waitUntil:'networkidle2'});
    const frame = await page.frames().find(f => f.url().includes('https://ipassport.damai.cn/member'));

    await frame.waitFor('.next-input.next-large input[placeholder="輸入密碼"]');
    await frame.type('.next-input.next-large input[placeholder="輸入密碼"]','122222');
    

 

3. 定位到滑動塊 const element = '.nc_iconfont.btn_slide' ;  調用boundingBox(),

問：爲何要調用boundingBox()

答：爲了獲取滑動塊的x,y 座標 

const start = await frame.waitForSelector('.nc_iconfont.btn_slide');
const startinfo = await start.boundingBox();

 

 

4.定位整個拖動的塊,如何定位（省略，本身多聯繫） const element = '.nc-lang-cnt‘

const end = await frame.waitForSelector('.nc-lang-cnt');
const endinfo = await end.boundingBox();

 

5. 分析下面該怎麼作，首先咱們獲取了start 滑動塊x，y座標後，怎麼滑動呢，毫無疑問確定調用page.mouse 方法啊，因此下面代碼應該這麼寫 

1.肯定要移動的目標x,y軸

2.按下

await page.mouse.move(startinfo.x,endinfo.y);
await page.mouse.down();

6. 有了以上的操做，按下後，咱們怎麼移動呢，咱們分析一下滑動長度是否是不能大於滑動塊的寬度？ 那麼咱們是否是獲得了最大的長度 endinfo.width  (前面介紹了，實在不知道調用啥的本身看api文檔)

而後咱們在分析，有了最大跨度，移動的時候是否是隻有x軸移動，y軸沒有移動呢，那麼就很好作了，代碼以下，代碼應該很好理解，就是x 軸不能超過滑動塊的寬度，而且x軸是遞增的y軸是不動的，這個很好理解

for(var i=0;i<endinfo.width;i++) {
        await page.mouse.move(startinfo.x+i,endinfo.y);
}

7.完整的代碼

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://passport.damai.cn/register',{waitUntil:'networkidle2'});
    const frame = await page.frames().find(f => f.url().includes('https://ipassport.damai.cn/member'));

    const start = await frame.waitForSelector('.nc_iconfont.btn_slide');
    const startinfo = await start.boundingBox();

    const end = await frame.waitForSelector('.nc-lang-cnt');
    const endinfo = await end.boundingBox();

    await page.mouse.move(startinfo.x,endinfo.y);
    await page.mouse.down();
    
    for(var i=0;i<endinfo.width;i++) {
        await page.mouse.move(startinfo.x+i,endinfo.y);
    }

    await page.mouse.up();
    //await brower.close();
})().catch(error =>{console.log('error')});

 

8.結果如圖，滑動了，可是最後出錯了，爲何呢 ，分析緣由之一，網站檢測出，咱們用自動化腳本跑了，如何避免被前端JS檢測到呢，用到上面講的知識ignoreDefaultArgs:['--enable-automation'] 

完整代碼：咱們加上ignoreDefaultArgs:["--enable-automation"] 這個屬性的時候發現，仍是報錯，那麼咱們在分析一下，爲何？通常自動化跑的速度要比人快的多，那麼最後一步鬆開是否是太快致使的呢，那咱們就等待1-2秒，再鬆開，也有多是滑動太慢了，總之能簡單處理先簡單處理，之後再深刻

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false,
        ignoreDefaultArgs:["--enable-automation"]
    });
    const page = await brower.newPage();
    await page.goto('https://passport.damai.cn/register',{waitUntil:'networkidle2'});
    const frame = await page.frames().find(f => f.url().includes('https://ipassport.damai.cn/member'));

    await frame.waitFor('.next-input.next-large input[placeholder="輸入密碼"]');
    await frame.type('.next-input.next-large input[placeholder="輸入密碼"]','122222');
    const start = await frame.waitForSelector('.nc_iconfont.btn_slide');
    const startinfo = await start.boundingBox();

    const end = await frame.waitForSelector('.nc-lang-cnt');
    const endinfo = await end.boundingBox();

    await page.mouse.move(startinfo.x,endinfo.y);
    await page.mouse.down();
    
    for(var i=0;i<endinfo.width;i=i+5) {
        await page.mouse.move(startinfo.x+i,endinfo.y);
    }
    await page.waitFor(3000)
    await page.mouse.up();
    //await brower.close();
})().catch(error =>{console.log('error')});