Selenium 101: คู่มือเริ่มต้นสำหรับมือใหม่

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

Selenium คือเครื่องมือสำหรับการทดสอบเว็บอัตโนมัติที่เรียกได้ว่าฮิตมาก ๆ เชื่อว่าหลาย ๆ คนคงเคยได้ยินชื่อมาบ่อยแต่อาจจะยังไม่เคยใช้มาก่อน เราสามารถควบคุมเบราว์เซอร์ต่าง ๆ เพื่อทำการทดสอบเว็บแอปพลิเคชัน ไม่ว่าจะเป็น Chrome, Firefox, Edge หรือเบราว์เซอร์อื่น ๆ ก็สามารถใช้ Selenium ได้หมด

เว็บตัวอย่าง

สำหรับการ demo ในครั้งแรกผมจะทำเว็บง่าย ๆ ด้วย HTML CSS และ JavaScript แบบง่ายด้วยโค้ดนี้

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>สั่งซื้อคอร์สเรียน</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        text-align: center;
      }
      .hidden {
        display: none;
      }
      form {
        max-width: 400px;
        margin: 0 auto;
        text-align: left;
      }
      input,
      select {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
      }
      button {
        background-color: #4caf50;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="queue-page">
      <h1>กรุณารอสักครู่</h1>
      <p>สินค้ากำลังจะปล่อยในอีก 3 วินาที...</p>
    </div>

    <div id="order-form" class="hidden">
      <h1>สั่งซื้อคอร์สเรียน</h1>
      <form id="course-form">
        <label for="name">ชื่อ:</label>
        <input type="text" id="name" required />

        <label for="phone">เบอร์โทรศัพท์:</label>
        <input type="tel" id="phone" required />

        <label for="address">ที่อยู่จัดส่ง:</label>
        <textarea id="address" required></textarea>

        <label for="quantity">จำนวน:</label>
        <input type="number" id="quantity" min="1" required />

        <label for="level">ระดับพื้นฐานที่มี:</label>
        <select id="level" required>
          <option value="mild">น้อย</option>
          <option value="medium">ปานกลาง</option>
          <option value="high">มาก</option>
        </select>

        <button type="submit">สั่งซื้อ</button>
      </form>
    </div>

    <div id="summary-page" class="hidden">
      <h1>สรุปการสั่งซื้อ</h1>
      <div id="order-summary"></div>
      <h2>ช่องทางชำระเงิน</h2>
      <p>โอนเงินไปที่บัญชี: XXX-X-XXXXX-X</p>
      <p>ธนาคาร: ธนาคาร ABC</p>
      <p>ชื่อบัญชี: คอร์สดี ๆ ที่ BorntoDev</p>
    </div>

    <script>
      // หน้ารอคิว
      setTimeout(() => {
        document.getElementById("queue-page").classList.add("hidden");
        document.getElementById("order-form").classList.remove("hidden");
      }, 3000);

      // จัดการการส่งฟอร์ม
      document
        .getElementById("course-form")
        .addEventListener("submit", function (e) {
          e.preventDefault();

          const name = document.getElementById("name").value;
          const phone = document.getElementById("phone").value;
          const address = document.getElementById("address").value;
          const quantity = document.getElementById("quantity").value;
          const level = document.getElementById("level").value;

          const summary = `
                <p><strong>ชื่อ:</strong> ${name}</p>
                <p><strong>เบอร์โทรศัพท์:</strong> ${phone}</p>
                <p><strong>ที่อยู่จัดส่ง:</strong> ${address}</p>
                <p><strong>จำนวน:</strong> ${quantity}</p>
                <p><strong>ระดับพื้นฐาน:</strong> ${level}</p>
                <p><strong>ราคารวม:</strong> ${quantity * 50} บาท</p>
            `;

          document.getElementById("order-summary").innerHTML = summary;
          document.getElementById("order-form").classList.add("hidden");
          document.getElementById("summary-page").classList.remove("hidden");
        });
    </script>
  </body>
</html>

JavaScript

สำหรับส่วนนี้จะเป็นหน้าเว็บแบบง่าย ๆ ที่มี Flow คือรอสักครู่ แล้วหน้าเว็บให้กรอกข้อมูลมันแสดงแล้วเราก็ทำการให้เจ้า Selenium ที่เราเขียนทำงานกับหน้าเว็บแบบอัตโนมัติ

โดยก่อนที่เราจะใช้ Selenium เราจะต้องทำการติดตั้งก่อนโดยการใช้คำสั่ง

pip install selenium

ต่อมาเราสามารถทำการตั้งค่าและเปิดเบราว์เซอร์ โดยเราจะทำการเรียกใช้งาน เบราว์เซอร์ Edge และกำหนด options เพิ่มเติมให้ไม่แสดง log บางส่วน

from selenium import webdriver
from selenium.webdriver.edge.options import Options as EdgeOptions

options = EdgeOptions()
options.add_experimental_option('excludeSwitches', ['enable-logging'])
driver = webdriver.Edge(options=options)

ต่อมาเราก็จะทำการเปิดไฟล์ HTML หรือ URL ที่เราต้องการทดสอบ

driver.get("file:///C:/Users/Aeff/content/index.html")

การรอให้หน้าเว็บโหลดเสร็จ

driver.implicitly_wait(10)

หากเว็บที่เราต้องที่จะทดสอบ ต้องการรอให้หน้าเว็บเปลี่ยนแปลงตามเงื่อนไขที่กำหนด เหมือนการที่รอบัตรคอนเปิดตามเวลา เช่น รอให้หน้ารอคิวหายไป และหน้าสั่งซื้อแสดงขึ้นมา สามารถใช้ invisibility_of_element_located ในการเช็คได้


WebDriverWait(driver, 10).until(
    EC.invisibility_of_element_located((By.ID, "queue-page"))
)
WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.ID, "order-form"))
)

