drag and drop แปลตามตัวว่า ลากและวาง ซึ่งมันก็คือคำสั่งในการลาก Elements (อีลีเมนท์) หรือ องค์ประกอบที่เราระบุลงไป ไปยังอีกที่หนึ่งที่เราระบุลงไป โดยให้เราทำการหา element ที่ต้องการจะลากและที่ต้องการจะนำไปวาง จากนั้นใช้คำสั่งดังกล่าว สมมุติว่าเรามีรายการ element ที่ต้องการจะแสดงบนที่หนึ่ง แต่ element ดังกล่าวอาจไปอยู่ในส่วนอื่นเว็บเบราว์เซอร์ ซึ่งเราก็สามารถที่จะใช้คำสั่งในการลากและวาง element จากนั้นระบุชื่อ element ลงไปตามจุดหมายและปลายทางที่เราต้องการจะลากและวาง และในบทความนี้เราจะมาพูดถึงการใช้คำสั่ง drag and drop เพื่อลากและ element ที่ต้องการด้วยซิลิเนี่ยมบนภาษาไพทอนกัน
การลากและวาง element ที่ต้องการแสดงผล
ในโมดูล selenium (ซิลิเนียม) ก็จะมีเมธอดคำสั่งหลายๆอย่าง เช่น การคลิ๊ก การแคปภาพหน้าจอ การรีเฟรชหน้าเว็บเพจ การเลื่อนหน้าจอ และคำสั่งอื่นๆอีกมากมาย ซึ่งคำสั่งต่างๆ ก็จะจำเป็นต่อการใช้งานในการเขียนเทสเว็บอย่างมาก เราจึงจำเป็นต้องรู้คำสั่งต่างๆ เพื่อความสะดวกสบายในการเขียน แต่ในการลากและวาง Element นั้น เราจะต้องทำการอิมพอร์ต ActionChains เข้ามาช่วยในการทำงาน ซึ่งมันคือตัวช่วยในการเคลื่อนไหวของเมาส์ การทำงานของปุ่มเมาส์ หรือการกดแป้นพิมพ์ จากนั้นจึงใช้ใช้เมธอด drag_and_drop() ในการดำเนินการบน Selenium
Syntax
ActionChains(driver).drag_and_drop(source, target).perform()
วิธีในการใช้งาน
ขั้นตอนแรก เราต้องทำการอิมพอร์ตโมดูลต่างๆ เข้ามาใช้งานก่อน
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
จากนั้นให้ทำการกำหนด path และกำหนดเว็บที่ต้องการเปิด
driver = webdriver.Firefox(path)
driver.get(url)
เมื่อทำการกำหนด path และเปิดหน้าเว็บแล้ว ให้เราทำการหาชื่อของ element ที่ต้องการ โดยสามารถกดดูได้จาก F12
source = driver.find_element_by_class_name("...") #ชื่อของ element
target = driver.find_element_by_class_name("...") #ชื่อของ element
ActionChains(driver).drag_and_drop(source, target).perform()
ตัวอย่างการใช้งาน
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Firefox()
driver.get("https://www.google.com/")
source = driver.find_element_by_link_text("Gmail")
target = driver.find_element_by_class_name("a4bIc")
ActionChains(driver).drag_and_drop(source, target).perform()
ผลลัพธ์
ผลลัพธ์การลากและวาง
ผลลัพธ์ที่ได้จากโค้ดตัวอย่าง เมื่อเรากดรันก็จะทำการเปิดหน้าเว็บนั้นขึ้นมา และทำการหา element ที่เราได้ทำการระบุเอาไว้ นั่นก็คือ 'Gmail' และ 'a4bIc' หรือช่องค้นหา จากนั้นเมื่อใช้คำสั่ง drag and drop ก็จะทำการลาก element Gmail ไปไว้ในช่องค้นหา เพียงเท่านี้เราก็สามารถใช้คำสั่งดังกล่าวได้แล้ว หากนำไปประยุกต์ใช้จะต้องเกิดประโยชน์อย่างแน่นอน
เพิ่มเติมเกี่ยวกับคำสั่งใน Selenium
แนะนำคำสั่ง .click (คลิ๊ก) ของโมดูล Selenium (ซิลิเนียม) ในภาษาไพธอน
แนะนำคำสั่ง .send_key (เซนด์คีย์) ของโมดูล Selenium (ซิลิเนียม) ในภาษาไพธอน
แนะนำคำสั่ง .clear (เคลียร์) ของโมดูล selenium (ซิลิเนียม) ในภาษาไพทอน
การใช้คำสั่ง switch to alert จัดการกับ alert box ด้วย selenium (ซิลิเนียม)
การใช้คำสั่ง move_to_element ย้ายหา element ที่ต้องการดำเนินการต่อด้วย Selenium (ซิลิเนียม)