เขียน E2E Testing บน AngularJS ด้วย Protractor

บทความนี้ไม่ใช่ Tutorial นะครับ เป็นเพียงแค่การจดบันทึกของผมหลังจากที่เพิ่งหัดลองเขียน E2E Test บน AngularJS เผื่อจะมีประโยชน์แก่ผู้ที่กำลังสนใจในหัวข้อเดียวกัน สำหรับบทความนี้ผมก็อ่านมาจากหลายๆแหล่ง ยำๆมั่วๆ เท่าที่จะนึกออก ก็ประมาณด้านล่างนี้
- Protractor Tutorial
- Practical End-to-End Testing with Protractor
- Advanced Testing and Debugging in AngularJS
- Getting Started With Protractor
- Angular JS–Part 14, End to end tests
Step 1 : Create Project
เริ่มต้นผมทำการสร้างโปรเจ็ค Angular โดยใช้ Bower ทำการสร้างโฟลเดอร์ชื่อ protractor
และสร้างไฟล์ bower.json
ดังนี้
mkdir protractorcd protractortouch bower.json
ภายในไฟล์ bower.json
กำหนดชื่อและเวอร์ชัน รวมถึง dependencies ต่างๆ ดังนี้
{ "name": "try-protractor", "version": "1.0.0", "ignore": [ "**/.*", "node_modules", "bower_components" ], "dependencies": { "angular": "~1.3.15" }}
ทำการโหลด AngularJS ด้วยคำสั่ง
bower install angular
หลังจากนั้นระบบจะโหลด dependencies มาไว้ที๋โฟลเดอร์ bower_components
ภายในโปรเจ็ค
Step 2 : Create Index Page
ทำการสร้างไฟล์ index.html
ขึ้นมา แบบง่ายๆ โดยตั้งชื่อ ng-app
เป็น myApp และใช้ ng-controller ชื่อ MainController
ผมใช้ Controller As Syntax อ้างอิงจาก
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Try Protractor</title> </head> <body ng-app="myApp"> <div class="main" ng-controller="MainController as main"> <h1>{{ main.message }}</h1> </div>
<script src="bower_components/angular/angular.js"></script> <script src="js/app.js"></script> </body></html>
โดยด้านบน มีแค่ expression เพื่อแสดง message ใน MainCtroller
Step 3 : Create Controller
ต่อมาผมทำการสร้างไฟล์ ่js/app.js
ดังนี้
var app = angular.module('myApp', [])
function MainCtrl() { var vm = this vm.message = 'Hello World'}
app.controller('MainController', MainCtrl)
ทดสอบรันเซิฟเวอร์ โดยการเปิดไฟล์ index.html
ส่วนตัวผมใช้ ้http module ของ python3
python3 http.server -m 5555
เมื่อเปิดบราวเซอร์ http://localhost:5555/ ก็จะเห็นข้อความ Hello World ปรากฎ :)
Step 4 : Install Protractor
เริ่มต้นการเขียน Test ขั้นแรก ทำการติดตั้งเจ้า Protractor ด้วยคำสั่ง
npm -g install protractor
จากนั้นสั่งอัพเดท webdriver-manager
ซึ่งมันจะไปโหลดตัว Selenium Server รวมถึง Chrome Driver มาให้
webdriver-manager update
Step 5 : Protractor Configuration
Protractor จะใช้ 2 ไฟล์คือ spec file และ configuration file.
- spec file : ก็คือไฟล์พวก
spec.js
- configuration file : คือไฟล์ config ตั้งชื่อว่า
protractor.conf.js
สร้างไฟล์ protractor.conf.js
ตั้งค่าดังนี้
exports.config = { specs: ['test/e2e/**/*.spec.js']}
ทำการ start protractor ด้วยคำสั่ง protractor FILENAME
protractor protractor.conf.js
จะเห็น Result ดังนี้
Starting selenium standalone server...[launcher] Running 1 instances of WebDriverSelenium standalone server started at http://128.0.254.61:32260/wd/hub
Finished in 0.001 seconds0 tests, 0 assertions, 0 failures
Step 6 : Create Test
describe('Try Protractor', function () { beforeEach(function () { browser.get('http://localhost:5555/') })
describe('index', function () { it('should display the title', function () { expect(browser.getTitle()).toBe('Try Protractor') })
it('should display greeting message', function () { var message = $('div.main')
expect(message.getText()).toBe('Hello World') }) })})
beforeEach
: ใช้browser
ซึ่งเป็น API ของ Protractor ทำการ browser เว็บไซต์http://localhost:5555/
- Test 1 : ทำการเช็ค Title ของหน้า HTML
- Test 2 : ทำการเช็ค message ภายใน
div.main
$('div.main')
ไม่ใช่ jQuery แต่เป็น alias ของelement(by.css())
สุดท้ายทำการรัน Protractor อีกครั้ง
protractor protractor.conf.js
ได้ผลลัพธ์ดังนี้
Starting selenium standalone server...[launcher] Running 1 instances of WebDriverSelenium standalone server started at http://128.0.254.61:38566/wd/hub..
Finished in 1.238 seconds2 tests, 2 assertions, 0 failures
เป็นอันเรียบร้อย :)
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust