มาเริ่มต้นเขียน Automate Robot Framework with SeleniumLibrary และ ทำ Workshop Login Facebook กันเถอะ

7 min readMar 15, 2018

การที่เราจะ Release applications ที่เราสร้างขึ้นนั้น มันก็จะต้องมีการ ทดสอบสิ่งที่สร้างขึ้นมากันก่อน ว่าการทำงานมันถูกต้องรึเปล่า โดยในสมัยก่อนนั้น ทาง Tester หรือ Quality assurance ก็จะทำการทดสอบ applications ที่สร้างขึ้นมาด้วยมือ โดยมี Test cases มากำหนดว่าจะทดสอบอะไรบ้าง หรือ ที่เรามักจะเรียกกันว่า Manual Test แต่มันก็จะมีปัญหาเวลาที่มีการพัฒนา applications ไปอีกหลาย ๆ version เกิดคำถามว่า แล้วเวลาที่ update version ขึ้นไป จะรู้ได้ยังไงว่า.. สิ่งที่ update ขึ้นไปนั้น ของเก่ามันยังใช้งานได้อยู่รึเปล่า กลายเป็นว่าต้อง Manual Test ใหม่ทั้งหมด แล้วยิ่ง applications ที่เราสร้างขึ้นมา มันใหญ่ขึ้นไปเรื่อย ๆ Test cases มันก็จะยิ่งเยอะไปอีก ทำให้อาจจะใช้ Tester คน หรือ สองคนไม่พอ อาจจะทำให้ทดสอบไม่ไหว หรือ อาจจะกินเวลานานมาก และ ด้วยความที่มันเยอะ อาจจะเกิดอาการที่เรียกว่า “เทสหลุด”, “เคสนี้น้องเทสไปหรือยังคะ”, “ปล่อยให้ขึ้นไปหาลูกค้าได้ยังไง” นั่นน่าจะเป็นจุดเริ่มต้น ที่ทำให้มีคนคิดค้นสิ่งที่จะมาช่วย Tester หรือ Quality assurance นั่นก็คือ การทดสอบระบบแบบ Automate นั่นเอง

ซึ่งระบบ Automate ที่ผู้เขียนบทความนี้ จะนำมาใช้ นั่นก็คือ “Robot Framework”
Robot Framework คือ Generic test automation framework for acceptance testing and ATDD ซึ่งการใช้งานก็ค่อนข้างง่าย (สำหรับคนเขียนโปรแกรมไม่เป็น แต่พอจะรู้จักโครงสร้างของโปรแกรมมาบ้าง ก็ทำได้) ขอเกริ่นนิดนึง บทความนี้จะไม่ร่ายยาวมาก เนื้อจาก อยาก workshop มากกว่า Robot Framework implement มาจาก ภาษา Python ทั้ง version 2 และ version 3 ซึ่งวิธีการใช้งาน Robot Framework รองรับทั้ง 2 version แต่เท่าที่เห็น ปัจจุบัน คนไทยนิยมใช้กับ Python 2.7 (Python จะ support จนถึงปี 2020)

Robot Framework สามารถ Test data ของคุณ สามารถ executes test cases ออกมาเป็น report และ logs ให้คุณได้

เอาเป็นว่า ถ้าอยากทราบข้อมูลลึก ๆ ของ Robot Framework สามารถ warp ไปได้ที่ http://robotframework.org

Robot Framework จะแบ่ง Structure ด้วยกัน 4 อย่าง

*** Settings ***
*** Variables ***
*** Keywords ***
*** Test Cases ***

Settings

ในส่วนของ Settings ใช้ในการ include file, กระกาศ document description, การทำ Suite Setup — Teardown, Test Setup — Teardown และ การ import library ซึ่งการ import library จะแบ่งไปอีก 3 ส่วน นั่นคือ Standard, External, Other ซึ่งสามารถไปดูต่อได้ ที่ http://robotframework.org/#libraries

Variables

ในส่วนของ Variables หากท่านมีประสบการเขียนโปรแกรมมาบ้าง ผมจะบอกว่ามันก็คือการ ประกาศตัวแปรนั่นเอง ส่วนท่านที่ไม่เคยเขียนโปรแกรม ให้ลองดูตัวอย่างครับ

