Modern Web 2016 議程分享： 網站自動化測試 - 以 PIXNET 搜尋 & 美妝口碑大賞為例

Transcript

1. afu @ 研發中⼼
 @afutseng Modern Web 2016 議程分享
 無痛網站⾃動化測試 PIXNET 會議室∘2016.09.02
2. 「技術在我們⼿上，票就到我們⾝上」 — Stephon Chen
3. 技術在我們⼿上，票就到我們⾝上
4. 議程講者簡介 - 劉艾霖 (Alin) 2009 Java Developer 2014/04 SDET (Software Design Engineer in Test) - 遠端⼯作 SDET ：會寫⾃動化測試程式的⼯程師 STE, Software Test Enginner 未必會寫測試程式，⼀般的測試⼯作 2014/10 把測試環境架構解決, 整理成免費電⼦書參加鐵⼈賽 2015/01 Gap Year - 出國散⼼ 2015/11 Node.js developer (Exma-Square) 
5. 講者深⼊鑽研前端測試的契機 越來越多的前端測試框架誕⽣ 線上電⼦書有 ~24k 不重複瀏覽者 前端測試有很多問題，⾮常痛苦 * 框架不友善 * Selenium 驗證標題就要寫 10 來⾏ java，
 這樣誰要寫
 * 瀏覽器組合繁多 
6. 痛苦不重要
 重要的是如何變好
 對吧！ — 劉艾霖 (Alin)
