# 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)