国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

darkbaby123 / 3515人閱讀

摘要：今天接著介紹看過上篇的同學，應該都會用的高級爬蟲功能了，附上姐妹篇鏈接除了爬蟲之外，也可以幫你完成一些頁面上的重復操作，也可以當作自動化測試開門見山，今天的目標是，爬取頭條前端的文章，自動推薦到掘金廢話不多說，直接上動圖看效果圖很大，請稍等

今天接著介紹Puppeteer 
看過上篇的同學，應該都會用Puppeteer的高級爬蟲功能了，附上姐妹篇鏈接：https://segmentfault.com/a/11...


除了爬蟲之外，Puppeteer也可以幫你完成一些頁面上的重復操作，也可以當作UI自動化測試！


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

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. 項目運行

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

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

npm test

結語

為了效果展示，這里使用的headless: false模式，實際使用時可以同時開n個page，模擬操作，大家可以嘗試改改，也可以給我提PR

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

其實Puppeteer的應用場景遠不止這些，大家也可以使用它在各自的領域大放異彩?。?！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84836.html

相關文章

  • 手把手教你如何用Crawlab構建技術文章聚合平臺(一)

    摘要：本文將介紹如何使用和抓取主流的技術博客文章，然后用搭建一個小型的技術文章聚合平臺。是谷歌開源的基于和的自動化測試工具，可以很方便的讓程序模擬用戶的操作，對瀏覽器進行程序化控制。相對于，是新的開源項目，而且是谷歌開發，可以使用很多新的特性。 背景 說到爬蟲，大多數程序員想到的是scrapy這樣受人歡迎的框架。scrapy的確不錯，而且有很強大的生態圈，有gerapy等優秀的可視化界面。但...

    LinkedME2016 評論0 收藏0

  • 手把手教你如何用Crawlab構建技術文章聚合平臺(一)

    摘要：本文將介紹如何使用和抓取主流的技術博客文章，然后用搭建一個小型的技術文章聚合平臺。是谷歌開源的基于和的自動化測試工具，可以很方便的讓程序模擬用戶的操作，對瀏覽器進行程序化控制。相對于，是新的開源項目，而且是谷歌開發，可以使用很多新的特性。 背景 說到爬蟲，大多數程序員想到的是scrapy這樣受人歡迎的框架。scrapy的確不錯，而且有很強大的生態圈，有gerapy等優秀的可視化界面。但...

    Jeffrrey 評論0 收藏0

  • 摩拜前端周刊第8期

    摘要：地址前端詞典提高幸福感的個技巧推薦文章介紹了個更加簡潔優雅的使用技巧。這些技巧確實在實際開發中十分常用，作者總結的很好，特別是針對降級問題又學到了一個新思路。值得奮戰在一線的攻城獅們閱讀學習。Ladies and 鄉親們，摩拜前端周刊起航啦～ 摩拜前端團隊會收集每周前端優秀文章，每周五發布至掘金平臺，歡迎關注我們～ 過個沒什么了不起的一天，耀眼一些，你有資格 Top 榜 「中高級前端」...

    lykops 評論0 收藏0

  • 1.前端自動化測試 之 視覺測試

    摘要：視覺感知測試視覺回歸測試為了解決上面提到的各種問題，視覺感知測試孕育而生。第三種方式，無法進行視覺感知測試結果只能進行視覺回歸測試和上一版的繼續比較差異。 前端自動化測試 之 視覺測試 showImg(https://segmentfault.com/img/remote/1460000014720180); 前端測試分類 showImg(https://segmentfault.co...

    VioletJack 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<