JavaScriptExecutor ใน Selenium WebDriver (ตัวอย่าง)

⚡ สรุปอย่างชาญฉลาด

JavaScriptExecutor ใน Selenium WebDriver ทำงาน Javaสคริปต์ภายในเบราว์เซอร์เมื่อตัวระบุตำแหน่งใช้งานไม่ได้ Lessเนื้อหาครอบคลุมตัวอย่างการใช้งาน executeScript, executeAsyncScript, การเลื่อนหน้าจอ, การคลิก, การแจ้งเตือน และการป้อนข้อมูลในแบบฟอร์ม

  • ⚙️ แก้ปัญหาเรื่องลิมิต: ข้ามองค์ประกอบที่ซ่อนอยู่และ Javaหน้าเว็บมีเนื้อหาเยอะมาก
  • 🧩 สองวิธี: executeScript ทำงานแบบซิงโครนัส ส่วน executeAsyncScript จะจัดการแบบอะซิงโครนัสผ่���นฟังก์ชัน callback
  • 📜 เลื่อน: เลื่อนหน้าต่าง กระโดดไปยังพิกัด หรือเลื่อนองค์ประกอบให้ปรากฏในมุมมอง
  • 🖱️ การคลิกที่ซ่อนไว้: เรียกใช้ click() บนองค์ประกอบที่ WebDriver เข้าไม่ถึง
  • 📝 การควบคุมแบบฟอร์ม: แทรกค่าและอ่านข้อความจาก��งค์ประกอบที่ซับซ้อน
  • 🤖 ตัวอย่างโค้ด AI: เครื่องมือ AI สร้าง Javaโค้ด ScriptExecutor และการแก้ไขตัวเลือกที่ไม่เสถียร

JavaScriptExecutor ใน Selenium

ความหมายของ JavaScriptExecutor?

JavaScriptExecutor เป็นอินเทอร์เฟซที่ช่วยในการดำเนินการ Javaสคริปต์ผ่าน Selenium เว็บไดรเวอร์ JavaScriptExecutor มีสองวิธีคือ “executescript” และ “executeAsyncScript” เพื่อเรียกใช้ javascript บนหน้าต่างที่เลือกหรือหน้าปัจจุบัน

JavaScriptExecutor

ทำไมเราถึงต้องการ JavaScriptExecutor?

In Selenium Webdriver ตัวระบุตำแหน่งเช่น XPath, CSS ฯลฯ ใช้ในการระบุและดำเนินการกับหน้าเว็บ

ในกรณีที่ตัวระบุตำแหน่งเหล่านี้ใช้งานไม่ได้คุณสามารถใช้ได้ JavaScriptExecutor คุณสามารถใช้ JavaScriptExecutor เพื่อดำเนินการตามที่ต้องการบนองค์ประกอบบนเว็บ

Selenium รองรับ javaScriptExecutor ไม่จำเป็นต้องมีปลั๊กอินหรือส่วนเสริมเพิ่มเติม คุณเพียงแค่ต้องนำเข้า (org.openqa.selenium องค์กร OpenqaJavascriptผู้ปฏิบัติการ) ในสคริปต์ว่าจะใช้ Javaสคริปต์Executor

Javaวิธีการ ScriptExecutor ใน Selenium

รันสคริปต์

วิธีการนี้ดำเนินการ Javaต้นฉบับ ในบริบทของเฟรมหรือหน้าต่างที่เลือกในปัจจุบัน Selenium- สคริปต์ที่ใช้ในวิธีนี้ทำงานในเนื้อความของฟังก์ชันที่ไม่ระบุชื่อ (ฟังก์ชันที่ไม่มีชื่อ) นอกจากนี้เรายังสามารถส่งข้อโต้แย้งที่ซับซ้อนไปให้ได้ด้วย

สคริปต์สามารถคืนค่าได้ ประเภทข้อมูลที่ส่งคืนคือ

  • บูลีน
  • นาน
  • เชือก
  • รายการ
  • Webองค์ประกอบ

Javascriptไวยากรณ์ของผู้บริหาร:

JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript(Script,Arguments);
  • ต้นฉบับ - นี้เป็น Javaสคริปต์ที่ต้องดำเนินการ
  • ข้อโต้แย้ง – มันเป็นข้อโต้แย้งของสคริปต์ มันเป็นทางเลือก

ดำเนินการ AsyncScript

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

วิธีใช้ JavaScriptExecutor ใน Selenium

นี่คือกระบวนการทีละขั้นตอนเกี่ยวกับวิธีการใช้งาน JavaScriptExecutor ใน Selenium:

ขั้นตอน 1) นำเข้าแพ็คเกจ

import org.openqa.selenium.JavascriptExecutor;

ขั้นตอน 2) สร้างข้อมูลอ้างอิง

JavascriptExecutor js = (JavascriptExecutor) driver;

ขั้นตอน 3) โทร Javascriptวิธีการดำเนินการ

js.executeScript(script, args);

ตัวอย่างของการคลิกองค์ประกอบโดยใช้ JavaScriptExecutor ใน Selenium

สำหรับExecuteScript เราจะเห็นสามตัวอย่างที่แตกต่างกันทีละตัวอย่าง

1) ตัวอย่าง: คลิกปุ่มเพื่อเข้าสู่ระบบและสร้างหน้าต่างแจ้งเตือนโดยใช้ Javaสคริปต์Executor

ในสถานการณ์นี้ เราจะใช้ “Guruเว็บไซต์สาธิตขนาด 99 นิ้ว เพื่อแสดงให้เห็นภาพ JavaScriptExecutor ในตัวอย่างนี้

  • ���ปิดเว็บเบราว์เซอร์
  • เปิดเว็บไซต์ https://demo.guru99.com/V4/ และ
  • เข้าสู่ระบบด้วยข้อมูลประจำตัว

คลิกปุ่มเพื่อเข้าสู่ระบบและสร้างหน้าต่างการแจ้งเตือนโดยใช้ JavaScriptExecutor

  • แสดงหน้าต่างแจ้งเตือนเมื่อเข้าสู่ระบบสำเร็จ
import org.openqa.selenium.By;		
import org.openqa.selenium.JavascriptExecutor;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.WebElement;		
import org.openqa.selenium.firefox.FirefoxDriver;		
import org.testng.annotations.Test;		
    		
public class JavaSE_Test {				


    @Test		
    public void Login() 					
    {		
        WebDriver driver= new FirefoxDriver();			
        		
        //Creating the JavascriptExecutor interface object by Type casting		
        JavascriptExecutor js = (JavascriptExecutor)driver;		
        		
        //Launching the Site.		
        driver.get("https://demo.guru99.com/V4/");			
        		
        WebElement button =driver.findElement(By.name("btnLogin"));			
        		
        //Login to Guru99 		
        driver.findElement(By.name("uid")).sendKeys("mngr34926");					
        driver.findElement(By.name("password")).sendKeys("amUpenu");					
        		
        //Perform Click on LOGIN button using JavascriptExecutor		
        js.executeScript("arguments[0].click();", button);
                                
        //To generate Alert window using JavascriptExecutor. Display the alert message 			
        js.executeScript("alert('Welcome to Guru99');");   
    		
    }		
}

Output: เมื่อรันโค้ดสำเร็จ คุณจะสังเกต

  • คลิกที่ปุ่มเข้าสู่ระบบสำเร็จและ
  • หน้าต่างการแจ้งเตือนจะปรากฏขึ้น (ดูภาพด้านล่าง)

คลิกปุ่มเพื่อเข้าสู่ระบบและสร้างหน้าต่างการแจ้งเตือนโดยใช้ JavaScriptExecutor

2) ตัวอย่าง: บันทึกข้อมูลขูดและนำทางไปยังหน้าต่างๆ โดยใช้ Javaสคริปต์Executor

ดำเนินการสคริปต์ selenium ด้านล่าง ในตัวอย่างนี้

  • เปิดตัวเว็บไซต์
  • ดึงรายละเอียดของเว็บไซต์ เช่น URL ของเว็บไซต์ ชื่อเรื่อง และชื่อโดเมนของเว็บไซต์
  • จากนั้นนำทางไปยังหน้าอื่น