*** Variables ***${TEST_VARIABLE}    Welcome to Robot Framework by iamgique.# ${TEST_VARIABLE} คือชื่อตัวแปร
# “Welcome to Robot Framework by iamgique.” คือ Value

Keywords

ในส่วนของ Keywords, Keyword ก็เหมือนกับการเขียน Function ในภาษาโปรแกรมมิ่งทั่วไป ดูตัวอย่างจะเข้าใจง่าย

*** Keywords ***Test Keywords
    Click Button    ok_button# Test Keywords  คือชื่อของ Keywords หรือ ชื่อ Function นั่นแหละ
# Click Button   จัดเป็น Keywords นึงใน Library มีหน้าที่ใช้ Click ปุ่ม
# ok_button      เป็นชื่อของปุ่ม
# กล่าวคือ Keywords นี้เป้นการสั่งการทำงาน ให้ Click ไปที่ปุ่มที่มีชื่อ ok_button

อย่างที่ได้กล่าวไปข้างต้น ว่า Keywords ก็เหมือน Function ดังนั้น มันสามารถ ส่ง Parameter / variables ไปให้ Keywords ใช้ได้ด้วย

*** Keywords ***Test Keywords2
    [Arguments]    ${param}
    Input Text     field_name    ${param}# Test Keywords2   คือชื่อของ Keywords หรือ ชื่อ Function นั่นแหละ
# Input Text       จัดเป็น Keywords นึงใน Library อื่น มีหน้าที่ Input text
# field_name       เป็นการระบุชื่อของ field นั้น ๆ 
# ${param}         เป็นการนำ Parameter / variables มาใช้งาน
# กล่าวคือ Keywords นี้เป้นการสั่งการทำงาน ให้ Robot ไปกรอกค่าบางบางที่ถูกส่งมา ลงไปใน Field ที่ชื่อ field_name

Test Cases

ส่วนของ Test Cases เป็นที่ที่ใช้ในการเขียน สิ่งที่เราจะ Test ลงไป
ในตัวอย่างจะเป็นการเขียน Test ให้ เปิด Browser จากนั้นทำการ Input Username และ Password แล้วคลิ๊กปุ่ม จากนั้นก็ให้ ปิด Browser จะเห้นได้ว่า อันนี้แค่เป็นการ Test ที่ยังไม่ครอบคลุม เนื่องจาก ยังไม่ได้ Validate ว่า Login สำเร็จหรือไม่

*** Test Cases ***Name Test Case    
    Open Browser To Login Page
    Input Text    username_field    username
    Input Text    password_field    password
    Click Button    ok_button
    [Teardown]    Close Browser# Open Browser To Login Page เป็น Keyword ที่สร้างขึ้นมาใหม่
# Input Text เป็นการกรอก username ลงไปใชช่อง input text ที่ชื่อ username_field
# Input Text เป็นการกรอก password ลงไปใชช่อง input text ที่ชื่อ password_field
# Click Button เป็นการสั่งให้ Click ปุ่ม ok_button เพื่อ login
# [Tesrdown] Close Browser เป็นคำสั่ง Teardown ให้ปิด Browser

จบไปแล้วกับ Structure ทั้ง 4 ของ Robot Framework
จะเห็นว่ามีคำสั่งหลายคำสั่ง ที่ผมเขียนว่า เป็น Keyword ของ Library อื่น…
ที่เขียนให้ดูก่อน เพราะว่าเดี่ยวเราต้องใช้ไอเจ้าพวกนี้บ่อยมากครับ จริง ๆ เจ้า Robot Framework อย่างเดียว มันไม่ได้เอาไว้ Test UI บน Browser เราต้องใช้ Library อีกตัว ที่มีคนเขียนเอาไว้ ชื่อว่า “SeleniumLibrary”
ซึ่งเป็น External Library ถึงจะเอามา ทดสอบบน Browser ได้

มาติดตั้ง Robot Framework กัน

