שיעור 19: עבודה עם JS

אין זה סוד כי סלניום ו-JavaScript הולכים יד ביד, זו הייתה גם שפת השימוש העיקרית בגרסאות סלניום המוקדמות,  וגם אין זה סוד כי Java Script היא השפה המועדפת על דפדפנים כיום בשביל להתממשק ל-DOM של ה-HTML. זה אומר כי לדפדפנים מנועי JS פנימיים אשר יודעים לפרש את פקודות ה-JS שאנחנו (מפתחי המוצר) מספקים להם. אך אליה וקוץ בה, מכיוון שלכל דפדפן מנוע JS משלו, כך גם הפירושים יהיו במקצת שונים ביניהם. וזו גם הסיבה שלעיתים כדאי לנו להשתמש בקוד JavaScript בפקודות הסלניום, מעבר לעובדה כי עם סלניום ו-JS ניתן לשנות לחלוטין את דפי ה-HTML ועוד דברים מגניבים, בשיעור זה נקבל טעימה קטנה ממה שהעבודה עם JS יכולה לתרום לבדיקות שלנו עם ה-Webdriver.

ה-Webdriver מספק לנו ממשק : JavascriptExecutor ובו שתי מתודות: executeAsyncScript ו- executeScript אשר מפעילות את הסקריפטים ב-JS שאנחנו נספק להן.

הפקודה להרצת JS בתוך קוד הסלניום:

(JavascriptExecutor)driver).executeScript("myJSScript();");

כאשר בד"כ קוראים לה כך:

webdriver driver = new firefoxdriver();
if (driver instanceof JavascriptExecutor)
{
    ((JavascriptExecutor)driver).executeScript("myJSScript();");
}

עכשיו, בואו נעטוף אותה בצורה יפה יותר ונחזיר גם את שם הדף בו אנו נמצאים:

WebDriver driver = new firefoxdriver();
JavascriptExecutor js;
if (driver instanceof JavascriptExecutor){

    js = (JavascriptExecutor)driver;
}
js.executeScript("return document.title");

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

js.executeScript("return document.getElementById('myID');");

הוא יהיה שווה ערך לפקודה מוכרת לנו:

driver.findElement(By.id("myID"));

ניתן לעשות עוד פעולות חביבות עם JS כמו להקיף את הלוגו של האתר הנוכחי ב-border אדום, כך למשל:

WebElement element = driver.findElement(By.cssSelector("img[alt='logo']"));
js.executeScript("arguments[0].style.border='3px solid red'", element);

והתוצאה תראה כך:

דוגמא נוספת היא הפיכת כל האלמנטים שהתג שלהם הוא input לאלמנטים שהתג שלהם יהיה radio, כך:

js.executeScript(
        "var inputs = document.getElementsByTagName('input');" +
        "for(var i = 0; i < inputs.length; i++) { " +
        "    inputs[i].type = 'radio';" +
        "}" );