อย่างโค้ดด้านบนจะรอให้ element ที่มี ID “queue-page” หายไป และ element ที่มี ID เป็น”order-form” แสดงขึ้นมาก่อน

ต่อมาจะเป็นส่วนที่สำคัญ คือ การกรอกข้อมูลในฟอร์ม เราสามารถใช้คำสั่งที่เอาไว้ค้นหา element โดยใช้คำสั่ง find_element แล้วเลือกหาจาก ID หรือ ชื่อคลาส แล้วเราก็สามารถที่จะใช้ method ที่เอาไว้ควบคุม element อย่างพิมพ์ข้อความลงไป ในช่องที่เป็น ID ตามที่เรารู้มา แล้วใช้ send_keys เพื่อสั่งกรอกข้อมูลลงไป ถ้าไม่หน่วงเวลา มันก็จะกรอกไปไวเหนือแสง 😂

driver.find_element(By.ID, "name").send_keys("ทดสอบ ระบบ")
driver.find_element(By.ID, "phone").send_keys("0812345678")
driver.find_element(By.ID, "address").send_keys("123 ถนนทดสอบ, เมืองทดสอบ, 12345")
driver.find_element(By.ID, "quantity").send_keys("2")

หากเป็นตัวเลือกที่เป็น dropdown เราก็ไม่จำเป็นต้องจิ้มเลือก สามารถใช้ send_keys ใส่ไปตรง ๆ ได้เลย

level = driver.find_element(By.ID, "level")
level.send_keys("ปานกลาง")

สุดท้ายก็จะเป็นปุ่ม Submit ใช่มั้ยครับ การกดปุ่ม Submit เนี่ยทำได้หลายท่า แต่ในตัวอย่างนี้ผมมี Submit ปุ่มเดียวจะใช้เป็นท่านี้

driver.find_element(By.CSS_SELECTOR, "button[type='submit']").click()

เสร็จแล้วหากหน้าเว็บหน้าสรุปเราอาจจะให้มีการสั่งรออีกครั้ง

WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.ID, "summary-page"))
)

ก่อนปิดโปรแกรมเราอาจจะเขียนเช็คข้อมูลในหน้าสรุปสักหน่อย โดยการใช้ find_element ตามด้วยของที่เราต้องการอย่าง ID แล้วสามารถใช้ .text เพื่อดึงค่าออกมาดูได้