ขึ้นตอนแรกในการติดตั้ง Robot Framework อย่างที่ได้กล่าวไป มัน Implement มาจาก Python ดังนั้นเราก็ต้อง install Python กันก่อน

ถ้าคุณใช้ OSX ข้อดีของมันคือ มันมี Python อยู่แล้ว ข้ามการติดตั้ง Python ไปได้เลย
ถ้าคุณใช้ Windows ต้อง Install !!!
— Download and Install Python: download Python

Command:
cd C:\Python27
C:\Python27>python
Python 2.7.8 (default, Jun 30 2014, 16:03:49) [MSC v.1500 32 bit (Intel)] on win
32
Type "help", "copyright", "credits" or "license" for more information.
>>>

— Download get-pip.py: download pip pip is the preferred installer program.
ไปที่ Path get-pip.py ที่ทำการ Download แล้ว รัน python get-pip.py.

Command:
C:\user\guest>python get-pip.py
C:\user\guest>cd C:\python27\Scripts
C:\python27\Scripts>pip freeze
antiorm==1.1.1
enum34==1.0
requests==2.3.0
virtualenv==1.11.6

เซ็ท Environment Variables Click ขวาที่ My Computer > Properties > Advanced system settings > Environment Variables And then look at System variables click New..

Variable name:  PYTHON_HOME
Variable value: C:\Python27
Click OK

สำหรับ windows10 ให้ดูที่ Path แล้ว click edit แล้วใส่ C:\Python27; เอาไว้ที่หลังสุด แล้วใส่ C:\Python27\Scripts;
สำหรับ windows อื่น ๆ ให้ดูที่ Path แล้ว click edit แล้วใส่ ;%PYTHON_HOME%;%PYTHON_HOME%\Scripts
แล้ว Click OK

system-variable

หลังจากทำ เสร็จ ทุกขั้นตอน ก็มาดูกันหน่อย ว่าเรา install ของ ครบหรือยัง

Command:
C:\user\guest>python
C:\Python27>python
Python 2.7.8 (default, Jun 30 2014, 16:03:49) [MSC v.1500 32 bit (Intel)] on win
32
Type "help", "copyright", "credits" or "license" for more information.
>>>

ลองใช้คำสั่ง python ถ้าขึ้นตามนี้ แปลว่าเครื่องของคุณมี Python เรียบร้อยแล้ว congtrats !!!

C:\user\guest>pip freeze
antiorm==1.1.1
enum34==1.0
requests==2.3.0
virtualenv==1.11.6

คำสั่ง pip คือคำสั่ง Python install package เอาไว้ install พวกของที่จะใช้
มาถึงตรงนี้ ถ้าคุณสามารถใช้ python และ pip ได้ ก็ใกล้จะใช้ Robot Framework ได้แล้วครับ

-เมื่อกี้แค่ Install python กับ pip ตอนนี้เราจะมาลง พระเอกของเรากัน

Command:
pip install robotframework# Upgrade to the latest version
pip install --upgrade robotframework

# Install a specific version
pip install robotframework==2.9.2

Install Robot Framework Database-Library (ลงเอาไว้ใช้ต่อ database)

Command:
pip install robotframework-databaselibrary

Install Robot Framework pymysql (ลงเอาไว้ใช้ต่อ mysql) ถ้าระบบของท่านใช้ database ของเจ้าอื่น ให้ลอง search ดูครับ น่าจะมีเกือบครบทุกเจ้าหลัก

pip install pymysql

สุดท้ายละ Install กันจนเบื่อ ตัวต่อมาเป็น พระเอกของพระเอกอีกที Seleniumlibrary

Command:
pip install robotframework-seleniumlibrary
pip freeze
appdirs==1.4.0
decorator==4.0.11
packaging==16.8
pyparsing==2.1.10
robotframework==3.0.2
robotframework-seleniumlibrary==4.1.0
selenium==3.0.2
six==1.10.0

