จองตั๋วคอนเสิร์ตอัตโนมัติ !! ภาคเสริม ฉบับคนโค้ดง่อยๆ 🤪

NOTE: บล็อกนี้วัตถุประสงค์เขียนขึ้นเพื่ออธิบายการทำงานของ Python3 / Selenium / chromedriver / code editor การจองบัตรคอนเสิร์ตเป็นเพียงแค่ตัวอย่างการใช้งานเท่านั้น

Selenium คือ อะไรนะ 🧐

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

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

ในที่นี้เราจะใช้ WebDriver อ่านต่อได้ ➡️ ไปจ้า

โค้ดตัวอย่าง ↓

nongharunana/reserving_concert_automation

เตรียมพร้อมก่อนโค้ด

วิธีติดตั้ง ⬅️ ไปจ้า

• Selenium
• Python3
• Chromedriver
• editor

สิ่งที่เราต้องรู้

• json
• Locator หรือ การอ้างตำแหน่งของ element นั้นๆ ใน html

ว่าแต่ json คืออะไร ใครที่รู้แล้ว ข้ามไปจ้า

JSON ย่อมาจาก JavaScript Object Notation ใช้ในการสร้าง object ขึ้นมาเพื่อส่งข้อมูลระหว่าง application หรือ Applications Program Interface (API) โดย format จะมีรูปแบบเป็น คู่ Key-Value หรือเป็นแบบ Array และสามารถนำมาใช้แทน XML format ได้ อ่านต่อ

{

“key1” : “value1”,

“key2” : “value2”

}

Locator

การอ้างถึง Element ต่างๆ

1. คลิกขวา เลือก inspect หรือ F12 (mac fn+F12)

2.การLocator แบ่งได้หลายแบบ

• id
• name
• class

• xpath
• partial link
• อื่นๆ

xpath

ฉบับคนขี้เกียจ

1. หลังจากเปิด inspectขึ้นมาแล้ว ให้กดที่ปุ่มเล็กที่ซ้ายสุดบนสุด ของหน้าต่างinspect
2. เลือกelement ที่เราต้องการLocator ไป แล้วหน้าต่างinspectจะลิ้งไปหาElement ที่เราต้องการ

3.คลิกขวาที่Elementนั้น เลือก Copy -> Copy XPath

4.นำไปวาง Ctrl+v (mac command+v)

ผลลัพธ์ xpath=/html/body/div[1]/main/section[2]/div/div[2]/div/div[4]/div/div[1]/a[1]

อีกวิธี

1. หาจุดที่มันคลุมElementอันที่เราต้องการ แต่ไม่จำเป็นคลุมทั้งหน้า

2.ไล่ไปจนถึงจุดที่เราต้องการ

3.xpath = //tag เริ่ม [@attribute]/tagต่อไป[ลำดับ]/…/tagสุดท้าย[ลำดับ]

จากรูป tag เริ่ม คือ div class =event-container ต่อด้วย div[4] ต่อด้วย div[1] ต่อด้วย div[1] และ a[1]

ผลลัพธ์

xpath= //div[@class=”event-container”]/div[4]/div[1]/div[1]/a[1]

เมื่อเรารู้Locator แล้ว ก็ไปโค้ดกันเล้ยยยยย

Part แรก

1. import เอาlibraryต่างๆมาใข้
2. ตั้งค่าให้chrome หลังจากจบโปรแกรมpythonแล้ว ไม่ให้ปิดหน้าต่างตามโปรแกรมไปด้วย และ ตัวแปร driver คือตัวที่ควบคุม chrome webbrowser

3.และ4. โหลดไฟล์และดึงค่าจากjsonมาใส่ในตัวแปรต่างๆ

Part 2

5.ให้driver ไปที่หน้า url ที่เราใส่ไว้

Part 3

6.กดที่ปุ่ม login จากนั้นหยุดรอ 1s และเริ่มใส่ username และ pasword จากนั้น กดปุ่ม เข้าสู่ระบบ