summary = driver.find_element(By.ID, "order-summary").text
print("สรุปการสั่งซื้อ:")
print(summary)

assert "ทดสอบ ระบบ" in summary
assert "0812345678" in summary
assert "123 ถนนทดสอบ, เมืองทดสอบ, 12345" in summary
assert "จำนวน: 2" in summary
assert "ระดับความเผ็ด: medium" in summary
assert "ราคารวม: 100 บาท" in summary

สุดท้ายก็จะเป็นส่วนของการสั่งปิดเบราวเซอร์

driver.quit()

หากเราเขียนลองทำตามมาแล้วก็จะได้โค้ดเต็ม ๆ ในไฟล์ app.py หน้าตาแบบนี้

from selenium import webdriver
from selenium.webdriver.edge.options import Options as EdgeOptions
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

options = EdgeOptions()
options.add_experimental_option('excludeSwitches', ['enable-logging'])
driver = webdriver.Edge(options=options)

# เปิดไฟล์ index.html ด้วย browser
driver.get("file:///C:/Users/Aeff/content/test/index.html")


# รอจนกว่าหน้าเว็บโหลดเสร็จ
driver.implicitly_wait(30)

# รอให้หน้ารอคิวหายไป และหน้าสั่งซื้อปรากฏ
WebDriverWait(driver, 10).until(
    EC.invisibility_of_element_located((By.ID, "queue-page"))
)
WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.ID, "order-form"))
)

# กรอกข้อมูลในฟอร์ม
driver.find_element(By.ID, "name").send_keys("ทดสอบ ระบบ")
driver.find_element(By.ID, "phone").send_keys("0812345678")
driver.find_element(By.ID, "address").send_keys("123 ถนนทดสอบ, เมืองทดสอบ, 12345")
driver.find_element(By.ID, "quantity").send_keys("2")

# เลือกระดับ
level = driver.find_element(By.ID, "level")
level.send_keys("ปานกลาง")

# ส่งฟอร์ม
driver.find_element(By.CSS_SELECTOR, "button[type='submit']").click()

# รอให้หน้าสรุปปรากฏ
WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.ID, "summary-page"))
)

# ตรวจสอบข้อมูลในหน้าสรุป
summary = driver.find_element(By.ID, "order-summary").text
print("สรุปการสั่งซื้อ:")
print(summary)

# ตรวจสอบว่าข้อมูลถูกต้อง
assert "ทดสอบ ระบบ" in summary
assert "0812345678" in summary
assert "123 ถนนทดสอบ, เมืองทดสอบ, 12345" in summary
assert "จำนวน: 2" in summary
assert "ระดับ: medium" in summary
assert "ราคารวม: 100 บาท" in summary

print("การทดสอบเสร็จสมบูรณ์")

# ปิด browser
driver.quit()

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

หากใครอยากรู้ว่ามันมีคำสั่งอะไรอีกบ้าง แอดแนะนำเว็บนี้เลย https://codoid.com/selenium-testing/a-complete-list-of-selenium-commands-with-examples/#Windows_Commands!

เว็บตัวอย่าง

เลือกเรียนรู้

สนับสนุนพวกเรา

สำหรับภาคการศึกษา

ศูนย์ให้ความช่วยเหลือ

บริการจากเรา

เกี่ยวกับ BorntoDev

ได้รับการรับรองจาก

Selenium 101: คู่มือเริ่มต้นสำหรับมือใหม่

Selenium คืออะไร?

เว็บตัวอย่าง

Related Posts

Circular Dependencies เมื่อโค้ดของเรา Import กันเป็นวงกลม

Deploy ไวแบบติดจรวดด้วย PM2

Comment โค้ดอย่างไรให้ได้ประสิทธิภาพ

Author Sirasit Boonklang

เลือกเรียนรู้

สนับสนุนพวกเรา

สำหรับภาคการศึกษา

ศูนย์ให้ความช่วยเหลือ

บริการจากเรา

เกี่ยวกับ BorntoDev

ได้รับการรับรองจาก