เมื่อเราลงเสร็จ ลองใช้ คำสั่ง pip freeze จะเห็นว่า มันมี library มากกว่าเดิม ดังที่เห็น อันที่จริง ยังมี tools ให้ใช้ด้วยชื่อ RIDE แต่ผมจะไม่ขอพูดถึง เพราะมันทำให้เราไม่ค่อยได้ใช้ทักษะในการ coding ซึ่งท่านสามารถไปอ่านต่อได้ที่ https://github.com/iamgique/Robot-Framework-with-Selenium-and-Workshop-Login-Facebook/blob/master/README.md

Tools หรือ IDE ที่จะใช้ในการเขียน Robot Framework เอาที่ผู้อ่านถนัดเลยครับ ในที่นี้ผมจะใช้ VI เขียน ซึ่งมันไม่มีผลอะไรกับสิ่งที่เราจะทำ

มาเริ่มเขียน Robot Framework with SeleniumLibrary: Login Facebook กันเถอะ

สร้าง File ขึ้นมา 1 ไฟล์ ผมให้ชื่อ “LoginFacebook.robot” อย่างที่ได้กล่าวไปแล้ว Structure ของมันมีอยู่ด้วยกัน 4 ส่วน เราก็มาเริ่มทำกันเลย (จริง ๆ ไม่ต้องมีส่วน Variable กับ Keywords ก็ได้ แต่ควรใช้ให้ชิน เวลา Test Cases เยอะ ๆ จะเห็นผลมาก เนื่องจากมันช่วยประหยัดเวลาในการ coding ได้มาก เวลาแก้ แก้ที่เดียว)

Settings

ซึ่งทำการเรียก Library SeleniumLibrary, BuiltIn, String และมีการกำหนด Suite Teardown โดยสั่งให้ Close Browser

*** Settings ***
Library    SeleniumLibrary
Library    BuiltIn
Library    StringSuite Teardown     Close Browser

Variable

ผมประกาศตัวแปรตามใน ส่วนของ Code
— จุดสังเกตุ จะเห็นได้ว่า ตัวแปร ${input_user} จะระบุ path ที่อยู่ของ id ที่จะ input
— จุดสังเกตุ จะเห็นได้ว่า ตัวแปร ${btn_login} จะระบุไปยังปุ่มที่จะกด
— จุดสังเกตุ ${username_success} ควรเปลี่ยนเอาที่ใช้งานได้จริง
— จุดสังเกตุ ${password_success} ควรเปลี่ยนเอาที่ใช้งานได้จริง

*** Variable ***
${url_facebook}        https://www.facebook.com
${title_facebook}      Facebook - เข้าสู่ระบบหรือสมัครใช้งาน
${input_user}          //*[@id="email"]
${input_pass}          //*[@id="pass"]
${btn_login}           //*[@class="uiButton uiButtonConfirm"]
${txt_not_me}          //*[@id="not_me_link"]
${txt_message}         //div//textarea[@name="xhpc_message"]
${username_fail}            xxxxx@xxxxx.com
${password_fail}            12345678
${username_success}            iamgique@iamgique.com
${password_success}            iamgique@iamgique.com

Keywords

เขียนมา 5 Keyword
1. การ Verify facebook page
2. การ Input ค่า Username และ Password
3. การสั่งให้ Click ปุ่ม Login ใน Facebook
4. เป็น Keywords Verify Login ไม่สำเร็จ
5. เป็น Keywords Verify Login สำเร็จ

*** Keywords ***
Verify facebook page
    [Arguments]                ${title}
    Title Should Be            ${title}Input Username and Password
     [Arguments]      ${xpath_user}       ${xpath_pass}     ${username}       ${password}
     Element Should Be Visible    ${xpath_user}
     Element Should Be Visible    ${xpath_pass}
     Input Text       ${xpath_user}       ${username}
     Input Text       ${xpath_pass}       ${password}Click Button Login
     [Arguments]       ${btn}
     Element Should Be Visible    ${btn}
     Click Element        ${btn}Verify Login Fail
   [Arguments]        ${xpath}
   Element Should Be Visible        ${xpath}Verify Login Success
   [Arguments]        ${xpath}
   Element Should Be Visible        ${xpath}

Test Cases

