LOGIN
התחברות או הרשמה
Avatar
להמשך הרשמה ידנית – לחץ על כפתור ההרשמה, להרשמה/כניסה מהירה בעזרת חשבון רשת חברתית – לחץ על הלוגו בכותרת

אפס סיסמה - שכחתי את שם המשתמש

שם משתמש
סיסמה
זכור אותי

he icon   en icon

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

בדיקות GUI - לא (רק) מה שחשבתם

נכתב על ידי 
שני, 31 יולי 2017 11:46
דרגו כתבה זו
(4 הצבעות)

כאשר חושבים על בדיקות GUI (אני אישית מעדיפה UI או Client) עבור אפליקציות Web, הדבר הראשון שקופץ לראש זה שדות חובה וסוגי הדאטה שניתן להזין לשדה טקסט כלשהו...

אבל זה רק קצה הקרחון.

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

אז דבר ראשון, התחלתי לחבב Mind Maps, זה עוזר מאוד להדגים את מה שעובר לי בראש וזה נראה כך:

 MindMap2

אז נתחיל מהפשוט...

Mandatory fields:

סימון של שדה חובה – על מנת שהמשתמש לא יהיה מופתע בסוף התהליך.

האפרת שדות או כפתורים אשר תלויים בשדות אחרים – על מנת לא לאפשר למשתמש להמשיך ללא שדה חובה.

מניעת יציאה משדה ריק – על מנת לחייב את המשתמש להכניס ערך טרם המשך לשדות הבאים.

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

Mandatory

Data types:

