Inspect Element On Browsers

תמלול ההרצאה: Inspect Element On Browsers

הטקסט המלא של הדקות הראשונות בהרצאה «Inspect Element On Browsers» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:29

   אבל בשיעור הקרוב נדבר יותר על הנושא של Inspect Element, זיהוי אלמנטים בדפדפן שלנו. אז בואו נתחיל בשיעור.

3. 00:43

   אם כן, לאחר פרק ה-Java אנחנו נכנסים לעולם של הבדיקות האוטומטיות בסביבות אינטרנט, בסביבת Web. ההיכרות שלנו עם סביבת Web תתחיל ב-Inspect Web Element.

4. 01:00

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

5. 01:21

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

6. 01:44

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

7. 02:03

   לדוגמה השדה החיפוש המרכזי בגוגל הוא WebElement WebElement מסוג input כפתורים הם גוגל סרץ', הם פילינג לאקי, הם ווב אלמנט כפתורים, מסוג כפתור.

8. 02:20

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

9. 02:38

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

10. 02:53

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

11. 03:19

    אז בואו נראה מה אנחנו יכולים לעשות כדי לזהות Web-Element במערכת שלנו. כן ביקרנו קודם באתר גוגל, פתחתי את דפדפן החרום, את הבראוזר חרום וניגשתי לאתר google.coil או google.com ונפתח לי הדף הזה.

12. 03:40

    מה שאני רואה כאן WebElements זה בעצם חלק ממערך של המבנה של דף האינטרנט של גוגל. יש לזה ביטוי שנקרא DOM. מה זה הDOM בעצם? בואו נראה. What is a DOM?

13. 04:00

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

14. 04:31

    בהיררכיית האלמנטים של הדף. לצורך כך אנחנו יכולים ללחוץ על הגדרות של הדפדפן more tools וללחוץ פה developer tools יש לזה גם קיצור control shift f12 או סליחה f12 גם פותח את הinspect element את הכלי הפיתוח כלי הפיתוח.

15. 05:00

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

16. 05:21

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

17. 05:40

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

18. 06:16

    זה נראה קצר ולעניין, בתוך body מסתתרת ההיררכיה המלאה. אם אני פותח את ה-div של ה-class אנחנו רואים tag html, tag add נפתח, tag add נסגר ואז מתחילה ההיררכיה של ה-body שנסגרת לפני סגירת ה-html.

19. 06:37

    הכל בתוך ה"פותח tag html" ו"סוגר html". בתוך ה-body יש לנו div שבתוכו יש היררכיה ארוכה של אלמנטים שאנחנו יכולים לראות דרכם את מה שקורה בדפדפן ומה אנחנו בעצם רואים.

20. 06:58

    אז אנחנו יכולים להתחיל לצלול פנימה, יש עוד ועוד היררכיות בתוכו, אבל הדרך הנוחה ביותר לזהות אלמנט היא על ידי הכפתור Select an Element in Page to Inspect, ה-Inspect Tool הזה, כפתור ה-Inspect, שמאפשר לי לסמן את אותו שדה שאני רוצה לזהות בהיררכיה,

21. 07:22

    בדוקומנט אובג'קט מודל