Sikuli กวดวิชาสำหรับ Selenium อัตโนมัติ

ซิคูลีอยู่ในอะไร Selenium?

ซิคูลี เป็นเครื่องมือทดสอบอัตโนมัติแบบโอเพ่นซอร์สที่ใช้ GUI เป็นหลัก โดยส่วนใหญ่ใช้สำหรับการโต้ตอบกับองค์ประกอบของหน้าเว็บและการจัดการหน้าต่างป๊อปอัป Sikuli ใช้เทคนิค "การจดจำภาพ" และ "การควบคุม GUI" เพื่อโต้ตอบกับองค์ประกอบของหน้าเว็บและหน้าต่างป๊อปอัป ใน Sikuli องค์ประกอบเว็บทั้งหมดจะถูกถ่ายเป็นรูปภาพและจัดเก็บไว้ภายในโครงการ

⚠️ หมายเหตุการตั้งชื่อ: โครงการนี้ยังคงได้รับการดูแลรักษามาจนถึงปัจจุบัน SikuliXเผยแพร่บน Maven Central ในชื่อ com.sikulix:sikulixapiชื่อคลาสที่ระบุไว้ด้านล่างยังคงไม่เปลี่ยนแปลง

วิธีใช้ Sikuli ร่วมกับ Selenium ไดรเวอร์เว็บ

Sikuli สามารถผสานรวมเข้ากับ... Selenium การใช้งาน WebDriver โดยใช้ไฟล์ JAR ของ Sikuli ตามสองขั้นตอนด้านล่าง

ขั้นตอนที่ 1) ดาวน์โหลด ไฟล์ JAR ของ Sikuli จากด้านล่าง URLและเช่นtracคัดลอกเนื้อหาจากไฟล์ ZIP ไปยังโฟลเดอร์

https://mvnrepository.com/artifact/com.sikulix/sikulixapi/2.0.5

ขั้นตอน 2) สร้างโปรเจ็กต์ JAVA ใหม่ใน Eclipse และเพิ่มไฟล์ JAR ลงใน Build Path พร้อมกับไฟล์ JAR ของ Selenium โดยคลิกขวาที่โปรเจ็กต์ -> Build Path -> Configure Build Path ดังแสดงในภาพด้านล่าง

เมื่อคุณเพิ่มไฟล์ JAR ลงใน build path ของโปรเจ็กต์แล้ว คุณสามารถใช้คลาสที่ Sikuli จัดเตรียมไว้ได้ หรืออีกทางเลือกหนึ่ง โปรเจ็กต์ Maven สามารถประกาศ artifact เดียวกันนี้เป็น dependency แทนได้

คลาสสกรีนใน Sikuli

คลาส Screen เป็นคลาสพื้นฐานสำหรับเมธอดทั้งหมดที่ Sikuli มีให้ คลาส Screen ประกอบด้วยเมธอดที่กำหนดไว้ล่วงหน้าสำหรับการดำเนินการทั่วไปทั้งหมดบนองค์ประกอบบนหน้าจอ เช่น การคลิก การดับเบิ้ลคลิก การป้อนข้อมูลลงในกล่องข้อความ การวางเมาส์เหนือองค์ประกอบ เป็นต้น ด้านล่างนี้คือรายการเมธอดที่ใช้กันทั่วไปซึ่งมีอยู่ในคลาส Screen

ชั้นเรียนรูปแบบใน Sikuli

ในขณะที่คลาส Screen ทำงานกับชื่อไฟล์ภาพธรรมดา คลาส Pattern จะใช้เพื่อเชื่อมโยงไฟล์ภาพกับคุณลักษณะเพิ่มเติมเพื่อระบุองค์ประกอบนั้นได้อย่างเฉพาะเจาะจง โดยรับพาธของไฟล์ภาพเป็นพารามิเตอร์

Pattern p = new Pattern(“Path of image”);

ต่อไปนี้เป็นวิธีการที่ใช้กันทั่วไปที่สุดของคลาส Pattern

Code ตัวอย่างการอัปโหลดไฟล์โดยใช้ Sikuli

โค้ดด้านล่างนี้อธิบายการใช้งาน Sikuli สำหรับการอัปโหลดไฟล์ใน Chrome

package com.sikuli.demo;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.sikuli.script.FindFailed;
import org.sikuli.script.Pattern;
import org.sikuli.script.Screen;
import org.openqa.selenium.chrome.ChromeDriver;

public class SikuliDemo {

    public static void main(String[] args) throws FindFailed {

        System.setProperty("webdriver.chrome.driver", "D:\\chromedriver.exe");
        String filepath = "D:\\Guru99Demo\\Files\\";
        String inputFilePath = "D:\\Guru99Demo\\Files\\";
        Screen s = new Screen();
        Pattern fileInputTextBox = new Pattern(filepath + "FileTextBox.PNG");
        Pattern openButton = new Pattern(filepath + "OpenButton.PNG");
        WebDriver driver;

        // Open Chrome browser    
        driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/image_upload/index.php");

        // Click on Browse button and handle windows pop up using Sikuli
        driver.findElement(By.xpath(".//*[@id='photoimg']")).click();
        s.wait(fileInputTextBox, 20);
        s.type(fileInputTextBox, inputFilePath + "Test.docx");
        s.click(openButton);

        // Close the browser
        driver.close();
    }
}

Code คำอธิบาย

ขั้นตอน 1) คำสั่งแรกเกี่ยวข้องกับการตั้งค่าเส้นทางปฏิบัติการของไดรเวอร์สำหรับ Chrome

System.setProperty("webdriver.chrome.driver", "D:\\ chromedriver.exe");

⚠️ หมายเหตุเกี่ยวกับเวอร์ชัน: Selenium 4 แก้ไขไบนารีไดรเวอร์ผ่าน Selenium ผู้จัดการครับ บรรทัดนี้เป็นตัวเลือกแล้วครับ คงไว้ตามที่ต้นฉบับเขียนไว้ครับ

ขั้นตอน 2) ใช้เครื่องมือ screengrab เช่น Snipping Tool การจับภาพหน้าจอของหน้าต่างป๊อปอัป 'FileTextBoxและปุ่ม 'เปิด' ดังภาพด้านล่าง

ภาพหน้าจอของคุณควรมีลักษณะดังนี้:

รูปภาพสำหรับกล่องข้อความอินพุตไฟล์ Windows และปุ่มเปิดจะถูกเก็บไว้ใน 'FileTextBox.PNG' และ 'OpenButton.PNG'

ตัวอย่าง: หากคุณต้องการให้การเปิด Notepad เป็นแบบอัตโนมัติ คุณจะต้องจัดเก็บภาพไอคอนเดสก์ท็อปสำหรับ Notepad ลงในไฟล์ PNG และคลิกที่ไฟล์นั้น

ในกรณีของเรา ระบบจะจดจำช่องป้อนข้อความไฟล์และปุ่มเปิด Windows ป๊อปอัปที่ใช้รูปภาพที่เก็บไว้ หากความละเอียดของหน้าจอเปลี่ยนไปจากการจับภาพเป็นการดำเนินการสคริปต์ทดสอบ พฤติกรรมของ Sikuli จะไม่สอดคล้องกัน ดังนั้นขอแนะนำให้เรียกใช้สคริปต์ทดสอบในความละเอียดเดียวกันกับที่จับภาพ การเปลี่ยนแปลงขนาดพิกเซลของรูปภาพจะส่งผลให้ Sikuli แสดงข้อยกเว้น FindFailed

ขั้นตอน 3) คำสั่งถัดไปรวมถึงการสร้างออบเจ็กต์สำหรับคลาส Screen และ Pattern สร้างวัตถุหน้าจอใหม่ กำหนดเส้นทางของไฟล์ที่คุณต้องการอัปโหลดเป็นพารามิเตอร์ไปยังออบเจ็กต์ Pattern

Screen s = new Screen();
Pattern fileInputTextBox = new Pattern(filepath + "FileTextBox.PNG");
Pattern openButton = new Pattern(filepath + "OpenButton.PNG");

ขั้นตอน 4) ข้อความด้านล่างนี้เกี่ยวข้องกับการเปิดเบราว์เซอร์ Chrome ด้วย URL ตัวอย่างแอปพลิเคชันอัปโหลดไฟล์: https://demo.guru99.com/test/image_upload/index.php

driver = new ChromeDriver();
driver.get("https://demo.guru99.com/test/image_upload/index.php");

ขั้นตอน 5) คลิกปุ่มเลือกไฟล์โดยใช้คำสั่งด้านล่าง

driver.findElement(By.xpath(".//*[@id='photoimg']")).click();

ขั้นตอน 6) รอให้หน้าต่างป๊อปอัปปรากฏขึ้น วิธีการรอใช้เพื่อจัดการกับความล่าช้าที่เกี่ยวข้องกับการเปิดหน้าต่างป๊อปอัปหลังจากคลิกปุ่มเรียกดู

s.wait(fileInputTextBox, 20);

ขั้นตอน 7) พิมพ์เส้นทางไฟล์ลงในกล่องข้อความไฟล์อินพุตและคลิกปุ่มเปิด

s.type(fileInputTextBox, inputFilePath + "Test.docx");
s.click(openButton);

ขั้นตอน 8) ปิดเบราว์เซอร์

driver.close();

เอาท์พุต

เริ่มแรกสคริปต์จะเปิดเบราว์เซอร์ Chrome

คลิกที่ปุ่ม 'เลือกไฟล์' หน้าจอป๊อปอัปไฟล์ของ Windows จะปรากฏขึ้น ป้อนข้อมูลลงในกล่องข้อความอินพุตไฟล์ แล้วคลิกปุ่ม 'เปิด'

หน้าจอด้านล่างจะปรากฏขึ้นเมื่อการอัพโหลดไฟล์เสร็จสิ้นและปิดเบราว์เซอร์

เนื่องจากการจับคู่ขึ้นอยู่กับจำนวนพิกเซล จึงต้องบันทึกภาพอ้างอิงใหม่ทุกครั้งที่มีการปรับเปลี่ยนดีไซน์ของอินเทอร์เฟซ ความเปราะบางนี้เองที่ทำให้ทีมงานเลือกใช้ Sikuli สำหรับป๊อปอัพเท่านั้น การจัดการไฟล์ WebDriver แบบธรรมดา ไม่สามารถเข้าถึงได้

คำถามที่พบบ่อย