import org.openqa.selenium.JavascriptExecutor;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.firefox.FirefoxDriver;		
import org.testng.annotations.Test;		
    		
public class JavaSE_Test {				

    @Test		
    public void Login() 					
    {		
        WebDriver driver= new FirefoxDriver();			
        		
        //Creating the JavascriptExecutor interface object by Type casting		
        JavascriptExecutor js = (JavascriptExecutor)driver;		
        		
        //Launching the Site.		
        driver.get("https://demo.guru99.com/V4/");
			
        //Fetching the Domain Name of the site. Tostring() change object to name.		
        String DomainName = js.executeScript("">return document.domain;").toString();			
        System.out.println("Domain name of the site = "+DomainName);					
          		
        //Fetching the URL of the site. Tostring() change object to name		
        String url = js.executeScript("">return document.URL;").toString();			
        System.out.println("URL of the site = "+url);					
          		
       //Method document.title fetch the Title name of the site. Tostring() change object to name		
       String TitleName = js.executeScript("">return document.title;").toString();			
       System.out.println("Title of the page = "+TitleName);					

        		
      //Navigate to new Page i.e to generate access page. (launch new url)		
      js.executeScript("window.location = 'https://demo.guru99.com/'");			
    }		
}

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

บันทึกข้อมูลการขูดและนำทางไปยังหน้าต่างๆ โดยใช้ JavaScriptExecutor

[TestNG] Running:		
  C:\Users\gauravn\AppData\Local\Temp\testng-eclipse-467151014\testng-customsuite.xml		

log4j:WARN No appenders could be found for logger (org.apache.http.client.protocol.RequestAddCookies).		
log4j:WARN Please initialize the log4j system properly.		
log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.		
Domain name of the site = demo.guru99.com		
URL of the site = https://demo.guru99.com/V4/		
Title of the page = Guru99 Bank Home Page		
PASSED: Login		

===============================================		
    Default test		
    Tests run: 1, Failures: 0, Skips: 0
===============================================

บันทึกข้อมูลการขูดและนำทางไปยังหน้าต่างๆ โดยใช้ JavaScriptExecutor

3) ตัวอย่าง: เลื่อนลงโดยใช้ Javaสคริปต์Executor

ดำเนินการสคริปต์ selenium ด้านล่าง ในตัวอย่างนี้

  • เปิดตัวเว็บไซต์
  • เลื่อนลงทีละ 600 พิกเซล
import org.openqa.selenium.JavascriptExecutor;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.firefox.FirefoxDriver;		
import org.testng.annotations.Test;		
    		
public class JavaSE_Test {				

    @Test		
    public void Login() 					
    {		
        WebDriver driver= new FirefoxDriver();			
        		
        //Creating the JavascriptExecutor interface object by Type casting		
        JavascriptExecutor js = (JavascriptExecutor)driver;		
        		
        //Launching the Site.		
        driver.get("http://moneyboats.com/");			
     
        //Maximize window		
        driver.manage().window().maximize();		
        		
        //Vertical scroll down by 600  pixels		
        js.executeScript("window.scrollBy(0,600)");			
    }		
}

เอาท์พุต: เมื่อรันโค้ดด้านบน มันจะเลื่อนลงมา 600 พิกเซล (ดูภาพด้านล่าง)

เลื่อนลงโดยใช้ JavaScriptExecutor

ตัวอย่างของ executeAsyncScript ใน Selenium

การใช้ executeAsyncScript จะช่วยปรับปรุงประสิทธิภาพการทดสอบของคุณ ทำให้สามารถเขียนการทดสอบได้เหมือนการเขียนโค้ดปกติ

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

ตัวอย่างที่ 1: การดำเนินการสลีปในเบราว์เซอร์ที่กำลังทดสอบ

ในสถานการณ์นี้ เราจะใช้ “Guruเว็บไซต์สาธิตขนาด 99 นิ้วเพื่อแสดงการใช้งาน executeAsyncScript ในตัวอย่างนี้ คุณจะ...

  • เปิดเบราว์เซอร์
  • เปิดเว็บไซต์ https://demo.guru99.com/V4/.
  • แอปพลิเคชันรอเป็นเวลา 5 วินาทีเพื่อดำเนินการต่อไป

ขั้นตอน 1) จับเวลาเริ่มต้นก่อนที่จะรอ 5 วินาที (5000 มิลลิวินาที) โดยใช้เมธอด implementAsyncScript()

ขั้นตอน 2) จากนั้นใช้executeAsyncScript() รอ 5 วินาที

