บทความนี้เป็นบทความตอนที่สองว่าด้วยเรื่องการทำ acceptance test ใน CodeIgniter ด้วย Codeception โดยสามารถอ่านเนื้อหาตอนแรกได้จาก Codeception’s Acceptance Test with Codeception และตอนที่ 3 ได้จาก DB test with Codeception

ในตอนนี้เราจะมาว่ากันด้วยการ setup ให้ Codeception สามารถรันเทสต์แบบ live บน chrome ได้ หรือพูดง่ายๆ ก็คือ เวลาเราสั่งรันเทสต์ Codeception ทำทำตัวเป็น robot แล้วเทสต์ผ่านหน้าจอเว็บใน chrome ให้เราดูด้วยตาเปล่า แทนที่จะเป็นแค่โชว์สถานะว่า pass หรือ fail ทาง command line เพียงอย่างเดียว

ติดตั้ง Selenium

Selenium คืออะไร?

Selenium คือระบบการ test ผ่าน browser ซึ่งประกอบไปด้วย 3 องค์ประกอบ ได้แก่ WebDriver, Server และ Client

  • WebDriver คือ driver ที่ใช้สำหรับเชื่อมต่อกับ browser แต่ละยี่ห้อ (สำหรับ tutorial นี้จะใช้ Chrome Webdriver)
  • Server คือ server application ที่เขียนขึ้นโดย Java ใช้สำหรับรอการเชื่อมต่อจาก Client อีกที
  • Client คือโปรแกรมที่ยิงคำสั่งไปยัง Server

โดยสรุปก็คือ Codeception ทำหน้าที่เป็น Selenium Client และใช้ Selenium Server ในการควบคุม browser เพื่อใช้ในการ test ผ่าน Webdriver

ติดตั้ง Selenium Server

ให้ทำการ download Selenium Server เวอร์ชั่น 2.53.1 มา (เวอร์ชั่นล่าสุดขณะที่ผมกำลังเขียนอยู่ในตอนนี้คือ 3.0 แต่เนื่องจากเวอร์ชั่นดังกล่าวมีการเปลี่ยนแปลง syntax ต่างๆ ไปพอสมควร จากเดิม ทางผมจึงขอใช้เวอร์ชั่น 2.x.x ไปก่อน) โดยให้ดาวน์โหลดจาก Selenium Standalone Server 2.53.1

จากนั้นให้นำไฟล์ selenium-server-standalone-2.53.1.jar ไปวางไว้ใน root project

CITest/
└── selenium-server-standalone-2.53.1.jar

Configuring Codeception

ให้เปิดไฟล์ CITest/tests/acceptance.suite.yml ขึ้นมา จากนั้นให้ปรับรายละเอียดของ code ภายในไฟล์ดังกล่าว ดังนี้

Selenium รองรับการรันกับ Firefox โดย default แต่เนื่องจากตั้งแต่ Firefox version 47 เป็นต้นมา เกิดปัญหาการค้างกับ selenium ดังนั้น เราจะทำการ downgrade firefox ให้อยู่ที่ เวอร์ชั่น 45 โดยสามารถไปดาวน์โหลดได้ที่ http://businessofsoftware.org/2014/05/building-the-minimum-badass-user-pt-2-unfinished-business-kathy-sierra/

Running Selenium Server

เปิด Terminal (สำหรับ windows ให้เปิด CMD) แล้วรันคำสั่งต่อไปนี้

หมายเหตุ: การรันคำสั่งข้างต้น จำเป็นที่เครื่องของผู้รันจะต้องมีการติดตั้ง Java ไว้ที่เครื่องของตนไว้ หากยังไม่ได้ติดตั้ง ให้ไปดาวน์โหลดได้ที่ Java SDK 8 จากนั้นทำการติดตั้งให้เรียบร้อย และ set path ให้สามารถรันคำสั่ง java บน command line ได้ ซึ่งทั้ง Mac OS และ Windows user สามารถไปดูขั้นตอนการ setup ได้ที่ How do I set or change the PATH system variable?

หากไม่มีอะไรผิดพลาด เราจะ terminal จะแสดงข้อมูลดังนี้

Running Tests

เมื่อรัน Selenium Server แล้ว ก็ถึงเวลารัน test แล้ว

ให้สั่งรันด้วย คำสั่งเดิม ดังนี้

หากสำเร็จ เราจะเห็น chrome เปิดขึ้นมา แล้วรันการเทสต์แบบอัตโนมัติให้เราได้เห็น

screen-shot-2559-10-10-at-4-49-17-pm

รันเทสต์ด้วย Google Chrome

นอกเหนือไปจากการรันเทสต์ด้วย Firefox แล้ว เรายังสามารถรันผ่าน Chrome browser ได้อีกด้วย โดยมีขั้นตอนดังนี้

ติดตั้ง Google Chrome Webdriver

ให้ดาวน์โหลด driver ได้ที่ ChromeDriver (ให้ดาวน์โหลด driver ให้ตรงกับ os ของตัวเอง) เมื่อดาวน์โหลเสร็จแล้ว ให้แตก zip จะได้ไฟล์ chromedriver ออกมา ให้นำไฟล์ดังกล่าวไปวางไว้ที่ root project folder

CITest/
└── chromedriver

Configuring Codeception ให้ใช้งานกับ chromedriver

หากเราจะใช้ chromedriver ร่วมกับ Codeception (ซึ่งตอนนี้กำลังจะกลายร่างเป็น Selenium Client แล้ว) เราจะต้องทำการ config ตัว Codeception ให้มันรู้จักกับ chromedriver เสียก่อน ซึ่งก็ไม่ได้ยากเย็นอะไร

ให้เปิดไฟล์ CITest/tests/acceptance.suite.yml ขึ้นมา จากนั้นให้ปรับรายละเอียดของ code ภายในไฟล์ดังกล่าว ดังนี้

หลังจากการ setup ทั้งสามส่วนอันประกอบไปด้วย Selenium Server, WebDriver (Chromedriver), และ Selenium (Codeception) ก็ถือเป็นอันเสร็จสิ้นขั้นตอนการเตรียมพร้อม ต่อไปก็ได้เวลารัน test แล้ว

Running Selenium Server

เปิด Terminal (สำหรับ windows ให้เปิด CMD) แล้วรันคำสั่งต่อไปนี้

 

จากนั้นก็ให้รันเทสต์

ถือเป็นอันจบกระบวนการทดสอบด้วย Codeception โดยสมบูรณ์

หมายเหตุ: ก่อน push code ขึ้น git repository ให้ปรับ code ของ acceptance.suite.yml กลับไปเหมือนเดิมที่ใช้ PhpBrowser ด้วย เพราะเครื่องของทีมงานบางคนอาจจะไม่ได้ config ให้เครื่องของตนรัน Selenium automated test ได้