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

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

บทความนี้ไม่ใช่ 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.

  1. spec file : ก็คือไฟล์พวก spec.js
  2. 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

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

Chai Chai Phonbopit : Web Developer @Nimbl3 • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด