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

“Selenium” คือ ชุดเครื่องมือที่ใช้สำหรับทดสอบเว็บแอพพลิเคชันอัตโนมัติ โดยประกอบด้วยเครื่องมือ 4 เครื่องมือ การใช้งานจะขึ้นอยู่กับวัตถุประสงค์ของการทดสอบในแต่ละองค์กร ได้แก่ Selenium Integrated Development Environment (Selenium IDE) Selenium Remote Control (RC) WebDriver Selenium Grid โดยในปัจจุบัน ในส่วนของ 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 ได้ดังรูปค่ะ โดยใช้การเขียนโปรแกรมในภาษาต่างๆ ที่เราคุ้นเคยกัน ไม่ว่าจะเป็น JAVA, .Net (VB/C#), Ruby ติดต่อกับไลบารีของ WebDriver เพื่อเข้าถึงคอนโทรลที่แสดงผ่าน Web browser ได้ ทำให้เราสามารถสร้างโปรแกรมการทดสอบได้หลากหลายมากขึ้น เช่น ดึงข้อมูลที่ใช้สำหรับกรอกข้อมูลบนฟอร์ม จากฐานข้อมูลได้ สามารถใช้ทดสอบหลายๆ กรณี ได้อย่างต่อเนื่อง เริ่มเห็นประโยชน์กันบ้างยังค่ะ ต่อไปเพื่อไม่ให้เป็นการเสียเวลาและเพื่อให้เห็นภาพมากยิ่งขึ้น เราก็มาเริ่มการติดตั้งเลย โดยบทความนี้จะใช้ WebDriver ของ Firefox และภาษา C# ในการพัฒนา ขั้นตอนที่ 1 : โหลด Selenium Client และ WebDriverไปยัง URL : http://www.seleniumhq.org/download/Selenium Client คือ ไลบาลีที่ใช้ติดต่อกับ WebDriver ซึ่งขึ้นอยู่กับภาษาที่ใช้ในการพัฒนา (จากรูปด้านบน เลือกตามภาษาที่ใช้ในการพัฒนา) WebDriver คือ ไลบารีที่ใช้ติดต่อกับ Web brower ซึ่งในส่วนของ firefox จะติดมากับไลบารีของ Selenium Client อยู่แล้ว แต่ในส่วนของ IE , Chrome หรือ Safari ต้องโหลดแยกต่างหาก โดยในส่วนของเว็บ Selenium ก็มีให้โหลดเรียบร้อยแล้ว  (จากรูปบน เป็น Webdriver ของ Chrome เลือกตามระบบปฎิบัติการใช้งาน) (จากรูปบน เป็นไฟล์ Webdriver ของ Chrome โดยเราจะเรียกใช้โดยการอ้างอิงจากพาร์ธ) ขั้นตอนที่ 2 : การติดตั้งไลบารีกับ Visual Studio เมื่อดาวน์โหลดมาเรียบร้อย ทำการแตกไฟล์จะได้โฟลเดอร์ตามรูป โดยเลือกใช้งานตาม .Net Framework ที่ใช้ในการพัฒนา จากนั้นทำการสร้าง Project และทำการ Add Referrence ขั้นตอนที่ 3 : Hello World !! ขั้นตอนนี้ทำการเขียนโปรแกรม โดยการกดปุ่มจากฟอร์มและโปรแกรมทำการเปิดเว็บเพจ google ค้นหาคำว่า Hello World (จากรูปบน เป็นส่วนของการประกาศใช้งานไลบารีของ Selenium ซึ่งในกรณีนี้อยู่ที่ว่าจะใช้เรียกเว็บ browser อะไรก็เรียกใช้ไลบารีตัวดังกล่าว จากตัวอย่างผู้เขียนจะเรียกใช้ Firefox กับ Chrome) (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Firefox) (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Chrome โดยจะแตกต่างจากของ Firefox

Read More »

แจกฟรี Template สำหรับ Web Application แบบไทยๆ

แจกฟรี! Template สำหรับ Web Application หน้าตาเว็บแอพแบบไทยๆ เอาไปใช้กันแบบไม่มีเงื่อนไข หลังจากค้นหาดูจากหลายๆ ที่ก็ไม่โดนใจและการนำไปใช้งานไม่เหมาะสมเท่าที่ควร… เลยทำเองซะเลยจากประสบการณ์ คิดว่าหน้ากากแบบนี้เหมาะกับระบบสารสนเทศแบบไทยๆ (แบบทางราชการ) หลังจากการศึกษาและสำรวจรูปแบบมาจากหลากหลายที่ ส่วนของ source code ที่นำมาใช้และมีการปรับแต่ดังนี้ (จัดเต็ม..เวอร์ชั่นล่าสุด ณ 14/8/2558)

Read More »

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี pre-filled form URL

จากตอนที่แล้ว “ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link” เรารู้วิธีใส่ link ไปในเนื้อหาเมล ในตอนนี้เราจะมาเปลี่ยน static link เป็น dynamic link (คือ link ที่มีการอ้างชื่อ cell จึงเป็น link ที่เปลี่ยนแปลงไปตามค่าที่อยู่ใน cell) จุดประสงค์ก็เพื่อส่ง link ให้ผู้ที่รับอีเมลกรอกข้อมูลลง google form ที่มีข้อมูลให้บางส่วนแล้ว (pre-filled form) ซึ่งเป็นข้อมูลของผู้รับอีเมลแต่ละคนที่แตกต่างกัน เช่น ให้มีฟิลด์ ชื่อ และ หน่วยงาน ไว้แล้ว เป็นต้น เมื่อเปิดฟอร์มจึงไม่ต้องกรอกชื่อ และ หน่วยงาน แต่ยังสามารถแก้ไขได้หากต้องการ แล้วให้กรอกข้อมูลเพิ่มในส่วนอื่น ๆ สมมติ 1. เรามี google sheet ชื่อ members มี 4 คอลัมน์ อยู่แล้ว ดังนี้ รายการที่, ชื่อ, หน่วยงาน, อีเมล 2. เราต้องการสร้าง google form เพื่อสอบถาม ตอบรับร่วมงาน และ ประเภทอาหาร วิธีทำ ดังนี้ 1. สร้าง google form ขึ้นมา 1 อัน ตั้งชื่อว่า member-meeting1 2. สร้าง form field ดังนี้ ชื่อ, หน่วยงาน, ตอบรับร่วมงาน, ประเภทอาหาร 3. เลือกเมนู Responses > เลือก Get pre-filled URL 4. กรอกข้อมูลชื่อตัวแปรลงในช่องข้อมูล เช่น ชื่อ ให้ใส่ f1, หน่วยงาน ให้ใส่ f2 5. กรอกเสร็จให้คลิก submit จะได้หน้าต่างแสดงเป็น URL และมีข้อความบอกให้เราคัดลอก (ctrl+c) 6. URL ที่คัดลอกนี้จะไปใส่ใน google sheet ชื่อ member ในคอลัมน์ใหม่ รวมเป็น 5 คอลัมน์ ดังนี้ รายการที่, ชื่อ, หน่วยงาน, อีเมล, URL 7. ที่ cell URL นี้ ให้ใส่ฟังก์ชั่น =HYPERLINK(“URL”,”URL”) และนำ URL ที่คัดลอกมาวางตรงคำว่า URL 8. ให้แทนที่ข้อความ ตรงที่มีคำว่า f1 ด้วย “&B2&”, แทนที่ f2 ด้วย “&C2&” 9. จากนั้นก็นำความรู้ในเรื่อง “ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link” มาใช้ในการส่งอีเมลได้แล้ว 9.1 เตรียมเนื้อหาจดหมายไว้ใน sheet ชื่อ Template 9.2 เตรียม range ของข้อมูล คีย์เองนะ 9.3 คัดลอก google script จากตอนที่แล้วมาใช้ 9.4 สั่งให้ google script ชื่อ MailMergeWithLinkv2 ทำการส่งอีเมล 9.5 ตรวจสอบดูอีเมลที่ได้รับ 9.6 เมื่อคลิก link จากในเมล จะไปเปิด google form ขึ้นมา พร้อมข้อมูล 2 ฟิลด์แรก

Read More »

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link

ผมใช้ Yet another mail merge ซึ่งเป็น add-on เพื่อส่งอีเมลเรื่องเดียวกันไปยังเพื่อนๆจำนวนหนึ่ง ก็ใช้งานได้ดีมา 5 ครั้งแล้ว แต่พอครั้งหลังนี้ ผมต้องการส่งอีเมลที่ในเนื้อหามี link ให้ผู้ที่รับอีเมลสามารถคลิกเพื่อเปิดอ่านได้ แต่ลองหลายวิธีที่จะส่งด้วยวิธีที่เคยใช้ add-on ตัวนี้ก็จะแสดงเป็นข้อความ ไม่แสดงเป็น link ในอีเมล (อันนี้ต้องบอกก่อนว่า คาดว่าผู้ใช้ส่วนใหญ่ใช้โปรแกรมอีเมลที่มีการแสดงผลมากกว่าข้อความธรรมดา) ค้นหาดูก็พบว่า ต้องเปลี่ยนวิธีทำมาเป็นวิธีเขียน google script เพื่อส่ง mail merge แทน วิธีทำ ดังนี้ 1. สร้าง google sheet ตั้งชื่อ myusers 1.1 sheet แรก ตั้งชื่อ Data ที่มีคอลัมน์ ดังนี้ รายการที่, ชื่อ, คณะ, อีเมล, link1, link2 1.2 sheet สอง ตั้งชื่อ Template ที่มี 1 คอลัมน์ เพื่อเขียน subject และ ข้อความจดหมายที่มี link 1.3 sheet สาม ตั้งชื่อ Range ที่มี 3 คอลัมน์ ดังนี้ header, data, template 2. ใส่ข้อมูลตามตัวอย่างรูปภาพ 3. ที่ google sheet ให้คลิกที่ Tool > Script editor > เลือก Blank Project > ตั้งชื่อว่า myusers project 4. แปะ google script ตามซอร์สโค้ดด้านล่างบทความนี้ และคลิก Save หมายเหตุ ซอร์สโค้ดนี้จะวางตำแหน่งอีเมลไว้ที่คอลัมน์ที่ 4 5. ปิดแท็บ google script (myusers project) 6. ปิดแท็บ google sheet (myusers) แล้วเปิดใหม่ 7. เมื่อเปิดใหม่จะเห็นว่ามีเมนู Email และมี submenu ชื่อ MailMergeWithLinkv2 8. คลิกเมนู Email > MailMergeWithLinkv2 จะมีการขอสิทธิในการรัน script ดังรูป    9. ไปตรวจสอบว่าอีเมลถูกส่งไปและมีเนื้อหาที่มี link ตามต้องการ 10. หากต้องการส่งอีกครั้งให้กับอีเมลที่ได้ส่งแล้ว ให้ดูที่คอลัมน์ อีเมล จะเห็นว่ามี Note เนื่องจากว่า google script นี้ได้เขียน Note ไว้ใน cell ใช้เป็นการป้องกันการส่งอีเมลซ้ำ ให้คลิกขวาและเลือก Clear Note ซอร์สโค้ดที่ใช้: function onOpen() {   var submenu = [{name:”MailMergeWithLinkv2″, functionName:”MailMergeWithLinkv2″}];   SpreadsheetApp.getActiveSpreadsheet().addMenu(‘Email’, submenu);   } function MailMergeWithLinkv2() {   var ss = SpreadsheetApp.getActiveSpreadsheet(),   DataSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Data”)),   TemplateSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Template”)),   RangeSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Range”)),   header = RangeSheet.getRange(2, 1).getValue(),   data = RangeSheet.getRange(2, 2).getValue(),

