Website Testing
פרקי ההרצאה: Website Testing
תמלול ההרצאה: Website Testing
הטקסט המלא של הדקות הראשונות בהרצאה «Website Testing» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, שלום לכולם, בהרצאה הזאת אנחנו נדבר על Website Testing הרעיון של Website Testing הוא איך לבדוק אתרי אינטרנט ברמה של אנשי בדיקות אנחנו נתעכב בלימוד שלנו להבין מה זה Web Page Fundamentals היסודות של איך מעצבים אתרי אינטרנט כדי שנוכל להבין את הלוגיקה, את העולם מושגים, שנוכל להתקדם עם זה
נדבר קצת על גישה של בדיקות קופסא שחורה לאתרי אינטרנט נדבר, כלומר בדיקות חיצוניות, בדיקות פונקציונליות נדבר על Gray Box Testing שזה בדיקות הפרות שזה בעצם שילוב של Black עם White.
White Box Testing זה בעצם בדיקות קופסא לבנות, כאשר בדיקות קופסא לבנות זה לרדת לרמת שורות הקוד ו-Gray Box Testing זה לבדוק את זה בצורה מעורבת גם ברמה החיצונית וגם קצת לדעת את הקונספט הכללי של האלמנטים של שורות הקוד.
נדבר גם על Configation and Compatibility Testing על תאימות, קונפגורציה והתאמה של אתרי אינטרנט, ניגע טיפה ב-usability, בשימושיות של אתרי אינטרנט, וניתן הקדמה קצרצרה ל-introducing automation, לבדיקות אוטומטיות של אתרי אינטרנט ברמה של Web Site Testing.
אז מה זה בעצם Web Page? אז רק בשביל שנוכל להסתנכרן כולנו ברמה, אתר אינטרנט מורכב מ-DAF, דף אינטרנט מורכב מכמה אלמנטים, בגדול קוראים לזה באנגלית Web Page, דף אינטרנט הוא מסמך שנמצא על רשת האינטרנט כלומר הוא מאוחסן ויכול להיות נצפה מכל מיני מחשבים על הרשת ואתה צופה בו הוא ניתן להצגה תוך כדי שימוש בדפדפן
השימוש של האקספלורר או הפיירפורק כמו שראיתם במצגות הקודמות עכשיו, קבוצת דפים שקשורים ביניהם על ידי קישורים כלומר אני נכנס לאתר, בואו נדגים את זה זה בעצם יוצר אתר אינטרנט, אני מדגים את זה אני יוצא מהמצגת אני אכנס לדפדפן, יש לי פה בצד שמאל למטה כמו
שאתם רואים אחד זה האיש, זה האקספלורר, והשני זה הכתום, זה הפיירפוקס אני פתחתי עכשיו את הפיירפוקס, אני רואה למעלה, כתוב לי פה מוזילה פיירפוקס זה אתר אינטרנט, זה האתר של ויינט, אוקיי?
עכשיו מה זה קישור, מה זה היפרלינק? זה היפרלינק, איך אני מזהה את זה? שימו לב לעכבר בצד ימין, העכבר עכשיו בצורת חץ אם אני מעביר אותו לשורה הזאתי לקישור הוא נהפך להיות סימן של יד זה מרמז לי שזו שורה שאם אני אלחץ עליה אני אעבור לדף אחר באינטרנט כרגע הוא נמצא בכתובת הזאתי זו שורת ה-URL Uniform Resource Locator מאתר מושבים אחיד
פה אני מזין את הכתובת הכתובת זה הסיומן שלה 07340L800.html אם אני אלחץ עכשיו על הכתובת הזאתי היא תהפך להיות ליד ואני רואה פה למטה בשורה התחתונה האפורה נמצאת פה, פה איפה שכתוב done שימו לב שאני מחזיר את הסמן של העכבר על הכתובת לא נשאיר דגלי חיזבאללה באזור ואני יורד בחזרה עם העיניים ומסתכב את עצמו למטה על השורה האפורה אני רואה שהכתובת
בסיומת של האחרי השלש השתנתה למשהו אחר כלומר זו הכתובת החדשה שאליה כל פעם קישור מה שאני רואה עכשיו מול העיניים זה דף אינטרנט אם אני נלחץ על הקישור שלא נשאיר דגלי חיזבאללה באזור אני לוחץ אני עובר לכתובת חדשה שמסתיימת באותיות אחרות.
עכשיו עדיין כשנכנסתי לדף אחר יש לי עדיין קישור, נניח אני לוחץ על המילה מדיני, אז אני לוחץ על מדיני ומתקרב לדף אחר. זה נקרא דפי אינטרנט.
אוקיי, אז ראינו מה זה דף אינטרנט. זה קבוצת דפים שקשורים ביניהם על ידי קישורים והם יוצרים אתר אינטרנט. עכשיו, מה בעצם מציג אותם?
מציג אותם הדפדפן. דפדפן מציג את תוכן האתר ואת זה הוא רואה לפי קוד html. המצגת הזאת לא נועדה לתת לכם ללמוד html אבל שתבינו רק את הקונספט הכללי.
דף אינטרנט הווי פייג' הוא יכול לכלול הצגה של מסמך טקסט כמו שראינו מקודם באתר של ויינט. הוא יכול להכיל בתוכו תמונות כמו שראינו באתר של ויינט.
הוא יכול להכיל בתוכו גם צלילי שמע כלומר אודיו, אודיו, סרטוני וידאו וגם קישורים לאתרים אחרים כמו שראינו עד עכשיו.
כדי להתקדם באתר האינטרנט, גולשי האינטרנט מנפטים ברשת האינטרנט על ידי לחיצה על ההיפר כישורים, שזה מה שראינו מקודם. יש לנו גם יכולת לאתר מידע במנועי חיפוש באינטרנט, כמו האתר גוגל המפורסם, וכל אחד יכול לכתוב ולהכין אתר אינטרנט בעצמו.
איך אנחנו עושים את זה? בואו נראה את זה. אני עושה פה רגע אסקייפ, יוצא מהמצגת, אני שוב פותח את האקספלורר, סליחה, לא את האקספלורר, אני פותח את אתר האינטרנט.
אוקיי, אז מה זה מנוע חיפוש פנימי? אני אכנס לגוגל, אני רושם למעלה בשורת ה-URL google.su.il שזו הסיומת בישראל, ואני רואה פה מנוע חיפוש שאני יכול לכתוב פה מה שאני מחפש, לדוגמה את המילה בורג, אני עושה חיפוש בגוגל ואני מקבל כל מיני אתרים שקשורים למילה בורג.
זה יכול להיות גם אישיות כמו בורג יוסף, ככה אני מחפש מידע לא משנה מה זה הרעיון אני מקבל את התשובות שלי פה בוא נעשה את זה משהו יותר אינפורמטיבי אני חוזר בחזרה אחורה חצי אחורה ואני אחפש את המילה קפה אני עושה חיפוש בגוגל עכשיו אני מתחיל לקבל כל מיני קישורים שיש להם קפה עכשיו זה השורה הכחולה זה התוצאת חיפוש שלי השורות השחורות זה טקסט מתוך האתר אינטרנט וזה הקישור הממשי כלומר אם אני מעתיק את הטקסט הזה על ידי
ללחיצה על Edit ו-Copy ושותל אותו בשורת URL למעלה, אתם רואים, זה אותו דבר, HE, ולוחץ על Enter, אני מגיע לאתר, לערך של קפה באנציקלופדיה ויקיפדיה.
למה אני נכנס דווקא לפה? כי פה אני אמצא הרבה יותר מידע מה זה קפה, מידע מאוד מסודר, ויהיה לי גם לינקים למטה של מידע נרחב יותר ומאמרים בנושא קפה.
אז זה דבר שיכול מבחינת גלישה באינטרנט לקדם אותי. זה היה בנוגע ליכולת לחפש מידע במנועי חיפוש. איך אני יכול לכתוב אתר אינטרנט תוך שניות?
אני פותח את ה-word, start word, ואני אעתיק את התוכן של הדף הזה. אני פשוט אעשה עריכה העתק, ואני אחזור ל-word, ואני אעשה עריכה הדבק. זה הדף אינטרנט שלי, אני אתן לו כותרת, דף אינטרנט, אני אצבע את זה באדום, הוא ייתן לו שורת אנדרליין.
עכשיו זה דף אינטרנט, איך אני יוצר אותו? אני לוחץ פה על קובץ, ובמקום שמירה בשם אני אבקש לשמור אותו כדף אינטרנט. שמירה כדף אינטרנט.
או שאני אעשה תצוגה מקדימה של דף אינטרנט. אני אלחץ על תצוגה מקדימה בלי לשמור. שימו לב, הוא פותח את הדף וורד שלי בתוך מייקרוסופט אקספלורר וכך הוא מציג אותו.
כמו שאני כתבתי, שימו לב איזה יופי. אז נכון, אני עכשיו אפתח את זה בגדול, אז נכון שאני רואה פה עכשיו את הדפדפן של האקספלורר ואת הטקסט שכתבתי מתוך הוורד, אבל מה זה דף html?
דף html, כדי להבין מה הלוגיקה שלו מאחורה, זה לא שפת תכנות, זה פשוט שפה של סימנים שמציבים לי כל מיני חוקים שגורמים לטקסט להיראות ככה, שזה אדום עם שורה מתחת ויש לי פה שני בולטים.
איך אני עושה את זה? איך אני מבין איך נראית שפת ה-HTML? אני עכשיו אלחץ פה על הכפתור הימני באזור ריק בדף אינטרנט ואני אלחץ על View Source. כולם רואים פה את ה-View Source באמצע בכחול?
View Source זה בעצם ראה את המקור של הדף, ראה את הקוד ה-HTML שלו. אני לוחץ עליו ואז אני איחשף לקוד ה-HTML שבנת האתר. אני לוחץ עליו ואני פותח את ה-NotePad.
ה-NotePad זה הקוד שיוצר את הדף הזה. אז שימו לב, פה בדף אינטרנט יש לי בסך הכל שלוש שורות, אבל בקוד שיצר אותו, שימו לב כמה קוד ארוך זה.
אני מדפדף למטה, תראו כמה קוד היה צריך כדי ליצור את הדבר הזה. אז זה במקרה דוגמה רעה, כי כששומרים את זה מתוך הוורד, הוורד מוסיף הרבה אלמנטים שהם לא נצרכים.
כלומר, זה קוד לא כל כך נקי, אבל עדיין ככה נראה קוד HTML. בואו נראה את זה על אתר רגיל, לא האתר שאני יצרתי, האתר הזה, אלא בואו נראה את זה באתר רגיל. אני סוגר את הוורד, ובואו נראה את זה, זה אתר באינטרנט של ויקיפדיה.
אותו דבר, כפתור ריק, מה קורה פה? אוקיי, אני סוגר את הוורד. כפתור ריק על ויקיפדיה, על אתר אינטרנט, אין לי. למה אין לי? הנה, אני מחפש את ה-view page source, אני לוחץ עליו, ונפתח לי ה-notepad עם הקוד שיצר את ויקיפדיה.
שימו לב כמה קוד. אוקיי, עכשיו גם בלי להבין, אני רואה פה את שפת הסימנים של ה-HTML, ואני רואה גם שכתוב פה בעברית 7 גרם קפה 30 מיליון, זה הטקסט שמוצג.
התגים קובעים לטקסט איך הוא ייראה בצורה יפה ונקייה כמו זאתי על המסך. אז אני חוזר למצגת. אז אחרי שהבנו שכל אחד יכול לכתוב ולהכין אתר אינטרנט, נבין עכשיו מה יש באתר אינטרנט.
אז באתר אינטרנט יש Text of Different Sizes, יש לו כל מיני סוגים וגדלים של טקסט, כמו שאני רואה את זה באתרים. עכשיו, אני בכוונה כותב פה באנגלית כדי להעלות את רמת האנגלית שלכם.
אין ברירה, צריך להתקדם לכיוון של אנגלית. התחלנו את הקורס הזה בעברית, אבל כל הזמן להתקדם לכיוון אנגלית, זו השפה המקצועית של עולם המחשבים, זו השפה המקצועית של עולם הבדיקות.
סך הכל אוצר המילים הוא לא גדול, אפשר להתגבר עליו, ואני אתרגם לכם כל מושג, ואתם חייבים לראות לפחות פעם אחת איך נראה כל מושג באנגלית.
אז דיברנו על טקסט אוף דיפרנט סייזס באתר אינטרנט, יש לנו פונטים שונים באתר אינטרנט, כלומר סוגי גדלים שונים של האותיות וכמובן צבעים שונים שבהם מוצגת האות.
יש לנו גם גרפיקות, כלומר תמונות באתר, יש לנו היפרלינג שזה כישורים, היפרלינג שהם כישורים טקסטואליים, כלומר כמו שראינו בכתבה של ynet שהשורה טקסט עצמה היא הכישור ויש לנו גם תמונות שהתמונה עצמה, הגרפיקס, היא הכישור.
אוקיי. יש לנו Rotating Advertisement שזה פרסומות מתחלפות כלומר כל מיני באנרים שמתחלפים לנו באתרי אינטרנט כל הדברים האלו אני נותן לכם את הטרמינולוגיה המקצועית של זה שבכלל תבינו מהם המילים שאותן צריך אחרי זה לבדוק אנחנו נצטרך לבדוק גם text that has drop down selection boxes כלומר מין כל מיני טבלאות שאני יכול לבחור מהם כל מיני אפשרויות לדוגמה
שאתם נכנסים לאתר אינטרנט ואתם בוחרים באיזה אתר אינטרנט אתם נמצאים בואו נדגים את זה מה זה drop down selection אינבוקסס כל דבר פשוט צריך להראות אין ברירה נסגור את זה אני אכנס לאתר אינטרנט בואו נכנס לאתר אינטרנט של מכללת.נט אני נכנס לאתר ואני אכנס לצור קשר אין לו לעלות והוא לא עולה כי הנה זו דוגמה טובה ל-usability הוא לא מזהה את החצי האתר
הראשון הוא בכלל לא מזהה אתם רואים הכל פה ריק ואז הוא אומר פה click here to download plugin יש לנו פה אתר אינטרנט שהקובץ העליון שלו הוא קובץ שנקרא flash לדפדפן אין יכולת להציג את הפלאש, הפלאש הזה הוא תוסף שמוצג בתוך הדפדפן שהHTML לא יודע איך להתמודד איתו, הוא צריך מה שנקרא פלאג אין, אתם רואים את
זה פה, פלאג אין, כדי להוריד אותו אני חייב ללחוץ עליו, ועכשיו דפדפן הפייר פוקס, Welcome to the Plugin, אני אעשה לו נקס, תתקין את הפלאג אין Macromedia Flash Player, נכנס לו נקס, והוא יתחיל להתקין אותו, אני צריך להסכים ליולה, להסכם הפלאג אין לייסנס ל-end user license לפורגרם הוא מתחיל
להתקין את הדאונלד מקרומדיה פלאש פלייר הוא מוריד אותו אתם רואים את קצב ההתקדמות זה הולך ויורד מהאינטרנט עכשיו אם הייתי פותח אותו באקספלורר הוא דווקא כן היה מזהה כי הפלאג אין של תוסף של מקרומדיה פלאש שיכול להתמודד איתו מותקן אוטומטית באקספלורר פיניש עכשיו הוא אמור לראות אותו אתם רואים הוא מתעדכן בצד ימין למטה עכשיו הוא הנה הוא רואה את כל הקובץ פלאש של החצי דף הראשון
עכשיו דיברנו על המושג זה היה drop-down selection boxes מה זה drop-down selection boxes? אני לוחץ פה על עצור קשר אתם תבינו מה זה זה drop-down selection boxes הדבר הזה זאת תיבה טקסט שאני לוחץ עליה יש לי פה drop-down