כאשר אנחנו בודקים תקינות של תווים חוקיים בשדות טקסט, אנחנו מקפידים על בדיקה של מספרים, אותיות ותווים מיוחדים (!@#$....), אבל יש עוד לאן לנדוד.

כאשר מדובר על טקסט, מהי מגבלת התווים הנדרשת? בטוויטר זה 140 תווים. בשדה Description כלשהו עלולה להיות מגבלה של 255 תווים שאולי לא תתאים. מומלץ לתת על זה את הדעת.

כאשר מדובר במספרים, יש הרבה אפשרויות – כמובן שכדאי לשמור על הגיון והקשר. מספרים שליליים, אפס, מספר מחוץ לתחום של int (גדול מ- 2,147,483,647 או קטן מ- 2,147,483,647-), מספר עשרוני לא שגרתי (מספר ספרות אחרי הנקודה גדול מ 4), מספר רכב עם 6, 7 או 8 ספרות.

תאריכים ניתן לבחור באמצעות date-picker, אבל ניתן גם להכניס תאריך ידנית. ומה לגבי הפורמט של התאריך? dd/mm/yyyy או שאולי mm/dd/yyyy, ויכול להיות שיש גם שעה – dd/mm/yyyy hh:mm:ss. כל הנתונים האלה בסופו של דבר נשלחים מצד ה Client אל ה Server ויכולים להיכשל.

Default value:

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

ומה בנוגע ל Radio buttons? אנו צריכים לוודא איזה ערך מסומן מבין הכפתורים או האם מסומן ערך כלשהו כלל.

מכירים את שדה ה "...I agree to the terms and"? אז השדה הזה כברירת מחדל צריך להיות לא מסומן.

ושדה ה "...I want to receive e-mails on promotion"? השדה הזה צריך להיות מסומן?

בחלק משדות הטקסט, תהיה דוגמה לערך הרצוי – למשל This e-mail address is being protected from spambots. You need JavaScript enabled to view it., צריך לוודא שהערך ישנו ושניתן למחוק אותו.

 

Placeholder:

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

Placeholder

ToolTip:

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

Tooltip

Media:

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

Animation:

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

האירועים שאנו נבצע יכולים להיות מעבר עם הסמן על אזור/לינק, כניסה לשדה או יציאה משדה, לחיצה על Enter או Esc ועוד.

Tabs order:

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

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

Field types:

רק על מנת לוודא שאנחנו מכירים את התנהגות כל סוגי הפקדים (שיכולתי לחשוב עליהם), הנה רשימה:

Date-picker – שדה בחירת תאריך מתוך לוח שנה

Radio button – שדה בחירה בודדת מתוך מספר אפשרויות

Textbox – שדה טקסט חופשי

Combo-box – שדה בחירה מתוך רשימה

Button – כפתור לחיץ

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

Check-box – שדה המאפשר בחירה בין שני מצבים, מסומן או לא מסומן.

Toggle button – כפתור אשר מבצע החלפה בין שני מצבים (On/Off, שתי תצוגות וכו').

Table – בטבלת נתונים, הכותרות והנתונים המוצגים בה צריכים להיות ניתנים לקריאה וגודל העמודות ניתן לשינוי/קבוע (בהתאם לצורך).

Keyboard functions:

זה אולי נשמע דומה לנושא ה Tabs order, אבל רק חלקית.

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

Esc – יציאה משדה ללא שינוי התוכן

Enter – יציאה משדה עם שמירת השינויים

Tab – מעבר לשדה הבא

Shift-Tab – חזרה לשדה הקודם.

ובנוסף:

Space – שינוי מצב של Check-box, Toggle button, Radio-button.

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

PageUp/PageDown – משמשים לגלילה בדף.

* היכולת לעבור שורה מבלי לצאת מהשדה. (לא מחייב אבל ייתכן שנדרש)

Scroll:

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

אנחנו רוצים לוודא שזה לא קורה אצלנו.

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

Scroll

Refresh:

מה קורה לדף שאנחנו נמצאים בו אם עושים לו Refresh? האם לינקים שכבר לחצנו עליהם משנים את הצבע שלהם? האם מידע שהוזן בדף נשמר? האם דאטה ששינינו חזר לערכו הקודם? האם הדפדפן מזהיר לפני יציאה מדף שלא נשמרו בו השינויים?

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

Popup window:

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

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

Screen size:

אנחנו נרצה לבדוק את תקינות התצוגה בכל המצבים שבהם התחייבנו לתמוך.

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

Syntax:

Syntax כולל דקדוק, פיסוק, אות גדולה בתחילת שם, מקום, משפט וכותרת.

Double negative:

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

Leave without saving

צריך לשים לב לזה כאשר הפעולה שנשאלים עליה "מסוכנת" למשתמש.

Permanent change

 

אני מקווה שהצלחתי לתת חומר למחשבה עבור הפעם הבאה שתידרשו לבדוק UI.

 

* תודות למי שתרם לתכני ה Mind Map:
Assaf Lowenstein
Kobi Halperin
Doron Bar
Yoni Flenner

הורדת קבצים מצורפים:
שונה לאחרונה ב רביעי, 02 אוגוסט 2017 15:12

חובה להיות משתמש רשום במערכת בכדי להגיב - ההרשמה/כניסה בכותרת האתר

חדשות מעולם הבדיקות

  • Look what I’ve found ep. 5 (Apple edition)

    Hey! welcome to another edition of “Look what I’ve found”. This time our guest is one of the biggest companies out there. This is surely not worthy of one of those $1M bounties but still, pretty easy to spot and fix, one of the classic errors of the automated emailing world.

    23.08.2019 | 8:04 קרא עוד...
  • Your 2 basic visual regression testing options

    Can you spot the visual bug on Netflix (as of August 2019, at https://devices.netflix.com/de/)? No wonder, there is a trend to visual regression testing of websites. Most current approaches to that problem are pixel based, meaning that they compare screenshots of the pages pixel-by-pixel. Instead, deep visual regression testing considers the CSS attributes of all elements, giving you unique advantages.Pixel-comparison based visual regression testingWhen you see that Netflix has a simple visual bug on the German version of their website for over two months now (as of August 2019, visit https://devices.netflix.com/de/), the trend towards visual regression testing of websites is understandable. This approach guards you from unexpected changes (for which writing assertions is impossible) and is much more complete than assertion-based testing. Most current approaches today are pixel based, meaning that they compare screenshots of the pages pixel-by-pixel. This makes a lot of sense: The first version of a pure pixel-diffing tool is easy to implement. It works for any browser, app or other situation, as long as a screenshot can be retrieved. It gives instant results. However, there are also some downsides to pixel-based visual regression testing: Similar changes cannot easily be recognized: e.g. if the header or footer of the site changes, this affects all tests. You usually get a lot of false positives, as even a small change can result in many elements changing e.g. position. Filtering these false positives is tricky, because it can result in either too many false positives (irrelevant changes being reported) or false negatives (important[…]

    23.08.2019 | 2:46 קרא עוד...
  • Influence Equals Impact

    ”That’s VANITY, isn’t it?” a friend asked ”What’s the point to playing that social media game? Why would you take pics of yourself doing workshops? Or even do a vlog?””It’s 2019. Internet is everywhere. Influence equals impact” I replied.Your domain makes no difference. The value of your results is not just about the results you produce.It all boils down to the impact your results make on the people you serve. Are others willing to change their thinking, decisions or actions based on what you deliver?To create impact, you first need the skill. That’s obvious. Without skill, all the rest is pointless. Great results that create value to the people you serve are the precondition for everything else.Second, you need style. Nobody likes to work with an annoying smart ass even though they might have great results. It’s the how you deliver your results that matters. Do you see yourself as the El Hefe of a Michelin restaurant or a clerk at the junk food joint?Finally you need the status. Who are you when you deliver these results? Are you just a random passerby or are you a total guru of your field? Regardless of your title on the business card, are you a professional who commands respect in the minds of your clients, colleagues and bosses? Do you have social reference?It’s true that some might call it vanity; I call it professional reputation. The influence that you gather over time equals the impact your results later make!Would today be a great to day to start that[…]

    23.08.2019 | 2:41 קרא עוד...

טיפים

  • בדוק מוקדם ככול הניתן
    בדוק מוקדם ככול הניתן "בדוק מוקדם ככול הניתן" – אחת המטרות של הבדיקות הינה לספק כמה שיותר משוב ומידע לגבי איכות המערכת מנקודות מבט שונות (פונקציונליות ולא פונקציונליות כמו עמידה בעומסים ושאר יכולות). לעיתים בודקים נוטים בטעות לחשוב כי הדרך…
    קרא עוד...
  • טיפים לאוטומציה יעילה - Dave McNulla
    טיפים לאוטומציה יעילה -  Dave McNulla במאמר Good Practices For Automating Functional Tests מאת Dave McNulla תמצאו נקודות חשובות ליישום אוטומציה בצורה יעילה. שימו לב כי keyword Driven Testing הינה דרך יעילה להפרדה בין הבדיקה לבין הקוד שעומד מאחוריה, דבר שעוזר לבודקים לכתוב בדיקות במהירות וללא…
    קרא עוד...
לרשימה המלאה >>