ขั้นตอน 3) จากนั้นรับเวลาปัจจุบัน

ขั้นตอน 4) ตtract (เวลาปัจจุบัน – เวลาเริ่มต้น) = เวลาที่ผ่านไป

ขั้นตอน 5) ตรวจสอบเอาต์พุตที่ควรแสดงมากกว่า 5000 มิลลิวิ���าที

import java.util.concurrent.TimeUnit;		

import org.openqa.selenium.JavascriptExecutor;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.firefox.FirefoxDriver;		
import org.testng.annotations.Test;		
    		
public class JavaSE_Test {				

    @Test		
    public void Login() 					
    {		
        		
        WebDriver driver= new FirefoxDriver();			

        //Creating the JavascriptExecutor interface object by Type casting		
        JavascriptExecutor js = (JavascriptExecutor)driver;		
        		
        //Launching the Site.		
        driver.get("https://demo.guru99.com/V4/");			
     
          //Maximize window		
          driver.manage().window().maximize();		
        		
          //Set the Script Timeout to 20 seconds		
          driver.manage().timeouts().setScriptTimeout(20, TimeUnit.SECONDS);			
             
          //Declare and set the start time		
          long start_time = System.currentTimeMillis();			
                   
          //Call executeAsyncScript() method to wait for 5 seconds		
          js.executeAsyncScript("window.setTimeout(arguments[arguments.length - 1], 5000);");			
          		
         //Get the difference (currentTime - startTime)  of times.		
         System.out.println("Passed time: " + (System.currentTimeMillis() - start_time));					
                    		
    }		
}			

Output: แสดงเวลาที่ผ่านไปมากกว่า 5 วินาที (5000 มิลลิวินาที) ได้สำเร็จ ดังแสดงด้านล่างนี้:

[TestNG] Running:		
C:\Users\gauravn\AppData\Local\Temp\testng-eclipse-387352559\testng-customsuite.xml		
log4j:WARN No appenders could be found for logger (org.apache.http.client.protocol.RequestAddCookies).		
log4j:WARN Please initialize the log4j system properly.		
log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.		
Passed time: 5022		
PASSED: Login		

===============================================		
    Default test		
    Tests run: 1, Failures: 0, Skips: 0		
===============================================

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

เมื่อตัวระบุตำแหน่งล้มเหลว สำหรับองค์ประกอบที่ซ่อนอยู่ การเลื่อน หรือการเข้าถึง DOM ที่ WebDriver ไม่เปิดเผย

ใช่แล้ว Copilot สร้างโค้ดตัวอย่าง แนะนำรูปแบบการเลื่อน และปรับปรุงการทดสอบที่ไม่เสถียร

ใช่. Testim และตัวเลือกการรักษาอัตโนมัติของ Mabl และเพิ่ม Javaสคริปต์สำรอง

executeScript ทำงานแบบซิงโครนัส ส่วน executeAsyncScript ทำงานให้เสร็จผ่าน callback สำหรับโค้ดแบบอะซิงโครนัส

เรียก js.executeScript(“arguments[0].scrollIntoView(true);”, element)

ใช้เฉพาะเมื่อคำสั่ง WebDriver ล้มเหลวหรือจำเป็นต้องจัดการ DOM เท่านั้น

ไม่ มันสามารถแทนที่ window.alert ก่อนที่จะเรียกใช้งานได้ ให้ใช้ Alert API สำหรับไดอะล็อกแบบเนทีฟ

แปลงค่าผลลัพธ์ของ executeScript เช่น String t = (String) js.executeScript(“return document.title;”);

สรุปโพสต์นี้ด้วย: