איך להשתמש ב-JavaScriptExecutor ב-Selenium

סלניום הוא סוויטת כלים וספריות שקוראות אותך לפעול עם דפדפנים כדי לבצע פעולות שונות כמו שליחת טקסט, לחיצה על כפתור, בחירת תפריטים נפתחים וכו'.

עם זאת, יש תרחישים בהם הפקודות האמיתיות של Selenium WebDriver לא עובדות כפי שצפוי, מכיוון שסלניום אינו יכול להתקשר ישירות עם WebElements. זהו המקום בו יוצא JavaScriptExecutor לפועל.

בבלוג זה, אנו מדברים על JavaScriptExecutor בסלניום ואיך להתחיל עם מקרי שימוש ודוגמאות מעשיות.

מהו JavaScriptExecutor בסלניום?

JavaScriptExecutor הוא ממשק המספק על ידי סלניום שעוזר בביצוע פקודות JavaScript. ממשק זה מספק שיטות להרצת קוד JavaScript על החלון שנבחר או על עמוד האינטרנט הנוכחי. הוא זמין עבור כל חבילות השפות שתומכות בסלניום.

ה-JavaScriptExecutor בסלניום ניתן לשימוש ישירות על ידי יבוא החבילה הבאה בתוך סקריפטי בדיקות האוטומציה:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor בסלניום מספק שתי שיטות להתקשר עם WebElements:

• executeScript() – שיטה זו מבצעת קוד JavaScript בהקשר של החלון או המסגרת שנבחרה כרגע בסלניום. הקוד יורץ כגוף של פונקציה אנונימית.
• executeAsyncScript() – פעולה זו מבצעת קטע קוד JavaScript אסינכרוני בהקשר של החלון או המסגרת שנבחרו כעת ב־Selenium. הסקריפט יופעל כגוף של פונקציה אנונימית.

הערה: ההבדל המרכזי בין executeScript() ובין שיטות executeAsyncScript() הוא שהסקריפט שנקרא באמצעות executeAsyncScript() חייב להפעיל הודעה על השלמת הביצוע באמצעות הפונקציה callback().

קריאות לשיטות באמצעות executeAsyncScript() נעשות בעיקר כאשר יש צורך בהשהיית בדיקה בדפדפן שבו נבדק או כאשר יש לסנכרן בתוך אפליקצית AJAX.

למה להשתמש ב־JavaScriptExecutor ב־Selenium?

קיימות סצנריואים בהם פקודות WebDriver מסוימות לא עובדות כצפוי מסיבות שונות, כפי שמוצגות המטה:

1. Selenium אינו מתקשר ישירות עם אלמנטי ה־Web
2. ביצוע פעולות כגון גלילה אל תוך התצוגה, לחיצה על אלמנטי ה־Web שמוסתרים מאחורי העטיפה, או הגדרת ערכים בשדות קריאה בלבד
3. ביצוע התנהגויות ספציפיות לדפדפן כגון שינוי דומיננטי באופן דינמי

במקרים אלה, אנו נעזרים ב־JavaScriptExecutor ב־Selenium.

באופן מסורתי, אנו משתמשים באיתותי Selenium כגון זיהוי על פי זיהוי על פי ID, שם, בורר CSS, XPath וכו', כדי לאתר אלמנט רשת. אם איתותים אלו אינם עובדים, או שאתה מתמודד עם XPath מסובך, במקרים כאלה, JavaScriptExecutor עוזר לאתר את אלמנט הרשת הרצוי.

יש מקרים שבהם שיטת click() עשויה שלא לעבוד בכל הדפדפנים, או שבקרי הרשת עשויים להתנהג באופן שונה בדפדפנים שונים. כדי להתגבר על מצבים כאלה, עליך להשתמש ב-JavaScriptExecutor לבצע פעולת לחיצה.

כפי שאנו יודעים, לדפדפנים יש מימוש של JavaScript בתוכם והם יכולים להבין פקודות JavaScript. לכן, הבנת JavaScriptExecutor ב-Selenium תאפשר לנו לבצע טווח של פעולות בצורה יעילה יותר.

יסודות של JavaScriptExecutor ב-Selenium

מטרת סעיף זה היא לספק רעיון ברמה גבוהה על שלבי היישום של JavaScriptExecutor ב-Selenium. לצורך הדגמה, נשתמש ב-Java כשפת התכנות המועדפת.

בואו נצפה בשלבים המרכזיים.

1. יבוא את החבילה הקשורה ל-JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. השתמש ב-JavaScriptExecutor, צור הפנייה לממשק והקצה אותה למופע של WebDriver על ידי המרה סוגית:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. קרא לשיטת executeAsyncScript() או executeScript() . לדוגמה, התחביר עבור executeScript()  ניתן למצוא למטה:

js.executeScript(java.lang.String script, java.lang.Object... args)

דמו: שימוש ב־JavaScriptExecutor ב־Selenium

לפני שנצפה איך להשתמש ב־JavaScriptExecuter ב־Selenium, עקוב אחר הדרישות האלה:

• צור פרויקט Maven חדש באמצעות IntelliJ IDE
• הוסף את תלות Selenium WebDriver האחרונה ב־pom.xml
• הוסף את תלות TestNG האחרונה ב־pom.xml

נשתמש באתר LambdaTest eCommerce Playground כדי להדגים את פעולת JavaScriptExecutor ב־Selenium על ידי הרצת הבדיקות על דפדפן Chrome מקומי.

תרחיש בדיקה 1

המטרה שלנו היא לכתוב קוד פשוט להמחשה באמצעות שימוש בשיטת executeScript() בתרחיש הבדיקה הבא.

1. נווט לדף כניסה לחשבון של אתר LambdaTest eCommerce Playground.
2. הזן פרטי כניסה חוקיים ולחץ על כפתור הכניסה על ידי הדגשת השדה במסגרת אדומה.
3. הדפס את כותרת הדף ואת שם הדומיין.
4. אמת כי כותרת הדף "החשבון שלי" מוצגת בהצלחת כניסה.

מימוש

צור מחלקת TestJavaScriptExecutor חדשה ליישום תרחיש הבדיקה. ניצור שני שיטות במחלקת הבדיקה הזו שיאפשרו לנו להתקין ולסיים בצורה תדירה את הסשן של Selenium WebDriver.

בואו נגדיר את WebDriver כפומה ברמת המחלקה מאחר ונזדקק לו בשתי השיטות, כלומר בשיטת setup(), כדי להתחיל את הסשן של הנהג ובשיטת tearDown() כדי לסיים בצורה תדירה את הסשן.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

בואו ניצור שיטת setup() חדשה שתיצור מופע של מחלקת WebDriver ותגדיר את ההגדרות בהתאם להרצת הבדיקות על דפדפן הכרום המקומי.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

שיטה זו תפעיל את דפדפן הכרום, תמקסימל את חלון הדפדפן ותחליט גם על זמן המתנה מרומז של 30 שניות. זמן המתנה המרומז יאפשר לכל תוכן האתר להיטען בהצלחה לפני שהבדיקה מתחילה להרצה.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

לבסוף, כאשר הבדיקה מורצת, שיטת tearDown() תיקרא, ותסגור את הסשן של RemoteWebDriver בצורה תדירה.

בואו נוסיף כעת שיטת testJavaScriptExecutorCommand() באותה מחלקת בדיקה כדי ליישם את תרחיש הבדיקה שדנו בו.

@Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

הקוד מנווט לדף ההתחברות של אתר אימולטור המסחר האלקטרוני של LambdaTest. השורה הבאה משנה את מופע ה-WebDriver ל-JavascriptExecutor כך שפקודות JavaScript יכולות להיבExecuted בדפדפן.

WebElement emailAddressField = driver.findElement (By.id ("input-email"));

js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

