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

บทความนี้ไม่ใช่ Tutorial นะครับ เป็นเพียงแค่การจดบันทึกของผมหลังจากที่เพิ่งหัดลองเขียน E2E Test บน AngularJS เผื่อจะมีประโยชน์แก่ผู้ที่กำลังสนใจในหัวข้อเดียวกัน สำหรับบทความนี้ผมก็อ่านมาจากหลายๆแหล่ง ยำๆมั่วๆ เท่าที่จะนึกออก ก็ประมาณด้านล่างนี้

Step 1 : Create Project

เริ่มต้นผมทำการสร้างโปรเจ็ค Angular โดยใช้ Bower ทำการสร้างโฟลเดอร์ชื่อ protractor และสร้างไฟล์ bower.json ดังนี้

mkdir protractor
cd protractor
touch bower.json

ภายในไฟล์ bower.json กำหนดชื่อและเวอร์ชัน รวมถึง dependencies ต่างๆ ดังนี้

{
  "name": "try-protractor",
  "version": "1.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "dependencies": {
    "angular": "~1.3.15"
  }
}

ทำการโหลด AngularJS ด้วยคำสั่ง

1
bower install angular

หลังจากนั้นระบบจะโหลด dependencies มาไว้ที๋โฟลเดอร์ bower_components ภายในโปรเจ็ค

Step 2 : Create Index Page

ทำการสร้างไฟล์ index.html ขึ้นมา แบบง่ายๆ โดยตั้งชื่อ ng-app เป็น myApp และใช้ ng-controller ชื่อ MainController

ผมใช้ Controller As Syntax อ้างอิงจาก

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Try Protractor</title>
6
  </head>
7
  <body ng-app="myApp">
8
    <div class="main" ng-controller="MainController as main">
9
      <h1>{{ main.message }}</h1>
10
    </div>
11

12
    <script src="bower_components/angular/angular.js"></script>
13
    <script src="js/app.js"></script>
14
  </body>
15
</html>

โดยด้านบน มีแค่ expression เพื่อแสดง message ใน MainCtroller

Step 3 : Create Controller

ต่อมาผมทำการสร้างไฟล์ ่js/app.js ดังนี้

1
var app = angular.module('myApp', [])
2

3
function MainCtrl() {
4
  var vm = this
5
  vm.message = 'Hello World'
6
}
7

8
app.controller('MainController', MainCtrl)

ทดสอบรันเซิฟเวอร์ โดยการเปิดไฟล์ index.html ส่วนตัวผมใช้ ้http module ของ python3

1
python3 http.server -m 5555

เมื่อเปิดบราวเซอร์ http://localhost:5555/ ก็จะเห็นข้อความ Hello World ปรากฎ :)

Step 4 : Install Protractor

เริ่มต้นการเขียน Test ขั้นแรก ทำการติดตั้งเจ้า Protractor ด้วยคำสั่ง

1
npm -g install protractor

จากนั้นสั่งอัพเดท webdriver-manager ซึ่งมันจะไปโหลดตัว Selenium Server รวมถึง Chrome Driver มาให้

1
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 ตั้งค่าดังนี้

1
exports.config = {
2
  specs: ['test/e2e/**/*.spec.js']
3
}

ทำการ start protractor ด้วยคำสั่ง protractor FILENAME

1
protractor protractor.conf.js

จะเห็น Result ดังนี้

Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://128.0.254.61:32260/wd/hub


Finished in 0.001 seconds
0 tests, 0 assertions, 0 failures

Step 6 : Create Test

1
describe('Try Protractor', function () {
2
  beforeEach(function () {
3
    browser.get('http://localhost:5555/')
4
  })
5

6
  describe('index', function () {
7
    it('should display the title', function () {
8
      expect(browser.getTitle()).toBe('Try Protractor')
9
    })
10

11
    it('should display greeting message', function () {
12
      var message = $('div.main')
13

14
      expect(message.getText()).toBe('Hello World')
15
    })
16
  })
17
})

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 อีกครั้ง

1
protractor protractor.conf.js

ได้ผลลัพธ์ดังนี้

1
Starting selenium standalone server...
2
[launcher] Running 1 instances of WebDriver
3
Selenium standalone server started at http://128.0.254.61:38566/wd/hub
4
..
5

6
Finished in 1.238 seconds
7
2 tests, 2 assertions, 0 failures

เป็นอันเรียบร้อย :)

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

Step 1 : Create Project

Step 2 : Create Index Page

Step 3 : Create Controller

Step 4 : Install Protractor

Step 5 : Protractor Configuration

Step 6 : Create Test

Chai Phonbopit

Related Posts

ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ

อัพเดทเว็บอีกแล้ว v6.0 จาก Gatsby มา Next.js

แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website