iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
0
Modern Web

線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗系列 第 13

react 測試 使用nightwatch (爬蟲或訂票系統都很方便)

andy 大大 主講 reactjs nightwatch 實戰入門

https://www.youtube.com/watch?v=xZ9k_9kvI_Q

海門大大 主講 nightwatch 進階與避雷指南
https://www.youtube.com/watch?v=kuHpi_GsfDc

在寫reactjs的時候通常要寫一些測試,這個工具可以下達指令去依照想要測試的結果是否如預期

測試部分不會很難可以參考影片,兩位大大在線上讀書會都講得超讚很容易理解

這邊補充一下運用
nightwatch 也可以使用在爬蟲程式 非常的方便,其語法也很簡單
這邊使用之前線上迷你黑客松讀書會 用到的一個專案來說明

先補充設定檔nightwatch.conf.js 這邊說明影片中沒有的設定部分 下面phantomjs 可以這樣設定 跟 chrome切換

效果說明 phantomjs 可以使用背景模式進行遇到錯誤時候再透過內建拍照功能儲存錯誤畫面,chrome就直接開瀏覽器TEST

...

            // "desiredCapabilities": {
            //     "browserName": "phantomjs",
            //     "javascriptEnabled": true,
            //     "acceptSslCerts": true,
            //     "phantomjs.binary.path": "node_modules/phantomjs/bin/phantomjs",
            //     "phantomjs.cli.args": "--webdriver=5558 --webdriver-selenium-grid-hub=http://localhost:4444"
            // },
            "skip_testcases_on_fail": true
        },
        "chrome": {
            "desiredCapabilities": {
                "browserName": "chrome",
                "javascriptEnabled": true // set to false to test progressive enhancement
            }

...

擷取一段說明

...
  for (var i = 0; i < 2; i++) {    <---可以用迴圈
            let thismoment = moment().add(9 * i, 'day');
            let todayYearMonth = thismoment.format("YYYY-MM");
            let today = thismoment.format("DD");
            browser.
            url('https://booking.tigerair.com/Search.aspx?culture=zh-TW')
                .waitForElementVisible('body', 1000)  <-用waitFor的好處就是等到執行完在往下如果用時間的話會因為環境不同載入時間不同
                .click(`#ControlGroupSearchView_AvailabilitySearchInputSearchVieworiginStation1 option[value="${startStation}"]`)   <--這邊抓到dom節點點一下的意思 很簡單
                .click(`#ControlGroupSearchView_AvailabilitySearchInputSearchViewdestinationStation1 option[value="${backStation}"]`)
  ....
  
                .click(".btnSearchPanel", function (e) {
                    console.log(e)
                })
                .pause(2000)
                .source(function (result) {//到這一頁時候把原始碼傳入讓cheerio去爬
                    var $ = cheerio.load(result.value) // so it needs to be parse

                    let html = $('#lfMarket1 > li').html(); (快樂爬資料)
                    var results = [];
                    $('#lfMarket1 > li').each(function (i, elm) {
                        var thisstring = $(elm).html();
                        let regex = new RegExp("\\d{0,4}\\-\\d{1,2}\\-\\d{1,2}");
                        if (regex.test(thisstring)) {
                            let date = regex.exec(thisstring)[0];
                            //抓金額
                            let pricetext = $(elm).find('span').first().text();
                            let pricearr = pricetext.split(" ");
                            let currencyCode = pricearr[0];
                            let price = pricearr[1];
                            results.push({
                                date,
                                currencyCode,
                                price,
                                source: '虎航',
                                form: startStation,
                                to: backStation
                            });
                        }
                    })

//這樣就輕輕鬆鬆不需要寫curl傳參數的方法去爬資料了
...

迷你黑客松讀書會-有不同主題,每次隊友都不一樣,跟隊友碰撞去完成一個原型,滿好玩的歡迎加入
https://www.facebook.com/groups/1274976625880806/


上一篇
12/17 andy 大大 線上 9點到17點 教你入門 react-redux
下一篇
學習 nodejs 經驗分享
系列文
線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗30

尚未有邦友留言

立即登入留言