เขียน 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 ด้วยคำสั่ง

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

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 WebDriver
Selenium standalone server started at http://128.0.254.61:38566/wd/hub
..

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

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

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

Step 1 : Create Project

Step 2 : Create Index Page

{{ main.message }}

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