# F2E x Docker | JS 設計模式讀書會 #11 * 活動網址:https://www.facebook.com/events/270434173308724/ ## E2E Testing - Protractor by Ralph Hsu ### Note * End to End Testing 是可以測試到很多東西的。 * test case * 測試腳本。 * 測試不同的 browser。 * Test Framework * e2e * CHAI * EXPECT * Test Runner * [Karma](https://karma-runner.github.io/1.0/index.html):很常見。 * ava #### Selenium * 負責處理 browser 自動化。 * Web Driver Test -> Server -> Browser * firefox plugin [Selenium IDE](https://addons.mozilla.org/zh-tw/firefox/addon/selenium-ide/) * Framework: * AngularJS: [Protractor](http://www.protractortest.org/#/) * Python: [Selenium with Python](http://selenium-python.readthedocs.io/) * Ruby: [jnicklas/capybara: Acceptance test framework for web applications](https://github.com/jnicklas/capybara) ##### Protractor * 在 JS 要操作 Selenium 可以用 Protractor framework,由其是 AngularJS 的環境而言。 * 大家都寫過 C? 開完檔案後一定要記得把檔案關掉,不然會發生可怕的事情。 * python: 用 cpython 以外時忘記 file.close() ..... * 附上 Python 的 Selenium 文件 - [Selenium with Python — Selenium Python Bindings 2 documentation](http://selenium-python.readthedocs.io/) * 常用物件 * 常用 Callback * 在測試後台時,每次都要先登入才行。 * 如果每個 test case 都 copy-paste 一次,很不方便。所以該用 `beforeEach & afterEach` * Config? * set conf.js * delay: 若不設就會一閃而過,這樣雖然很爽,但就會看不到錯誤。 * 是說曾寫過網站,不設 delay 網站會不鳥你⋯⋯ * chusiang: 因為會有網路這個變數啊 …。 * 常用的 option。 * Sauce Labs: CI service. * specs: * suites: 可以只測某些情境。 * 如果有很多的測試案例,可以放在 suites 底下。 * 官方有 [page opjects](http://www.protractortest.org/#/page-objects) 可以用。 * browsername: 要測哪些 browser。 * ???: 可以針對特定 browser 寫測試。 * **allScriptsTimout**: 最常用 最常用 最常用。 * run protractor conf.js * package.json * 若不是內建的指令 (例如 start),則需要把 run 補上。 > chusiang: 一整個就是 makrfile 的概念,有上下相依的關係。 npm install npm start npm run protractor ### Q&A * 遇到 alert window 該怎麼處理? * 有人會用 Sikuli 來避開系統內建的彈跳視窗。 * dragonKeeper * [Protractor - Enhance 篇 - Run Scenario(s) in serial](https://www.facebook.com/notes/paul-li/protractor-enhance-%E7%AF%87-run-scenarios-in-serial/10152962969242211/) ---- ## Docker intro for F2E by chusiang > chusiang: 本次簡報些字體較小,建議大家往前坐點兒。 * Slides: http://www.slideshare.net/freezejonny/docker-63701917 * Demo code: https://github.com/chusiang/takaojs1607-docker-demo * Record: https://youtu.be/k5iwKUZY9tk ### Note * 下載今天的 docker image。 _docker pull chusiang/takaojs1607_ ### Q&A > chusiang: 有問題請先留言,到時會後再一次解答了。 1. Docker? container? 兩者的差別是什麼? 2. 有些 Docker 會開 port 有些不會開? * 請參考 Dockerfile 裡的 EXPOSE 設定。 * https://github.com/chusiang/takaojs1607-docker-demo/blob/master/Dockerfile#L36 3. Vim 貼紙? * [如何取得 Vim 貼紙? · Issue #1 · vim-tw/ama](https://github.com/vim-tw/ama/issues/1)