Switch to iframe

תמלול ההרצאה: Switch to iframe

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

1. 00:02

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

2. 00:15

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

3. 00:41

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

4. 01:01

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

5. 01:24

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

6. 01:49

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

7. 02:14

   הדף המרכזי שלך ובעצם אתה לא צריך להעתיק את זה אלא אתה פונה אל ה-Frame החיצוני. זאת אומרת ה-iFrame זה הצורה שלנו לשלב אתר בתוך אתר. אתר משני בתוך אתר מרכזי בצורה מאוד יעילה והיא מאוד נפוצה.

8. 02:35

   למה זו בעיה מבחינתנו? ה-WebDriver שלנו, ה-WebDriver של הסלניום, לא יכול להבחין בהפרדה הזאת בין האתרים. ברגע שאנחנו משלבים אתר משני לתוך האתר המרכזי שלנו, הסלניום, הדרייבר, ה-WebDriver שלנו, לא יודע איך לגשת לאותם WebElements שנמצאים באתר המשני.

9. 02:59

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

10. 03:22

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

11. 03:44

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

12. 04:02

    אנחנו רואים html פותח ואז במהלך הטאגים שנפתחים יהיה טאג iframe, יהיה איזשהו source src, attribute src שיפנה לאתר המשני, לדוגמה demo iframe.htm יהיה לו שם גם ל iframe הזה ואז מיד אחריו יתחיל היררכיה של האתר המשני.

13. 04:28

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

14. 04:57

    אז כל דבר שאני ארצה לכל WebElement שאני ארצה לפנות בתוך ה-iFrame המשני בתוך ה-iFrame שנמצא ב-HTML הראשי אני נצטרך קודם כל להגיד לווב דרייבר שלי לדרייבר שלי סוויץ' 2 ולתת לו את ה-ID או את האינדקס או את ה-NAME של ה-iFrame שבתוכו אני רוצה לבצע פעולות ולזהות WebElement.

15. 05:22

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

16. 05:46

    לדרייבר שלנו ה-Web-Element הבא נמצא בחלון החדש אם אנחנו נרצה לבצע או לסגור את החלון החדש ואנחנו נצטרך לפניכם לעשות את הפקודה גם כן דרייבר.switch-to-window אנחנו נכיר אותה בשיעורים הבאים ויש לנו גם את ה-JavaScript Alert שגם אותו אנחנו יכולים להתמודד איתו בעזרת הדרייבר סוויץ' טו אבל בדמו הקרוב

17. 06:11

    בשיעור הקרוב נתמקד בפריים דרייבר סוויץ' טו פריים אז בואו נתחיל לראות את הדמו של התמודדות עם ה-i פריים עם המבנה של ה-i פריים כן יש לי את דף התרגול הזה יש לי דף תרגול שבתוכו יש i פרימים בוא נניח שבמהלך הטסט שלי אני רוצה להגיע לשדה הזה השדה שיש לו title פה first name ואני רוצה לכתוב איזשהו שם מיכאל אם כן אני יכול להשתמש בפקודה send keys ואם

18. 06:58

    אני רוצה לזהות את השדה אני אלך לצד more tools ו-develop more tools ויש לי פה בעצם את הזיהוי של השדה לא צריכה להיות לי בעיה לזהות אותו אני רואה שיש לו הוא tag input ויש יש לו Attribute Name, אני יכול לזהות אותו בעזרת ה-Name שלו.

19. 07:23

    אבל שימו לב, יש בו איזו מורכבות שאנחנו צריכים להתמודד איתה. אם כן, לזהות את האלמנט זה לא בעיה, אבל אנחנו צריכים לשים לב שהאלמנט, שה-Web אלמנט הזה, השדה הזה בעצם לא נמצא בתוך ה-Web Driver ה-Defaultי שלי. איך אני רואה את זה?

20. 07:43

    אני מסתכל פה על השורה של המסלול, על המסלול הזה של אותו input, שדה שאותו אני רוצה למפות ואני רואה שהוא נמצא בתוך html משני שהוא בעצם התוצאה של היבוא שמבוצע בעזרת תגית ה-iframe, תכף אנחנו נלחץ עליה.

21. 08:10

    יש לנו את ה- html הראשי ובתוכה אנחנו יכולים לזהות שיש בתוכה פריימים נוספים ואת זה אנחנו רואים על פי השורה הזאת שהיא מאוד חשובה כדי לזהות שיש לנו פה html חדש משני בין ל-iframe הכללי ואנחנו צריכים להגיד ל-webdriver שלנו,

22. 08:37

    לסלניום switch to. בואו נראה את התגית הiframe שבעצם מייבאת את כל ה- html המשני. לחצתי על ה-iframe פה, הוא הביא אותי למיקום היחסי שלי, אם אני רוצה לחזור אני לוחץ עליה שלוש נקודות ואני רואה את כל ההיררכיה ואני לוחץ שוב על איי פריים שלי ובתוכו את אותו שדה אותו ווב אלמנט מסוג איי פריים אני רואה שיש לו אטריביוט

23. 09:11

    name id ועוד כל מיני אטריביוטים משניים שאחד מהם הוא האטריביוט src שזה בעצם האתר עצמו שאנחנו מייבאים לאתר המרכזי שלנו כן