emailAddressField.sendKeys ("[email protected]");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

בנוסף, הוא מזהה את שדה הכתובת האלקטרונית באמצעות אסטרטגיית איתור לפי id. לאחר מכן, הוא משתמש בפקודת JavaScriptExecutor כדי להדגיש את הגבול של שדה כתובת האימייל בצבע אדום.

WebElement passwordField = driver.findElement (By.id ("input-password"));

js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

passwordField.sendKeys ("Password123");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

בשלב הבא, שדה הסיסמה ממוקם ומסומן עם גבול אדום. ההדגשה הזו עוזרת בידע איזה שלבים מתבצעים בזמן ביצוע בדיקת אוטומציה.

WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

js.executeScript ("arguments[0].click();", loginBtn);

באופן דומה, כפתור ההתחברות ממוקם באמצעות אסטרטגיית CSS Selector ומודגש גם כן.

String titleText = js.executeScript ("return document.title;").toString ();

System.out.println ("Page Title is: " + titleText);

​

String domainName = js.executeScript ("return document.domain;").toString ();

System.out.println ("Domain is: " + domainName);

כותרת העמוד ושם הדומיין ממוקמים ליד כך שמשתמש ב-JavaScriptExecutor ומודפסים בקונסולה.

String myAccountHeader = driver.findElement (By.cssSelector ("#content h2")).getText ();

assertEquals (myAccountHeader, "My Account");

לבסוף, הכותרת של עמוד "החשבון שלי", שמוצגת לאחר התחברות מוצלחת, מתפקדת, ונעשית אסרטיבית לבדוק שהיא מציגה את הטקסט "החשבון שלי".

כאן קוד מלא מהמחלקה TestJavaScriptExecutor:

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

​

    @BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

​

    @AfterTest

    public void tearDown () {

        driver.quit ();

    }

​

    @Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        WebElement emailAddressField = driver.findElement (By.id ("input-email"));

        js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

        emailAddressField.sendKeys ("[email protected]");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

​

        WebElement passwordField = driver.findElement (By.id ("input-password"));

        js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

        passwordField.sendKeys ("Password123");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

​

        WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

        js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

        js.executeScript ("arguments[0].click();", loginBtn);

​

        String titleText = js.executeScript ("return document.title;")

            .toString ();

        System.out.println ("Page Title is: " + titleText);

​

        String domainName = js.executeScript ("return document.domain;")

            .toString ();

        System.out.println ("Domain is: " + domainName);

​

        String myAccountHeader = driver.findElement (By.cssSelector ("#content h2"))

            .getText ();

        assertEquals (myAccountHeader, "My Account");

    }

בדיקת ביצוע

בצילום המסך הבא מ-IntelliJ IDE מוצג שהבדיקה הושלמה בהצלחה.

תרחיש בדיקה 2

המטרה שלנו היא לכתוב קוד פשוט להמחיש דוגמה בשימוש בשיטת executeAsyncScript() באמצעות תרחיש בדיקה הבא.

1. נווט לאתר LambdaTest eCommerce Playground.
2. גלול לתחתית עמוד הבית.
3. אסרט כי הטקסט "FROM THE BLOG" מוצג בסעיף התחתון של העמוד.

יישום:

צור שיטת testExecuteAsyncScript() חדשה במחלקת הטקסט הקיימת TestJavaScriptExecutor.

@Test

    public void testExecuteAsyncScript() {

        driver.get("https://ecommerce-playground.lambdatest.io");

        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeAsyncScript("var callback = arguments[arguments.length - 1];" + "window.scrollBy(0,document.body.scrollHeight); + callback()");

​

        String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

        assertEquals(fromTheBlogText, "FROM THE BLOG");

    }

הקוד ינווט לדף הבית של אתר משחק האיקומרס LambdaTest. השיטה executeAsyncScript() של JavaScriptExecutor תיקרא לאחר מכן, ותבצע את הפעולה לגלילת החלון.

בשיטת executeAsyncScript(), הסקריפטים שמופעלים צריכים להזהית באופן ברור כי הם סיימו על ידי קריאה לשיטת callback() המסופקת.

JavascriptExecutor js = (JavascriptExecutor) driver;

 js.executeAsyncScript("var callback = arguments[arguments.length - 1];" 

+ "window.scrollBy(0,document.body.scrollHeight); + callback()");

לאחר גלילה לתחתית החלון, יימצא הטקסט "FROM THE BLOG", ויעשה אסרציה עליו.

String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

 assertEquals(fromTheBlogText, "FROM THE BLOG");

ביצוע הבדיקות

הלקוי מראה שהבדיקה בוצעה בהצלחה.

פקודות לשימוש ב-JavaScriptExecutor ב-Selenium

בואו נבחן כמה תרחישים שאפשר לטפל בהם באמצעות ממשק JavaScriptExecutor לאוטומצית בדיקות Selenium.

כדי ללחוץ על כפתור:

js.executeScript("document.getElementById('enter element id').click();");

//or

js.executeScript("arguments[0].click();", okButton);

כדי להקליד טקסט בתיבת טקסט בלי להשתמש בשיטת sendKeys() מה לעשות:

js.executeScript("document.getElementById(id').value='someValue';");

js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

כדי לטפל בתיבת הסימון בעברית בהעברת הערך כאמת או שקר:

js.executeScript("document.getElementById('enter element id').checked=false;");

כדי לייצר חלון התראה מופתח ב-Selenium WebDriver:

js.executeScript("alert('Welcome To Selenium Testing');");

כדי לרענן את חלון הדפדפן באמצעות JavaScript:

js.executeScript("history.go(0)");

כדי לקבל את הטקסט הפנימי של כל הדף באתר ב-Selenium:

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();

System.out.println(innerText);

כדי לקבל את כותרת הדף ברשת:

String titleText =  js.executeScript("return document.title;").toString();

System.out.println(titleText);

כדי לקבל את שם הדומיין:

String domainName=  js.executeScript("return document.domain;").toString();

System.out.println(domainName);

​

כדי לקבל את כתובת ה-URL של דף ברשת:

String url=  js.executeScript("return document.URL;").toString();

System.out.println(url);

כדי לקבל את הגובה והרוחב של דף ברשת:

js.executeScript(“return window.innerHeight;”).toString();

js.executeScript(“return window.innerWidth;”).toString();

כדי לנווט לדף אחר באמצעות JavaScript:

js.executeScript("window.location = 'https://www.google.com");

כדי לבצע גלילה על אפליקציה באמצעות Selenium:

• כדי לגלול את העמוד אנכית ל-500 פיקסלים:
  Java

   

   js.executeScript(“window.scrollBy(0,500)”);

• כדי לגלול את העמוד אנכית עד הסוף:
  Java

  js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

הוספת אלמנט במודל האובייקטים של מסמך (DOM):

js.executeScript("var btn=document.createElement('newButton');"

+ "document.body.appendChild(btn);");

​

כדי לקבל את ה-שורש הצל ב- DOM:

WebElement element = driver.findElement(By.id("shadowroot"));

js.executeScript("return arguments[0].shadowRoot", element);

מסקנה

סלניום כולל ממשק בשם JavaScriptExecutor שמשמש כאשר פקודות WebDriver אינן פועלות כצפוי. בעזרת JavaScriptExecutor, אנו יכולים להשתמש ב-WebDriver כדי לבצע קוד JavaScript באתר, מאפשרים לנו לטפל במגוון משימות בצורה אלגנטית ויעילה שבלעדיה הייתה בלתי אפשרית באמצעות Java בלבד.

בבלוג זה, חקרנו איך להשתמש ב-JavaScriptExecutor בסלניום ובשיטות השונות שלו. בנוסף, כיסינו תרחישים שונים כדי להשיג פתרון יעיל באמצעות שיטות שונות יחד עם דוגמאות מעשיות.