Puppeteer再探--自動把SF文章推薦到掘金

今天接着介紹Puppeteer

看過上篇的同窗，應該都會用Puppeteer的高級爬蟲功能了，附上姐妹篇連接：https://segmentfault.com/a/11...

除了爬蟲以外，Puppeteer也能夠幫你完成一些頁面上的重複操做，也能夠看成UI自動化測試！

開門見山，今天的目標是，爬取SF頭條前端的文章，自動推薦到掘金！！！

github：https://github.com/zhentaoo/p...

廢話很少說，直接上動圖看效果（圖很大，請稍等）

SF可能比較慢，直接看github圖片地址，錄製了視頻，可是沒發現比較好的工具：https://raw.githubusercontent...

下面就來介紹具體流程

1. 到sf獲取最新的前端文章

page.goto跳轉到https://segmentfault.com/news...

接着分析文章的Dom結構，獲取每篇文章的連接

而後取出最重要的 href，title 信息

具體代碼以下：

try {
        await page.goto('https://segmentfault.com/news/frontend')
        await timeout(1000)

        var SfFeArticleList = await page.evaluate(() => {
            var list = [...document.querySelectorAll('.news__list .news__item-title a')]

            return list.map(el => {
                return {href: el.href.trim(), title: el.innerText}
            })
        })

        console.log('SfFeArticleList:', SfFeArticleList);

        await page.screenshot({path: './sf-juejin/sf.png', type: 'png'});
    } catch (e) {
        console.log('sf err:', e);
    }

2. 到掘金並登陸，這裏我事先註冊了個測試帳號

先跳轉到掘金，同樣分析頁面結構，模擬點擊登陸按鈕

接着，會彈出一個的登陸dialog，用page.type模擬輸入用戶名密碼

最後，點擊登陸，這時JJ應該把cookie寫好了....

代碼以下：

try {
        await timeout(1000)
        await page.goto('https://juejin.im')
        await timeout(1000)

        var login = await page.$('.login')
        await login.click()

        var loginPhoneOrEmail = await page.$('[name=loginPhoneOrEmail]')
        console.log('loginPhoneOrEmail:', loginPhoneOrEmail);
        await loginPhoneOrEmail.click()
        await page.type('18516697699@163.com', {delay: 20})

        var password = await page.$('[placeholder=請輸入密碼]')
        console.log('password:', password);
        await password.click()
        await page.type('123456', {delay: 20})

        var authLogin = await page.$('.panel .btn')
        console.log('authLogin:', authLogin);
        await authLogin.click()

    } catch (e) {}

3. 隨機從SF拿到的文章推薦到掘金

登陸成功後，會進入用戶界面

模擬點擊推薦文章推薦按鈕「＋」

?，這時從SF拿到的文章信息就派上用場了，隨機取出一篇

模擬填寫推薦表單，而後點擊發布

嗯，有時會提示該文章已被分享，那就換一篇吧，再執行一次。

代碼以下

try {
        await timeout(2500)
        var seed = Math.floor(Math.random() * 30)
        var theArtile = SfFeArticleList[seed]

        var add = await page.$('.main-nav .ion-android-add')
        await add.click()
        await timeout(2500)

        var shareUrl = await page.$('.entry-form-input .url-input')
        await shareUrl.click()
        await page.type(theArtile.href, {delay: 20})

        await page.press('Tab')
        await page.type(theArtile.title, {delay: 20})

        await page.press('Tab')
        await page.type(theArtile.title, {delay: 20})

        await page.evaluate(() => {
            let li = [...document.querySelectorAll('.category-list-box .category-list .item')]
            li.forEach(el => {
                if (el.innerText == '前端') 
                    el.click()
            })
        })

        var submitBtn = await page.$('.submit-btn')
        await submitBtn.click()

    } catch (e) {
        await page.screenshot({path: './sf-juejin/err.png', type: 'png'});
    }

4. 項目運行

1. git clone https://github.com/zhentaoo/p...

2. npm install (puppeteer在win下100+M、mac下70+M，請耐心等候)

3. npm test

結語

爲了效果展現，這裏使用的headless: false模式，實際使用時能夠同時開n個page，模擬操做，你們能夠嘗試改改，也能夠給我提PR

目前已經帶領你們，使用Puppeteer完成爬蟲 和 UI自動化測試，接下來可能會出第三篇，應該會是關於前端性能分析

其實Puppeteer的應用場景遠不止這些，你們也能夠使用它在各自的領域大放異彩！！！