ในการทำ Workshop นี้ จะมีอยู่ด้วยกัน 2 Cases login fail กับ login success
โดยทำการ เปิด browser ขึ้นมา
กรอก url facebook ที่อยู่ใน Variable
ทำการ Verify facebook page
จากนั้น ทำการกรอก user และ password ลงไป ซึ่งจะถูกส่งต่อไปยัง Keywords
เมื่อกรอกเสร็จ ให้ robot กดปุ่ม login
จากนั้นก็มา Verify กันอีกที

*** Test Cases ***
Login facebook - Fail
    [tags]    fail
    Open Browser    about:blank    chrome
    Go To           ${url_facebook}
    Verify facebook page           ${title_facebook}
    Input Username and Password    ${input_user}     ${input_pass}       ${username_fail}      ${password_fail}
    Click Button Login          ${btn_login}
    Verify Login Fail           ${txt_not_me}Login facebook - success
    [tags]    success
    Open Browser    about:blank    chrome
    Go To           ${url_facebook}
    Verify facebook page           ${title_facebook}
    Input Username and Password    ${input_user}     ${input_pass}       ${username_success}      ${password_success}
    Click Button Login          ${btn_login}
    Verify Login Success           ${txt_message}

เสร็จแล้วครับ เขียนแค่นี้แหละ เราก็จะได้ Robot login facebook มาใช้งานแล้ว

การ run robot

robot… (Robot 3.0 or more)
pybot… (Robot 2.9 or earlier)
robot — help (for more information)pybot LoginFacebook
pybot — test Login facebook — success — loglevelDEBUG LoginFacebookpybot -d .\report .\LoginFacebook

— ถ้าคุณใช้ python 3 ขึ้นไป ให้ใช้คำสั่ง robot ในการรัน
— ถ้าคุณใช้ python 2.9 หรือ ต่ำกว่านั้น ให้ใช้คำสั่ง pybot
— ถ้าอยากได้ information เพิ่ม robot — help

— คำสั่ง pybot LoginFacebook เป็นการระบุ File ที่ต้องการให้ Robot run
— คำสั่ง pybot — test Login facebook — success — loglevelDEBUG LoginFacebook เป็นการเทสแบบ ระบุ Test Cases

— คำสั่ง pybot -d .\report .\LoginFacebook เป็นการ บอกให้ Robot ออก Report เอาไว้ตาม Directory ที่เรากำหนด (ถ้าไม่กำหนด Report และ logs จะออกจาก path ที่เรา run file robot

รู้จักคำสั่งกันไปแล้ว ทีนี้มารันกัน เอาง่ายที่สุด
ให้เราไปที่ path ที่เราสร้าง ไฟล์ LoginFacebook.robot แล้วรันด้วยคำสั่ง

pybot LoginFacebook.robot

ถ้าเราเขียนถูกต้อง จะเห็นว่า เป็น PASS ถ้าไม่ถูก จะ FAIL ซึ่งไม่ว่าเราจะ Test case Success หรือ Fail มันก็ควรที่จะ PASS เนื่องจากเรา ต้องการทั้งสองเคส ส่วน report ท่านสามารถดูได้จาก path ที่ run เลย

Website Official: http://robotframework.org
Keywords ที่ควรศึกษาเพิ่มเติม: http://robotframework.org/SeleniumLibrary/
Source code: https://github.com/iamgique/Robot-Framework-with-Selenium-and-Workshop-Login-Facebook

จบกันไปแล้วนะครับ สำหรับ Workshop Login Facebook หวังว่าบทความนี้ จะมีคนที่สามารถใช้งาน Robot Framework ได้จริงเพิ่มมากขึ้น

มาเริ่มต้นเขียน Automate Robot Framework with SeleniumLibrary และ ทำ Workshop Login Facebook กันเถอะ

Robot Framework จะแบ่ง Structure ด้วยกัน 4 อย่าง

Settings

Variables

Keywords

Test Cases

มาติดตั้ง Robot Framework กัน

มาเริ่มเขียน Robot Framework with SeleniumLibrary: Login Facebook กันเถอะ

Settings

Variable

Keywords

Test Cases

การ run robot

Written by Sakul Montha