7. 改善的⽅向 •引⼊現代化前端測試框架 •善⽤相關⼯具鏈 •撰寫易維護的程式 •引⽤第三⽅服務 •Sauce Labs, Travis CI, etc. 
8. WEBDRIVERI/O Selenium 2.0 bindings for NodeJS
9. 前端測試框架其他⽅案 •Protractor •NightwatchJS •Geb •Robot •etc... 
10. selenium-webdriverjs driver.get('http://www.google.com'); driver.findElement(webdriver.By.id('q')).sendKeys('webdriver'); driver.findElement(webdriver.By.id(‘btnG')).click();  client .url('http://google.com') .setValue('#q', 'webdriver') .click('#btnG') WebdriverIO
11. WebdriverIO 三⼤特⾊
12. 
13. 善⽤⼯具鏈，整合其他框架 •測試程式不會只有⼀⽀，會有集合，
 所以搭配其他框架，讓測試程式⽐較容易被管理 
14. Webdriver.IO + Mocha var assert = require('assert'); ! describe(‘PIXNET ⼤⾸⾴', function() { it('標題應為品牌標準字', function() { browser.url(‘https://www.pixnet.net'); var title = browser.getTitle(); assert.equal(title, ‘痞客邦 PIXNET'); }); }); 
15. BDD / TDD framework Mocha Jasmine Cucumber 
16. webdrivercss 基於 PhantomCSS 做⾃動化視覺迴歸測試 
17. Selenium Session session 常不⾒/斷掉 搜尋可⾒前⼈常遇到 
18. Selenium Session ! ! ! ! ! WedriverIO 提供⾃動重連的參數設定 connectionRetryTimeout: 90000, connectionRetryCount: 3 
19. 撰寫容易維護的程式碼 •SOLID 原則 •避免撰寫重複的程式碼 •時常重構 
20. 講者訪查
 單元測試有達 75%+ 
 請舉⼿
21. 講者訪查
 單元測試有達 75%+ 
 請舉⼿ *沒有⼈*
22. 遵循測試⾦字塔原則 
23. 遵循測試⾦字塔原則 ! 10% 20％ 70% 
24. E2E 測試原則 •E2E 測試不要寫太多，有基本款即可 •https://googletesting.blogspot.tw/2015/04/just-say-no-to- more-end-to-end-tests.html •做前端測試時，請忘掉測試覆蓋率 •以駭客思維想怎麼寫前端測試，省時間為⾸要 •運⽤ PageObject pattern 封裝常⽤⾏為與⾴⾯物件，避免 HTML 結構或 CSS Selector 變更測試就壞掉 
25. ⼿把⼿安裝 WebdriverIO
26. 安裝步驟 兩種情境 ⼀、沒有 package.json 練習⽤的空⺫錄 沒有導⼊ npm 安裝套件的專案 ⼆、有 package.json (引⼊現有專案) 
27. 安裝步驟 (空⺫錄) ⽤ npm init 產⽣ package.json $ npm init (⼀直按 enter 帶⼊預設值，或是根據需求填寫) 
28. package.json { "name": "webdriverio-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 
29. 有 package.json 後 可以⽤ NPM 安裝套件
30. $ npm install --save-dev webdriverio --save-dev： 該套件僅為開發環境專⽤，不需要佈署到正式環境
31. 異動後的 package.json { "name": "webdriverio-demo", (略) "devDependencies": { "webdriverio": "^4.2.11" } } 
32. 現在 
 node_modules/
 有 187 個套件了 8596 個檔案, 91 MB
33. 以互動式問答產⽣ WebdriverIO 設定檔
34. wdio (WebdriverIO binary) $ cd webdriverio-demo ; $ node_modules/webdriverio/bin/wdio 不帶任何參數直接執⾏ wdio，
 啟動互動式問答的 WDIO Configuration Helper 
35. 在何處執⾏測試？ ? Where do you want to execute your tests? (Use arrow keys) › On my local machine 個⼈電腦 In the cloud using Sauce Labs, Browserstack or Testingbot In the cloud using a different service I have my own Selenium cloud 
36. ⽤哪款測試框架？ ? Which framework do you want to use? (Use arrow keys) › mocha 來杯摩卡 jasmine cucumber 
37. 測試規格⺫錄何在？ ! ? Where are your test specs located? › ./test/specs/**/*.js (預設值) 
38. 印哪種報表格式？ ? Which reporter do you want to use? (Press <space> to select) ›◯ dot - https://github.com/webdriverio/wdio-dot-reporter ̋ spec - https://github.com/webdriverio/wdio-spec-reporter ̋ junit - https://github.com/webdriverio/wdio-junit-reporter ̋ allure - https://github.com/webdriverio/wdio-allure-reporter ̋ teamcity - https://github.com/sullenor/wdio-teamcity-reporter ̋ json - https://github.com/fijijavis/wdio-json-reporter ̋ concise - https://github.com/FloValence/wdio-concise-reporter 
39. DOT Reporter // wdio.conf.js module.exports = { // ... reporters: ['dot'], // ... }; ! ! !  http://webdriver.io/guide/reporters/dot.html
40. SPEC Reporter // wdio.conf.js module.exports = { // ... reporters: [’spec'], // ... }; ! !  http://webdriver.io/guide/reporters/spec.html
41. 串哪種服務？ ? Do you want to add a service to your test setup? (Press <space> to select) ̋ sauce - https://github.com/webdriverio/wdio-sauce-service ̋ browserstack - https://github.com/itszero/wdio-browserstack-service ̋ testingbot - https://github.com/testingbot/wdio-testingbot-service ̋ appium - https://github.com/rhysd/wdio-appium-service ̋ firefox-profile - https://github.com/webdriverio/wdio-firefox-profile-service ̋ selenium-standalone - https://github.com/webdriverio/wdio-selenium- standalone-service › ̋ phantomjs - https://github.com/cognitom/wdio-phantomjs-service 
42. 噴多細的 Log ？ ? Level of logging verbosity (Use arrow keys) silent (不看任何 log, 預設值) › verbose (鉅細靡遺) command data result error 
43. 螢幕截圖放哪裡 ？ ? In which directory should screenshots gets saved if a command fails? › ./errorShots/ (預設值) 
44. 網址前綴？ ? What is the base url? › (http://localhost) 預設值 - 本機電腦 * 只有在測試程式裡寫相對路徑 (/) 時，會⾃動帶⼊此 URL
 * 注意 80 port 有沒有被其他軟體搶⾛ 
45. Packages installed successfully, creating configuration file... ! Configuration file was created successfully! To run your tests, execute: $ wdio wdio.conf.js
46. wdio.conf.js - services exports.config = { // 要串哪些服務 services: ['phantomjs'], /* 下略 */ } 
47. wdio.conf.js - specs exports.config = { // 測試程式位置的 pattern, 可以多個 specs: [ './test/specs/**/*.js' ], } 
48. wdio.conf.js - exclude exports.config = { // 排除哪些檔案不執⾏, 例如第三⽅套件的測試程式 exclude: [ // 'path/to/excluded/files' ], } 
49. wdio.conf.js - maxInstances exports.config = { // 如果有 3 種 capabilities (Chrome, Firefox, Safari) // 那麼 1 個 wdio 會跑 3 個 processes； // 若有10 ⽀測試 spec，則同⼀時間會有 30 個 processes 執⾏ ! maxInstances: 10, } 
50. wdio.conf.js - capabilities exports.config = { capabilities: [{ // 如果⾃架 Selenium 只有 5 個 瀏覽器 instance 可⽤，那就限制它最多同 時間只能跑 5 個 instance maxInstances: 5, // 可以填 chrome 或 firefox 等 browserName: ‘phantomjs' }], } 
51. wdio.conf.js -connection 相關 exports.config = { // 預設 waitFor* 指令的等待時間 10 秒 waitforTimeout: 10000, // 預設的 request timeout 時間為 90 秒 connectionRetryTimeout: 90000, // 預設 request 最多重試 3 次 connectionRetryCount: 3, } 
52. 寫第⼀⽀測試
53. vim test/specs/first.js var webdriverio = require('webdriverio'); describe('PIXNET ⼤⾸⾴', () => { it(‘<title> 應為品牌標準字', () => { const title = browser.url(‘https://www.pixnet.net').getTitle(); console.log(title); }) }) 
54. 執⾏第⼀⽀測試
 $ node_modules/.bin/wdio * ⾃動讀⼊ wdio.conf.js 設定
55. 測試通過！ 
56. 執⾏過程沒有錯誤
 直接視為 passing 太棒了，有寫有通過 ?
57. 撰寫斷⾔ (Assertion) 
 驗證執⾏結果有無合乎預期
58. vim test/specs/first.js var webdriverio = require(‘webdriverio’), assert = require('assert'); describe('PIXNET ⼤⾸⾴', () => { it(‘<title> 應為品牌標準字', () => { const title = browser.url(‘https://www.pixnet.net').getTitle(); assert.equal(title, '痞客邦 PIXNET’); }) }) 
59. 實際結果符合斷⾔，測試通過 
60. 試著故意改成錯的斷⾔ var webdriverio = require(‘webdriverio’), assert = require('assert'); describe('PIXNET ⼤⾸⾴', () => { it(‘<title> 應為品牌標準字', () => { const title = browser.url(‘https://www.pixnet.net').getTitle(); assert.equal(title, '痞客邦 pixnet’); }) }) 
61. 實際結果不符合斷⾔，測試未通過 
62. 以⼤⾸⾴為例的 E2E 測試案例 
63. ⼤⾸⾴焦點區塊圖⽚尺⼨測試 var webdriverio = require(‘webdriverio’), assert = require('assert'); describe('PIXNET ⼤⾸⾴', () => { it('焦點區塊圖⽚應正常顯⽰',function() { var imgs = browser.url('https://www.pixnet.net/').getElementSize('#feature-box-ul li img'); imgs.map(function (img) { assert(590 === img.width); assert(393 === img.height); }); }); }) 
64. ⼤⾸⾴圖⽚網址應為正式網域 var webdriverio = require(‘webdriverio’), assert = require('assert'); describe('PIXNET ⼤⾸⾴', () => { it('焦點區塊圖⽚網址應為 pimg.tw 正式網域',function() { var imgUrls = browser.url(‘https://www.pixnet.net/') .getAttribute('#feature-box-ul li img', 'src'); imgUrls.map(function (url) { assert(url.match(/pimg.tw\//)); }); }); }) 
65. 講者的⼩結 • 前端測試 *真的* 沒有這麼痛苦了 ! • Geb vs WebdriverIO ! • 速度 - Groovy (爬) vs nodeJS (飛) • Geb page object ⽐較優美
66. PIXNET 可以做什麼 • 翻以前必須⼈⼯⽤瀏覽器才看得出的功能 故障案例，寫成 E2E 測試案例 • 例如: 圖⽚網域誤植為內部網址 • ⼤四喜圖⽚尺⼨不正確 • styleMe 的 <title> 缺漏
67. References  1. 無痛網站⾃動化測試, 劉艾霖, Modern Web 2016, http:// slides.com/alincode/deck-2 2. modern web 2016 e2e test sample https://github.com/ alincode/modern-web-2016-e2etest
68. 感謝聆聽 @afutseng