รูปอ้างอิงข้อ 6

7.ดึงurl ณ ตอนนี้ เก็บไว้เผื่อกรณี กดแล้วค้าง ไปยอมไปหน้าอื่น และวนลูปคลิกลิ้ง concert ที่ต้องการ โดย partial link จะหา ลิ้งที่มีคำที่เกี่ยวข้อง แทนการกดที่ชื่อโดยตรงแบบ //a[text()=’TRINITY PREMIERE SHOWCASE
STAGE 1 — I O U : I’M IN LOVE WITH YOU’]

เนื่องจากใน Thaiticket มีบางคอนเสิร์ตมี <br> คั่น ทำให้ยากที่จะลบ white space ออก

ในตัวอย่าง เราใส่ TRINITY โดยชื่อเต็มคือ TRINITY PREMIERE SHOWCASE
STAGE 1 — I O U : I’M IN LOVE WITH YOU

Part 3

8.เลือกรอบการแสดง โดยหาว่ามี Element นี้ซ้ำกันกี่แถว และให้ไปเลือก รอบที่เลือกไว้จากไฟล์json

9.เป็นการดักบัค ที่บางครั้งหลังกดรอบเข้ามาแล้ว รอบที่เลือกยังไม่ถูกเลือก เลยให้เลือกอีกที

Part 4

10.หาว่าคอนเสิร์ตนี้มีโซนอะไรบ้าง และเก็บไว้ในตัวแปร zone_list เพื่อนำไปใช้ฟังชั่นต่อๆไป

11.เนื่องจากในthaiticket ให้โซนมาเป็นภาพ เลยทำ ฟังก์ชั่น find เพื่อนำลิ้งไปหาว่าอันไหนคือโซนที่เราเลือก

12.เราเคยจองคอนเสิร์ตกดปุ่มแล้วมันไม่ไปไหน กดจนเมื่อย ก็เลยทำloopดักไว้ ถ้าurlไม่เปลี่ยนก็กดต่อไป

Part 5

13.ใช้ loop 2ชั้น เพื่อวิ่งดูว่า นะindex ที่ชี้อยู่ text ที่getออก เป็น “ ”ช่องว่างมั้ย ถ้าเป็นแสดงไม่ว่าง ถ้าไม่ใช่ก็เช็คอีกเป็นที่ๆที่ไม่ใช่ที่นั่งหรือเปล่าถ้าจริง ก็ให้คลิก และนับเพิ่มเพื่อ ถ้าได้ที่นั่งครบแล้ว ให้ออกจาก loop แล้ว ไปหน้าต่อไปเลย

Part 6

14.กรณีที่โซนเราเลือกไม่มีที่นั่งว่าง ถ้าจะไปrunโปรแกรมใหม่อีกรอบน่าจะไม่ทัน เลยทำการ กดย้อนกลับไป เลือกหาโซนที่มีที่นั่งว่าง และกลับไปเลือกที่นั่งใหม่

แต่ถ้าดูทุกโซนแล้วไม่ว่าง นั่นแปลว่า คุณนก โปรแรกมจะจบในทันที

Part สุดท้ายยยยยยย

15.หลังจากได้ที่นั่งแล้ว (อย่างน้อย1ที่) จะไปหน้าชำระเงิน

สรุป

Selenium ไม่จำเป็นที่จะต้องใช้กับการทำ test เท่านั้น เรายังสามารถนำไปประยุกต์ใช้ในชีวิตประจำวันได้ตามความสะดวกและถนัดของแต่ละคน

ดูโค้ดเต็มๆได้ ↓

nongharunana/reserving_concert_automation

สุดท้ายหากมีข้อผิดพลาดอะไร สามารถแจ้งและติชมได้ตามสบาย อย่าหยาบคายเป็นพอ ใจเราบอบบาง 🥺