สร้างโปรแกรมทดสอบเว็บแอพพลิเคชันอัตโนมัติด้วย Selenium WebDriver : ตอนที่ 1 การติดตั้ง Web Driver

“Selenium” คือ ชุดเครื่องมือที่ใช้สำหรับทดสอบเว็บแอพพลิเคชันอัตโนมัติ โดยประกอบด้วยเครื่องมือ 4 เครื่องมือ การใช้งานจะขึ้นอยู่กับวัตถุประสงค์ของการทดสอบในแต่ละองค์กร ได้แก่

  • Selenium Integrated Development Environment (Selenium IDE)
  • Selenium Remote Control (RC)
  • WebDriver
  • Selenium Grid

SeleniumSuite

โดยในปัจจุบัน ในส่วนของ Selenium RC (Selenium 1.0) และ WebDriver ได้ร่วมเป็น Selenium ในเวอร์นที่ 2 ซึ่งในบทความนี้ ผู้เขียนจะขอเรียกว่า Selenium Web Driver เพื่อไม่ให้สับสนกับ Selenium ค่ะ ต่อไปก็ขออธิบายลงไปที่ Selenium Web Driver ต่อไปเลยค่ะ 

Selenium Web Driver เป็นเครื่องมือที่ช่วยให้เราสามารถสร้างโปรแกรมในการทดสอบเว็บแอพพลิเคชันกับ Web browser ได้หลายตัว ซึ่งถือเป็นคุณสมบัติเด่นที่ดีกว่า Selenium IDE ค่ะ (Selenium IDE จะใช้งานได้เฉพาะ firefox เท่านั้น) โดยจะมี Web Driver เป็นตัวกลางที่มีไลบารีที่ช่วยในเราติดต่อกับ Web browser ได้ดังรูปค่ะ

WebDriver_and_Browsers(1)

 

โดยใช้การเขียนโปรแกรมในภาษาต่างๆ ที่เราคุ้นเคยกัน ไม่ว่าจะเป็น JAVA, .Net (VB/C#), Ruby ติดต่อกับไลบารีของ WebDriver เพื่อเข้าถึงคอนโทรลที่แสดงผ่าน Web browser ได้ ทำให้เราสามารถสร้างโปรแกรมการทดสอบได้หลากหลายมากขึ้น เช่น

  • ดึงข้อมูลที่ใช้สำหรับกรอกข้อมูลบนฟอร์ม จากฐานข้อมูลได้
  • สามารถใช้ทดสอบหลายๆ กรณี ได้อย่างต่อเนื่อง

เริ่มเห็นประโยชน์กันบ้างยังค่ะ ต่อไปเพื่อไม่ให้เป็นการเสียเวลาและเพื่อให้เห็นภาพมากยิ่งขึ้น เราก็มาเริ่มการติดตั้งเลย โดยบทความนี้จะใช้ WebDriver ของ Firefox และภาษา C# ในการพัฒนา

ขั้นตอนที่ 1 : โหลด Selenium Client และ WebDriver
ไปยัง URL : http://www.seleniumhq.org/download/
Selenium Client คือ ไลบาลีที่ใช้ติดต่อกับ WebDriver ซึ่งขึ้นอยู่กับภาษาที่ใช้ในการพัฒนา

11

12

(จากรูปด้านบน เลือกตามภาษาที่ใช้ในการพัฒนา)

WebDriver คือ ไลบารีที่ใช้ติดต่อกับ Web brower ซึ่งในส่วนของ firefox จะติดมากับไลบารีของ Selenium Client อยู่แล้ว แต่ในส่วนของ IE , Chrome หรือ Safari ต้องโหลดแยกต่างหาก โดยในส่วนของเว็บ Selenium ก็มีให้โหลดเรียบร้อยแล้ว 

13

14

(จากรูปบน เป็น Webdriver ของ Chrome เลือกตามระบบปฎิบัติการใช้งาน)

15

(จากรูปบน เป็นไฟล์ Webdriver ของ Chrome โดยเราจะเรียกใช้โดยการอ้างอิงจากพาร์ธ)

ขั้นตอนที่ 2 : การติดตั้งไลบารีกับ Visual Studio

เมื่อดาวน์โหลดมาเรียบร้อย ทำการแตกไฟล์จะได้โฟลเดอร์ตามรูป โดยเลือกใช้งานตาม .Net Framework ที่ใช้ในการพัฒนา

16

จากนั้นทำการสร้าง Project และทำการ Add Referrence

1

2

ขั้นตอนที่ 3 : Hello World !!

ขั้นตอนนี้ทำการเขียนโปรแกรม โดยการกดปุ่มจากฟอร์มและโปรแกรมทำการเปิดเว็บเพจ google ค้นหาคำว่า Hello World

18

3

 

(จากรูปบน เป็นส่วนของการประกาศใช้งานไลบารีของ Selenium ซึ่งในกรณีนี้อยู่ที่ว่าจะใช้เรียกเว็บ browser อะไรก็เรียกใช้ไลบารีตัวดังกล่าว จากตัวอย่างผู้เขียนจะเรียกใช้ Firefox กับ Chrome)

5

(จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Firefox)

4

(จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Chrome โดยจะแตกต่างจากของ Firefox ตรงที่ต้องมีการระบุตำแหน่งของ driver ซึ่งในขั้นตอนที่ 2 ได้ทำการโหลดมา)

6

(จากรูปบน เป็นการเขียนโปรแกรมให้เว็บของ google ค้นหาว่า Hello World!!! คำอธิบายตาม comment เลยจร้า  โดยรูปแบบการค้นหายังมีอีกหลายวิธี ซึ่งอธิบายในตอนต่อไป  )

เขียนเสร็จเรียบร้อย ลอง run ดูจะได้ผลลัพธ์ตามข้างล่าง ไป Hello World กัน !!! 

17

เป็นอย่างไรบ้าง ไม่ยากเลยใช่ไหมค่ะ หวังว่าจะมีประโยชน์ต่อทุกท่านที่กำลังหาเครื่องมือในการทดสอบเว็บแอพพลิเคชัน ซึ่งในตอนถัดไปผู้เขียนจะอธิบายในส่วนของการค้นหาคอนโทรลบนเว็บที่มีเงื่อนไขมากขึ้น ไม่ว่าจะเป็นคอนโทรลที่สร้างจาก jquery, dojo หรือ SVG เป็นต้น

อ้างอิง : http://www.seleniumhq.org  http://www.guru99.com/selenium-tutorial.html