בשיעורים הקודמים למדנו כיצד ניתן לזהות אלמנטים ב-DOM ואח"כ גם איך להפעיל עליהם מתודות, כמו click, sendkeys וכו'. כעת אנו נלך שלב אחד מוקדם יותר ונלמד כיצד אנו יכולים למצוא את האלמנטים ע"י הדפדפן בכדי להגדיר אותם בפונקציה , לדוגמא, כאשר אני רוצה להשתמש בפונקצית:

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

מניין לי לדעת כי ערך ה-ID שלי הוא בהכרח Username ? למה לא Myname או UserID ?

את הערכים אנחנו כאמור שואבים מתוך ה-DOM של הדפדפן וכעת נלמד כיצד עושים זאת.

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

אציג בפניכם 3 דוגמאות שמייצגות את שלושת הדפדפנים הפופולרים ביותר – כרום , פיירפוקס ואקספלור.

 

דפדפן הכרום:

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

כעת נקיש על המקש F12 במקלדת, או לחילופין נלחץ על הכפתור הימני של העכבר ובתפריט החדש נבחר את האופציה האחרונה – Inspect Element:

inspectChrome

כעת נקיש על כפתור הזכוכית מגדלת בפינה:

inspectChrome2

ונעמוד על האלמנט אותו אנו נרצה לקחת ממנו את הפרטים, לדוגמא בדף צור קשר שלי, נעמוד על שדה "תוכן ההודעה" ונקיש עליו (זכרו כי הקשנו על זכוכית המגדלת לפני), מה שאנו אמורים לראות נראה כך:

inspectChrome3

נגדיל את סינטקס ה-Html:

inspectChrome4

ונראה את התג המייצג את שדה הטקסט – <textarea> שמקבל Attributes שונים כמו : name=your-name למשל. כך שאם נרצה לזהות את שדה הטקסט פשוט ניתן לו את הפקודה הבאה:

WebElement element = driver.findElement(By.name("your-message"));

או להשתמש ב-cssSelector:

WebElement element = driver.findElement(By.cssSelector("textarea[name='your-message']"));

בשביל למצוא את ערך ה-XPath פשוט נעמוד על קטע הקוד (במקרה שלנו – התג textarea) נקיש על המקש הימני של העכבר ועל Copy XPath:

inspectChrome5

 


 

דפדפן הפיירפוקס:

בדיוק באותו האופן ניתן להפעיל את אופציית הDev Tools  בפיירפוקס:

inspectFirefox1

 

inspectFirefox2

 

דפדפן האקספלורר:

גם כאן הפעולות אותו הדבר:

inspectie1

 

inspectie2

 

 


arrowBack arrowMain arrowFor

השאר הערה\הודעה