วิธีเลื่อนหน้าลงหรือขึ้น Selenium ไดรเวอร์เว็บ

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

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

  • 📜 Javascriptผู้ดำเนินการ: วิ่ง Javaสคริปต์คำสั่งเลื่อนผ่าน Selenium เว็บไดร์เวอร์
  • 🔢 เลื่อนทีละพิกเซล: window.scrollBy(x,y) จะเลื่อนหน้าเว็บไปตามจำนวนพิกเซลที่กำหนด
  • 🎯 เลื่อนไปยังองค์ประกอบ: scrollIntoView() จะเลื่อนจนกว่าองค์ประกอบเป้าหมายจะปรากฏให้เห็นอย่างสมบูรณ์
  • ⬇️ เลื่อนลงไปด้านล่าง: scrollTo ที่ใช้ document.body.scrollHeight ไปถึงขอบหน้ากระดาษแล้ว
  • ↔️ เลื่อนแนวนอน: ฟังก์ชัน scrollIntoView ยังเลื่อนไปด้านข้างเพื่อไปยังองค์ประกอบที่อยู่นอกหน้าจอได้อีกด้วย
  • 🧭 หลักการพื้นฐานของแถบเลื่อน: การเลื่อนหน้าจอจะแสดงองค์ประกอบต่างๆ ที่จะโหลดก็ต่อเมื่อปรากฏในมุมมองเท่านั้น

เลื่อนลงหรือเลื่อนขึ้นหน้าถัดไป Selenium ไดรเวอร์เว็บ

เลื่อนเข้ามา Selenium

หากต้องการเลื่อนโดยใช้ Selenium, คุณสามารถใช้ได้ Javaอินเทอร์เฟซ ScriptExecutor ที่ช่วยในการดำเนินการ Javaวิธีการเขียนสคริปต์ผ่าน Selenium ไดรเวอร์เว็บ

ไวยากรณ์:

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

แถบเลื่อนคืออะไร?

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

Selenium Webdriver ไม่จำเป็นต้องเลื่อนเพื่อดำเนินการในขณะที่จัดการ DOM แต่ในหน้าเว็บบางหน้า องค์ประกอบต่างๆ จะปรากฏให้เห็นเมื่อผู้ใช้เลื่อนดูเท่านั้น ในกรณีเช่นนี้อาจจำเป็นต้องเลื่อน

แถบเลื่อนมีสองประเภท: ตามแนวนอน และ แนวตั้ง แถบเลื่อนตามที่แสดงในภาพหน้าจอด้านล่าง

เลื่อน

เลื่อน

Selenium สคริปต์เพื่อเลื่อนหน้าลง

มาดูการเลื่อนหน้าเว็บลงมาโดยใช้ selenium webdriver ด้วยสถานการณ์ 4 สถานการณ์ต่อไปนี้:

  • สถานการณ์ที่ 1: เพื่อเลื่อนหน้าเว็บลงทีละพิกเซล
  • สถานการณ์ที่ 2: เพื่อเลื่อนหน้าเว็บลงตามการมองเห็นองค์ประกอบ
  • สถานการณ์ที่ 3: เพื่อเลื่อนหน้าเว็บลงที่ด้านล่างของหน้า
  • สถานการณ์ที่ 4: เลื่อนแนวนอนบนหน้าเว็บ

สถานการณ์ที่ 1: เพื่อเลื่อนหน้าเว็บลงทีละพิกเซล

Selenium ต้นฉบับ

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByPixel {

    WebDriver driver;
    @Test
    public void ByPixel() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //To maximize the window. This code may not work with Selenium 3 jars. If script fails you can remove the line below		
        driver.manage().window().maximize();

        // This  will scroll down the page by  1000 pixel vertical		
        js.executeScript("window.scrollBy(0,1000)");
    }
}

ต้นฉบับ Descriptไอออนในโค้ดด้านบน ขั้นแรกเราจะเรียกใช้ฟังก์ชันที่กำหนดไว้ URL ในเบราว์เซอร์ Chrome จากนั้นเลื่อนหน้าเว็บลง 1000 พิกเซลโดยใช้ executeScript Javascript วิธีการ ScrollBy() เลื่อนหน้าเว็บไปยังจำนวนพิกเซลที่ระบุ

ไวยากรณ์ของวิธีการ ScrollBy() คือ:

executeScript("window.scrollBy(x-pixels,y-pixels)");

x-pixels คือตัวเลขที่แกน x โดยจะเลื่อนไปทางซ้ายหากตัวเลขเป็นบวก และจะเลื่อนไปทางขวาหากตัวเลขเป็นลบ .y-pixels คือตัวเลขที่แกน y จะเลื่อนลงหากตัวเลขเป็น บวกและมันจะเลื่อนขึ้นถ้าตัวเลขอยู่ในลบ

ตัวอย่าง:

js.executeScript("window.scrollBy(0,1000)"); //Scroll vertically down by 1000 pixels

การวิเคราะห์ผลลัพธ์ : นี่คือผลลัพธ์เมื่อคุณรันสคริปต์ด้านบน

เลื่อนหน้าเว็บลงตามพิกเซล

สถานการณ์ที่ 2: เพื่อเลื่อนหน้าเว็บลงตามการมองเห็นองค์ประกอบ

Selenium ต้นฉบับ

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByVisibleElement {

    WebDriver driver;
    @Test
    public void ByVisibleElement() {
        System.setProperty("webdriver.chrome.driver", "G://chromedriver.exe");
        driver = new ChromeDriver();
        JavascriptExecutor js = (JavascriptExecutor) driver;

        //Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //Find element by link text and store in variable "Element"        		
        WebElement Element = driver.findElement(By.linkText("Linux"));

        //This will scroll the page till the element is found		
        js.executeScript("arguments[0].scrollIntoView();", Element);
    }
}

ต้นฉบับ Descriptไอออน: ในโค้ดข้างต้น เราจะเปิด URL ที่ระบุในเบราว์เซอร์ Chrome ก่อน จากนั้น เลื่อนหน้าจนกระทั่งองค์ประกอบดังกล่าวปรากฏบนหน้าปัจจุบัน Javascript วิธีการ scrollIntoView() เลื่อนหน้าจนกว่าองค์ประกอบดังกล่าวจะอยู่ในมุมมองแบบเต็ม:

js.executeScript("arguments[0].scrollIntoView();",Element );

“อาร์กิวเมนต์[0]” หมายถึงดัชนีแรกของหน้าที่เริ่มต้นที่ 0

โดยที่ ” องค์ประกอบ ” เป็นตัวระบุตำแหน่งบนหน้าเว็บ

การวิเคราะห์ผลลัพธ์ : นี่คือผลลัพธ์เมื่อคุณรันสคริปต์ด้านบน

 เลื่อนหน้าเว็บลงตามการมองเห็นขององค์ประกอบ

สถานการณ์ที่ 3: เพื่อเลื่อนหน้าเว็บลงที่ด้านล่างของหน้า

Selenium ต้นฉบับ

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByPage {

    WebDriver driver;
    @Test
    public void ByPage() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //This will scroll the web page till end.		
        js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
    }
}

ต้นฉบับ Descriptไอออน : ในโค้ดข้างต้น เราจะเปิด URL ที่ระบุในเบราว์เซอร์ Chrome ก่อน จากนั้นเลื่อนไปที่ด้านล่างของหน้า Javascript วิธีการ scrollTo() เลื่อนไปจนสุดหน้า

js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

“document.body.scrollHeight” ส่งคืนความสูงที่สมบูรณ์ของเนื้อหา เช่น หน้าเว็บ

การวิเคราะห์ผลลัพธ์: นี่คือผลลัพธ์เมื่อคุณรันสคริปต์ด้านบน

เลื่อนหน้าเว็บลงที่ด้านล่างของหน้า

สถานการณ์ที่ 4: เลื่อนแนวนอนบนหน้าเว็บ

Selenium ต้นฉบับ

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class HorizontalScroll {

    WebDriver driver;
    @Test
    public void ScrollHorizontally() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/scrolling.html");

        WebElement Element = driver.findElement(By.linkText("VBScript"));

        //This will scroll the page Horizontally till the element is found		
        js.executeScript("arguments[0].scrollIntoView();", Element);
    }
}

ต้นฉบับ Descriptไอออน : ในโค้ดข้างต้น เราจะเปิด URL ที่ระบุในเบราว์เซอร์ Chrome ก่อน จากนั้น เลื่อนหน้าในแนวนอนจนกระทั่งองค์ประกอบดังกล่าวปรากฏบนหน้าปัจจุบัน Javascript วิธีการ scrollIntoView() เลื่อนหน้าจนกว่าองค์ประกอบดังกล่าวจะอยู่ในมุมมองแบบเต็ม:

js.executeScript("arguments[0].scrollIntoView();",Element );

การวิเคราะห์ผลลัพธ์: นี่คือผลลัพธ์เมื่อคุณรันสคริปต์ด้านบน

เลื่อนแนวนอนบนเว็บเพจ

เรียนรู้เพิ่มเติมเกี่ยวกับ JavaScriptExecutor

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

ใช้ค่าพิกเซลติดลบกับ window.scrollBy ตัวอย่างเช่น js.executeScript กับ window.scrollBy(0,-1000) ค่า y ติดลบจะเลื่อนหน้าเว็บขึ้นด้านบน ซึ่งตรงข้ามกับค่าบวกที่จะเลื่อนลงด้านล่าง

ใช่ คุณสามารถส่งค่า Keys.PAGE_DOWN, Keys.END หรือปุ่มลูกศรไปยังองค์ประกอบ หรือใช้คลาส Actions ได้ Selenium 4. JavascriptExecutor ยังคงเป็นตัวเลือกที่ยืดหยุ่นที่สุด

เบราว์เซอร์จะจับภาพเฉพาะส่วนที่มองเห็นได้เท่านั้น ดังนั้นสคริปต์จึงเลื่อนหน้าเว็บ จับภาพส่วนต่างๆ และนำมาต่อกัน การเลื่อนหน้าจอยังทำให้รูปภาพและเนื้อหาที่โหลดแบบ Lazy Loading ทำงานก่อนที่จะจับภาพหน้าจอด้วย

ใช่แล้ว ผู้ช่วย AI สามารถสร้างโค้ดตัวอย่างสำหรับ scrollBy, scrollIntoView และ scrollTo จากคำสั่งธรรมดา และอธิบายการคำนวณพิกเซลได้ Revตรวจสอบตัวระบุตำแหน่งและเงื่อนไขการรอ ก่อนที่จะเรียกใช้ในชุดทดสอบของคุณ

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

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

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