Read More »

รู้จักกับ Algebraic Specification

สวัสดีครับ หลังจากใช้เวลานานในการคิดว่าจะเขียนอะไรดี ก็คิดได้ว่านำเอาความรู้ที่ได้จากการไปเรียนทบทวนเรื่องวิศวกรรมซอฟต์แวร์มาเล่าสู่กันฟังดีกว่า เรื่องที่จะเล่านี้ก็คือ การเขียน Specification ในรูปแบบหนึ่งซึ่งอาจจะใหม่สำหรับบางคน เรียกว่า Algebraic Specification (ชื่อภาษาไทยว่าอะไร ไปหาเอาเองนะครับ) Algebraic Specification เป็นรูปแบบหนึ่งของ Formal Specification (อย่าเพิ่งงงนะครับ) ในการเขียน specification รูปแบบนี้จะใช้คณิตศาสตร์เข้ามาช่วยเพื่อให้เห็นการติดต่อระหว่าง module หรือ component ที่ชัดเจน แล้วมันต่างจากที่เขียนอยู่ยังไง? ถ้าคุณเขียน specification พรรณนาด้วยภาษามนุษย์ยาวเป็นหน้า ๆ อันนั้นเรียกว่า form-based specification ครับ เป็นวิธีการเขียนที่มนุษย์อ่านแล้วเข้าใจมากกว่า แต่ในการใช้ภาษาเขียนนั้น อาจจะเกิดความกำกวมได้ครับ ประเภทที่คนอ่าน อ่านแล้วงง อ่านแล้วรู้สึกว่ามีหลายความหมายหรือเข้าใจไม่ชัดเจนซึ่งอาจเป็นผลมาจาก Requirement definition และ Requirement specification ที่กำกวมเช่นเดียวกัน ดังนั้นจึงมีผู้ปราดเปรื่องบางท่านคิด Algebraic specification ขึ้นมาซึ่งหน้าตาเป็นดังนี้ ARRAY (Elem: [Undefined -> Elem]) sort ArrayImports INTEGER DescriptionArrays are collections of elements of generic type Elem. They have a lower and upper bound (discovered by the operations First and Last). Individual elements are accessed via their numeric index.Create takes the array bounds as parameters and creates the array, initializing its values to Undefined. Assign creates a new array which is the same as its input with the specified element assigned the given value. Eval reveals the value of a specified element. If an attempt is made to access a value outside the bounds of the array, the value is undefined. OperationsCreate (Integer, Integer) -> ArrayAssign (Array, Integer, Elem) -> Array First (Array) -> Integer Last (Array) -> Integer Eval (Array, Integer) -> Elem AxiomsFirst (Create (x, y)) = xFirst (Assign (a, n, v)) = First (a) Last (Create (x, y)) = y Last (Assign (a, n, v)) = Last

Read More »