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/