מדריך IO למנהלי אתרים באמצעות אתר אינטרנט חי ודוגמאות עבודה: 8 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

מדריך IO למנהלי אתרים באמצעות אתר אינטרנט חי ודוגמאות עבודה

עדכון אחרון: 2015-07-26

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

רקע כללי

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

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

המאמר יעסוק רק בטכנולוגיות בהן נעשה שימוש ולמה שלמדתי בתהליך.

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

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

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

ניתן למצוא את כל סקריפטים לבדיקה ב- github ואתר בדיקת העבודה נמצא באתר מבחן ההדרכה IO Tutorial Web Driver

אני מקווה שתמצא את זה שימושי. אם כן, אנא יידע אותי.

מטרות השתמש בטכנולוגיות ל:

• בדוק את פונקציונליות אתר האינטרנט
• בדוק את פונקציונליות JavaScript
• ניתן להריץ ידנית
• ניתן להריץ אוטומטית

• שפה קלה ללימוד לא מתכנתים

  אנשי Q/A עם ידע בסיסי ב- HTML ו- JavaScript

• השתמש בתוכנת קוד פתוח בלבד

טכנולוגיות

רשימת הטכנולוגיות שבחרתי:

• mocha - test runner - מבצע את סקריפטים הבדיקה
• shouldjs - ספריית קביעות
• webdriverio - כריכות שליטה בדפדפן (כריכות שפה)
• סלניום - הפשטת דפדפן והפעלת מפעל

• מנהלי התקן דפדפן/מובייל + דפדפנים

  • Firefox (דפדפן בלבד)
  • Chrome (דפדפן ומנהל התקן)
  • IE (דפדפן ומנהל התקן)
  • Safari (תוסף לדפדפן ולנהג)

שלב 1: התקנת תוכנה

כדי להתחיל אתה צריך להתקין Node JS, IO Driver IO, Mocha, Should ו- Selenium לבד.

להלן הוראות התקנה עבור Windows 7.

(אני משתמש ב- Mac/Linux אבל הייתי צריך להתקין הכל במכונות Windows 7, זו הסיבה שצירפתי את זה לעיונך. הליך ההתקנה ב- Mac/Linux דומה. אנא התייעץ עם הפניות מקוונות למידע נוסף. מֵידָע.)

מתוך דפדפן:

• התקן את הצומת הכולל NPM (מנהל חבילות הצמתים)

• עבור אל

  • לחץ על התקן
  • שמור והפעל קובץ
  • הגדר את הנתיב והמשתנה (NODE_PATH)

  • עבור ללוח הבקרה-> מערכת ואבטחה-> מערכת

    • הגדרות מערכת מתקדמות

    • הגדרת סביבה (משתני משתמש)

      • הוסף ל- PATH

        C: / Users {USERNAME} AppData / Roaming / npm;

      • הוסף את NODE_PATH (משתני מערכת)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

הערה: התקנתי את כל התוכנות שלהלן באמצעות האפשרות npm global (-g). בדרך כלל זה לא מומלץ, אך להתקנה זו הייתי צריך להתקין ברחבי העולם מכיוון שהוא ישמש במספר פרויקטים.

פתח את שורת הפקודה (cmd):

(מנהל משתמש מקומי)

• התקן סלניום "מנהל התקן אינטרנט"

  • npm התקן webdriverio -g

    פעולה זו תתקין את מנהל ההתקן IO הגלובלי במחשב שלך

• התקן את תוכנת "mokka" test runner

  • npm התקן mocha -g

    פעולה זו תתקין מוקה באופן גלובלי במחשב שלך

• התקן את ספריית הטענה "צריך"

  • npm להתקין צריך -g

    פעולה זו תתקין "צריך" ברחבי העולם במחשב שלך

• התקן שרת Selenium Stand Alone

  • עבור אל
  • הורד קובץ jar ועבור לספריית "סלניום".

• התקן דפדפנים ומנהלי דפדפן לבדיקה

  • מהנחיית cmd:

    • צור ספריית "סלניום"
    • C: / Users {USERNAME} סלניום

    • פקודות:

      • cd C: / Users {USERNAME}
      • mkdir סלניום

    • פיירפוקס

      • התקן את דפדפן Firefox, אם עדיין לא מותקן.
      • יש להגדיר את הנתיב כדי להפעיל את Firefox משורת הפקודה (cmd).

      • לוח הבקרה-> מערכת ואבטחה-> מערכת

        • הגדרות מערכת מתקדמות
        • הגדרות סביבה
        • הוסף (הוסף שימוש חצי נקודתיים) למשתנה נתיב
        • C: / Program Files (x86) Mozilla Firefox
      • אין צורך במנהל התקן אינטרנט מיוחד עבור Firefox.

    • כרום

      • התקן את דפדפן כרום, אם עדיין לא מותקן.
      • ניתן להגדיר את הנתיב להפעלת Chrome משורת הפקודה (cmd).
      • בדוק תחילה: chrome.exe משורת הפקודה (cmd)
      • אם כרום לא מתחיל אז:

      • לוח הבקרה-> מערכת ואבטחה-> מערכת

        • הגדרות מערכת מתקדמות
        • הגדרות סביבה
        • הוסף (הוסף שימוש חצי נקודתיים) למשתנה נתיב
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • דרוש מנהל התקן אינטרנט מיוחד עבור Chrome.

        עבור אל chromium.org ופתח את מנהל ההתקן של 32 סיביות לספריית "סלניום"

    • Internet Explorer (עבור Windows בלבד - לא יפעל בפלטפורמות אחרות)

      • נדרש מנהל התקן אינטרנט מיוחד עבור IE.

        • עבור אל
        • הורד ופתח את מנהל ההתקן של 64 סיביות לספריית "סלניום".

שלב 2: סקריפט בדיקה בסיסי

נתחיל מכמה יסודות.

להלן סקריפט מוקה פשוט שיפתח אתר אינטרנט ויאמת את הכותרת.

// tutorial1.js

// // זהו סקריפט בדיקה פשוט לפתיחת אתר ו // לאמת כותרת. // ספריות חובה var webdriverio = require ('webdriverio'), should = require ('should'); // בלוק או חבילת סקריפט מבחן מתארים ('Test Title for I Web Driver IO - Tutorial Test Website Website', פונקציה () {// הגדירו פסק זמן ל- 10 שניות this.timeout (10000); var driver = {}; // וו לרוץ לפני בדיקות לפני (function (done) {// טען את מנהל ההתקן עבור מנהל הדפדפן = webdriverio.remote ({winsCapabilities: {browserName: 'firefox'}}); driver.init (done);}); // מפרט בדיקה - "מפרט" זה ('צריך להיות טעינת דף וכותרת נכונים', פונקציה () {// טעינת דף, ואז התקשר לפונקציה () החזר מנהל התקן.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // קבל כותרת, ולאחר מכן העבר את הכותר לפונקציה ().getTitle (). לאחר מכן (פונקציה (כותרת) {// אמת כותרת (כותרת).should.be.equal ("מנהל התקן אינטרנט - דף מבחן הדרכה "); // uncomment עבור ניפוי באגים במסוף // console.log ('כותרת דף נוכחית:' + כותרת);});}); //" וו "להפעלה לאחר כל הבדיקות בבלוק זה לאחר (פונקציה (נעשה) {driver.end (done);});});

תצפיות:

• ראשית עליך לשים לב שסקריפט הבדיקה כתוב ב- JAVASCRIPT (מסתיים בסיומת.js).

• המבנה הבסיסי כמעט זהה לכל תסריטי הבדיקה.

  • הערות בכותרת (//)
  • ספריות חובה
  • הגדרת אפשרויות (אופציונלי)
  • הוק: טען מנהל התקן דפדפן
  • Suite Test (תאר)
  • מפרט בדיקה (יכול להיות הרבה מפרטים בסוויטה)
  • וו: לנקות

• חבילת הבדיקות מתחילה בפונקציית לתאר אשר לוקחת שני פרמטרים:

  • מחרוזת - תיאור חבילת הבדיקה

    • "בדוק את הדף עבור מילה נכונה"
    • "אמת את פעולות לחצן הבחירה"

  • פונקציה - בלוק קוד לביצוע

    לתאר ('תיאור חבילת הבדיקה', פונקציה () {});

• חבילת הבדיקה תכלול מפרט בדיקה אחד או יותר (מפרט)

• מפרט מתחיל בפונקציה שלה שלוקחת שני פרמטרים:

  • מחרוזת - תיאור מפרט הבדיקה

    • "צריך להיות טקסט הקישור והכתובת הקישור הנכונים"
    • "צריך להכיל מילה נכונה (סיפון העתקה)
  • פונקציה - בלוק קוד לביצוע
  • it ('תיאור מפרט הבדיקה', פונקציה () {});
• מפרט מכיל ציפייה אחת או יותר הבודקת את מצב הקוד

• אלה נקראים קביעות

  ספריית "צריך" מספקת את הטענות

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

  • דוגמאות:

    • מצא טקסט בדף ואמת את הטקסט
    • אכלס טופס ושלח
    • אמת CSS של אלמנט

בואו נסתכל מקרוב על הדוגמה עם הערות

טען את הספריות הנדרשות: מנהל התקן אינטרנט IO וצריך.

// ספריות נדרשות

var webdriverio = require ('webdriverio'), should = require ('should');

הגדר את חבילת הבדיקה. החבילה הזו נקראת: "מבחן כותרת עבור מנהל התקן אינטרנט IO - אתר דף מבחן הדרכה"

// בלוק או חבילת סקריפט בדיקה

לתאר ('מבחן כותרת למנהלי אינטרנט IO - אתר דף מבחן הדרכה', פונקציה () {…});

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

// הגדר פסק זמן ל- 10 שניות

פסק זמן זה (10000);

חובה לטעון את מנהל ההתקן של הדפדפן לפני הפעלת המפרט "המפרט". מנהל ההתקן של Firefox נטען בדוגמה זו.

// ווי לרוץ לפני בדיקות

before (function (done) {// טען את מנהל ההתקן עבור מנהל הדפדפן = webdriverio.remote ({winsCapabilities: {browserName: 'firefox'}}); driver.init (done);});

הגדר את מפרט הבדיקה.

// מפרט בדיקה - "מפרט"

it ('צריך לטעון דף וכותרת נכונים', פונקציה () {…});

טען את דף האתר

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

קבל כותרת, ולאחר מכן העבר את הכותרת לתפקוד ()

.getTitle (). ואז (פונקציה (כותרת) {

… });

אמת את הכותרת באמצעות ספריית הצהרת הצורך.

(כותרת).should.be.equal ("IO מנהל התקן אינטרנט - דף בדיקה הדרכה");

חבר לעזוב ולנקות את הנהג בסיום.

// "וו" להפעלה לאחר כל הבדיקות בבלוק זה

after (function (done) {driver.end (done);});

שלב 3: הפעל את סקריפט הבדיקה

עכשיו נראה מה סקריפט הבדיקה עושה כשהוא פועל.

התחל תחילה את שרת Selenium Stand Alone:

• עבור Windows השתמש בשורת הפקודה (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• עבור Mac או Linux, פתח מסוף:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• ראה צילום מסך למעלה

הפעל את סקריפט הבדיקה הבא:

• עבור Windows השתמש בשורת הפקודה (cmd):

  • מוקה
  • # מורה הדרכה1.js

• עבור Mac או Linux, פתח מסוף:

  • מוקה
  • $ mocha tutorial.js
• ראה צילום מסך למעלה

אז מה קרה?

מוקה מפעיל את התסריט "tutorial1.js". מנהל ההתקן הפעל את הדפדפן (Firefox), טען את הדף ואימת את הכותרת.

שלב 4: דוגמא לאתר אינטרנט

כל הדוגמאות מופעלות נגד אתר זה.

אתר הדוגמה ממוקם בכתובת: Web Driver IO Tutorial Test Page

ניתן להוריד את כל סקריפטים לבדיקה מ- github.

שלב 5: דוגמאות ספציפיות

כל הקוד זמין ב- github: מדריך IO של מנהל התקן אינטרנט ב- github

• אמת קישור וטקסט קישור ברשימה לא מסודרת - "linkTextURL1.js"

  • לרשימה הלא מסודרת יש והקישור הוא פריט הרשימה הרביעית.
  • כתובת האתר צריכה להיות "https://tlkeith.com/contact.html"

// אמת טקסט הקישור צור קשר

it ('צריך להכיל טקסט קישור צור קשר', function () {driver driver.getText ("// ul [@id = 'mylist']/li [4]/a"). לאחר מכן (function (link) {console.log ('נמצא קישור:' + קישור); (קישור).should.equal ("צור קשר");});}); // אמת את צור קשר כתובת האתר..then (פונקציה (קישור) {(קישור).should.equal ("https://tlkeith.com/contact.html"); console.log ('נמצאה כתובת URL:' + קישור);});});

• אמת טקסט זכויות יוצרים - "Copyright1.js"

  • זכויות היוצרים נמצאות בכותרת התחתונה דוגמה זו מציגה 2 דרכים שונות לאתר את טקסט זכויות היוצרים:

    • על ידי בורר האלמנטים כ
    • באמצעות xpath כבורר האלמנטים

// אמת טקסט של זכויות יוצרים באמצעות מזהה כבורר רכיבים

זה ('צריך להכיל טקסט של זכויות יוצרים', פונקציה () {return driver.getText ("#copyright"). ואז (function (link) {console.log ('Copyright found:' + link); (link).should. שווה ("טוני קית - tlkeith.com @ 2015 - כל הזכויות שמורות.");});}); // אמת טקסט של זכויות יוצרים באמצעות xpath כבורר רכיבים ((צריך להכיל טקסט של זכויות יוצרים), function () {return driver.getText ("// footer/center/p"). ואז (function (link) {console.log ('נמצא זכויות יוצרים:' + קישור); (קישור).should.equal ("טוני קית - tlkeith.com @ 2015 - כל הזכויות שמורות.");});});

• אוכלוס שדות טפסים ושלח - "formFillSubmit1.js"

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

  • דוגמה זו מציגה 3 שיטות למילוי שדה הזנת שם פרטי:

    • לפי מזהה
    • על ידי xpath מהקלט
    • על ידי xpath מתוך טופס-> קלט
  • מראה גם כיצד לנקות שדה קלט

// הגדר את השם הפרטי באמצעות מזהה ל: טוני

it ('צריך להגדיר שם פרטי לטוני', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). לאחר מכן (function (e) {(e).should.be.equal ("טוני"); console.log ("שם פרטי:" + ה);});}); // נקה את השם הפרטי באמצעות id it ('צריך לנקות שם פרטי', פונקציה () {return driver.clearElement ("#fname").getValue ("#fname"). לאחר מכן (פונקציה (e) {(e).should.be.equal (""); console.log ("שם פרטי:" + ה);});}); // הגדר את השם הפרטי באמצעות xpath מהקלט ל: Tony it ('צריך להגדיר שם פרטי לטוני', פונקציה () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). ואז (פונקציה (e) {(e).should.be.equal ("טוני"); console.log ("שם פרטי:" + ה);});}); // נקה את השם הפרטי באמצעות xpath מהקלט אותו ('צריך לנקות שם פרטי', פונקציה () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). ואז (פונקציה (e) {(e).should.be.equal (" "); console.log (" שם פרטי: " + e);});}); // הגדר את השם הפרטי באמצעות xpath מהטופס ל: Tony it ('צריך להגדיר שם פרטי לטוני', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," טוני ").getValue (" // form [@id = 'search-form']/input [1] "). ואז (פונקציה (e) {(e).should.be.equal ("טוני"); console.log ("שם פרטי:" + ה);});}); // הגדר את שם המשפחה באמצעות id ל: Keith it ('צריך להגדיר את שם המשפחה ל- Keith', פונקציה () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). (פונקציה (e) {(e).should.be.equal ("קית"); console.log ("שם משפחה:" + ה);});}); // שלח טופס והמתן לתוצאות חיפוש זה ('צריך לשלוח טופס ולחכות לתוצאות', function () {return driver.submitForm ("#search-form"). לאחר מכן (function (e) {console.log (' שלח טופס חיפוש ');}).waitForVisible ("#תוצאות חיפוש", 10000). לאחר מכן (פונקציה (ה) {console.log (' נמצאו תוצאות חיפוש ');});});

• לחץ על הצג/הסתר כפתור ואמת טקסט - "showHideVerify1.js"

  • הטקסט נמצא ברכיב הצגה/הסתרה. הכפתור שולט במדינה.

  • דוגמה זו מראה:

    • לחץ על הכפתור כדי להרחיב
    • המתן עד שהאלמנט יהיה גלוי (מורחב)
    • אמת טקסט (סיפון העתקה)

// לחץ על כפתור "מידע נוסף" ואמת טקסט ברכיב מורחב

it ('צריך ללחוץ על כפתור מידע נוסף ולאמת טקסט', פונקציה () {return driver.click ("#moreinfo"). לאחר מכן (function () {console.log ('לחץ על לחצן מידע נוסף');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). לאחר מכן (פונקציה (ה) {console.log ('טקסט:' + e); (ה).should.be.equal ("הכל טוב הולך כאן!");});});

• אמת שגיאות שדה טופס - "formFieldValidation.js"

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

  • דוגמה זו מראה:

    אמת את הודעות הטקסט השגיאות ואמת את המיקום (מיקום הרשימה לא מסודר)

זה ('צריך להכיל 5 שגיאות: ראשון/אחרון/כתובת/עיר/מדינה', function () {

נהג חוזר.getText ("// ul [@class = 'alert alert-danger']/li [1]"). לאחר מכן (פונקציה (ה) {console.log ('נמצאה שגיאה:' + e); (e).should.be.equal ('אנא הזן שם פרטי');}).getText ("// ul [@class = 'alert alert-danger']/li [2]"). לאחר מכן (פונקציה (ה) {console.log ('נמצאה שגיאה:' + e); (e).should.be.equal ('אנא הזן שם משפחה');}).getText ("// ul [@class = 'alert alert-danger ']/li [3] "). לאחר מכן (פונקציה (ה) {console.log (' נמצאה שגיאה: ' + e); (ה).should.be.equal (' אנא הזן כתובת ');}). getText ("// ul [@class = 'alert alert-danger']/li [4]"). ואז (פונקציה (e) {console.log ('נמצאה שגיאה:' + e); (e).should.be.equal ('אנא הזן עיר');}).getText ("// ul [@class = 'alert alert-danger']/li [5]"). לאחר מכן (פונקציה (ה) {console.log ('נמצאה שגיאה:' + ה); (ה).should.be.equal ('אנא הזן מצב');}); });

• נתוני לולאה לאימות קישור/טקסט/דף URL - "LoopDataExample1.js"

  • דוגמה זו מראה: השתמש במערך של נתוני JSON כדי לאחסן את הקישור והשם, ולאחר מכן חזר על אותו

    • אמת כל טקסט וקישור של כתובת אתר
    • לחץ על הקישור וטען את הדף

// נתוני קישור - קישור וטקסט

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," name ": "debu gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // הלוך דרך כל linkArray linkArray.forEach (פונקציה (ד) {it ('צריך להכיל טקסט/קישור ואז עבור לדף -' + d.name, function () {driver driver // ודא שאתה נמצא בדף ההתחלה.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). לאחר מכן (פונקציה (כותרת) {// אמת כותרת (כותרת).should.be.equal ("מנהל התקן אינטרנט - Tutorial Test Page ");}) // מצא את כתובת האתר.getAttribute ('a =' + d.name," href "). לאחר מכן (פונקציה (קישור) {(קישור).should.equal (d.link); console.log ('נמצאה כתובת URL:' + d.link);}) // עבור לדף כתובת האתר וודא שהוא קיים. לחץ ('a =' + d.name).waitForVisible ("#js-repo-pjax- container ", 10000).then (function () {console.log ('נמצאה דף Github');});});});

• לולאה של נתונים סטטיים לאכלוס שדות טפסים - "loopDataExample2.js"

  • דוגמה זו מראה: השתמש במערך של נתוני JSON לאחסון שם פרטי/משפחה

    • חפש את הנתונים כדי לאכלס שדות טפסים ולאחר מכן שלח את הטופס
    • המתן לדף התוצאות
    • אמת את שם המשפחה / שם המשפחה בדף התוצאות

// מערך נתונים - firstName ו- lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstname ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // לגלול בין כל dataArray dataArray.forEach (פונקציה (ד) {it ('צריך לאכלס שדות, דף סיכום', פונקציה () {נהג החזרה // ודא שאתה נמצא בדף ההתחלה. Url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). לאחר מכן (פונקציה (כותרת) {// אמת כותרת (כותרת).should.be.equal ("IO מנהל התקן אינטרנט - דף בדיקת הדרכה");}).setValue ("#fname", d.firstName).getValue ("#fname"). לאחר מכן (פונקציה (e) {(e).should.be.equal (d.firstName); console.log ("First שם: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). ואז (פונקציה (e) {(e).should.be.equal (d.lastName); console.log ("שם משפחה:" + ה);}).submitForm ("#search-form"). לאחר מכן (function () {console.log ('שלח טופס חיפוש');}).waitForVisible ("#תוצאות חיפוש", 10000). לאחר מכן (function () {console.log ('נמצא דף תוצאות');}).getText ("// h1"). לאחר מכן (function (קישור) {console.log ('טקסט נמצא:' + קישור); (קישור).should.equal ("ברוכים הבאים" + d.firstName + "" + d.lastName + ".");});});});

• אמת מאפייני CSS - "cssValidation1.js"

  • דוגמה זו מראה כיצד:

    • אמת את המאפיינים הבאים של CSS:

      • צֶבַע
      • ריפוד (עליון, תחתון, ימין, שמאל)
      • צבע רקע

זה ('צריך להכיל צבע נכון של טקסט שגיאה', פונקציה () {return driver.getCssProperty ("// ul [@class = 'alert alert-danger']/li [1]", "color"). ואז (function (result) {console.log ('צבע נמצא:' + result.parsed.hex + "או" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

זה ('צריך להכיל ריפוד נכון בתא הטבלה', פונקציה () {

נהג חוזר // ריפוד: שמאל למעלה שמאל למטה.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). לאחר מכן (function (תוצאה) {console.log ('padding-top נמצא:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). ואז (פונקציה (תוצאה) {console.log ('padding-bottom נמצא:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- ואז "(פונקציה (תוצאה) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). ואז (function (result) {console.log ('padding-left found: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

זה ('צריך להכיל את צבע הרקע הנכון בכותרת הטבלה', function () {

נהג החזר.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). לאחר מכן (function (result) {console.log ('color background found:' + result.parsed. hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

שלב 6: טיפים וטריקים

• איתור באגים:

  • הפעל את הרישום ברמת הנהג לקבלת באגים נוספים וליצירת יומנים.

    • הגדר logLevel ל'מילולי '
    • הגדר logOutput לשם הספרייה ('יומנים')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {winsCapabilities: {browserName: 'firefox'}});

• השתמש ב- console.log (), באגים (), getText () כדי לבצע איתור באגים.

  • console.log () - השתמש בו כדי להציג מידע לקביעת המצב.
  • debug () - השתמש בהפסקת דפדפן/סקריפט עד לחיצה על enter בשורת הפקודה.

  • getText () - השתמש כדי לוודא שאתה מקיים אינטראקציה עם האלמנט הנכון.

    מועיל במיוחד עם ביטויי xpath

// לחץ על הפריט 3 מהרשימה

זה ('צריך ללחוץ על פריט 3 מהרשימה', פונקציה () {// השתמש ב- getText () כדי לוודא שה- xpath תקין עבור מנהל ההתקן return element.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). לאחר מכן (פונקציה (קישור) {// השתמשו ב- console.log () כדי להוציא את console.log ('נמצא קישור:' + קישור); (קישור).should.equal ("פריט 3");}) // השתמש באגים () כדי לעצור פעולה כדי לראות מה קורה בדפדפן.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('לחץ על הקישור');}) // המתן עד להופעת טופס חיפוש בגוגל.waitForVisible ("#tsf", 20000).then (פונקציה (ה) {console.log ('נמצאו תוצאות חיפוש');});});

• השתמש במשתנה סביבתי כדי לשנות את הדפדפן באופן דינמי:

  • השתמש במשתנה הסביבה SELENIUM_BROWSER כדי להפעיל דפדפן אחר מבלי לשנות את סקריפט הבדיקה בכל פעם.
  • דורש שינוי קידוד קל לתמיכה.

שינויי קוד:

// טען את מנהל ההתקן לדפדפן

driver = webdriverio.remote ({winsCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

דפדפנים נתמכים:

• Internet Explorer - IE 8+ (Windows בלבד)

  SELENIUM_BROWSER = כלומר מוקה

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = מוקה של Firefox

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = מוקה כרום

• אופרה 12+

  SELENIUM_BROWSER = מוקה אופרה

• ספארי

  SELENIUM_BROWSER = מוקה ספארי

בדיקה:

• עבור Windows השתמש במעטפת git bash:

  • SELENIUM_BROWSER = מוקה כרום
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• עבור Mac או Linux, פתח מסוף:

  • SELENIUM_BROWSER = מוקה כרום
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• בדיקה רספונסיבית:

  • קבע נקודות שבירה בהתבסס על פרויקט או מסגרת (כלומר bootstrap).

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

    • שולחן עבודה - 1200 פיקסלים
    • לוח - 992 פיקסלים
    • מובייל - 768 פיקסלים

  • פיתוח פקודה לשימוש חוזר לקריאת משתנה הסביבה והגדרת גודל הדפדפן.

    ראה דוגמה למטה

  • התקשר לפקודה הניתנת לשימוש חוזר בתסריט הבדיקה שלך.

// קוד לשימוש חוזר - ספרייה // קטע קוד אם (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } אחרת אם (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } אחרת אם (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// סקריפט בדיקה

before (function (done) {winsize = common.getWindowSizeParams (); … driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // הגדר את גודל החלון שהוא ('צריך להגדיר את גודל החלון', function (done) {// רק הרוחב משנה driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• פקודות לשימוש חוזר (פקודות מותאמות אישית):

  • ניתן להרחיב בקלות את מנהל ההתקן IO.
  • אני אוהב להכניס את כל הפקודות הניתנות לשימוש חוזר בספרייה. (אולי זה בית ספר ישן אבל זה עובד!)

common/commonLib.js

// verifyLastNameCheckError ()

// // תיאור: // מאמת את הודעת השגיאה של אימות טופס שם המשפחה // // קלט: // מספר - אינדקס שגיאה (1-5) // פלט: // אין // var verifyLastNameCheckError = function () { var idx = ארגומנטים [0], callback = ארגומנטים [argument.length - 1]; זה.getText ("// ul [@class = 'alert alert-danger']/li [" + idx + "]", function (err, e) {console.log ('נמצאה שגיאה:' + e); (ה).should.be.equal ('אנא הזן שם משפחה');}).call (התקשרות חוזרת); }; // לייצא את הפונקציה module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

להלן השינויים הספציפיים הדרושים בכדי לקרוא לפונקציה לשימוש חוזר

עיין formFieldValidation.js לקבלת דוגמה מלאה לעבודה

// דורשים את הפקודה לשימוש חוזר - CommonLib

common = require ('./ Common/CommonLib'); … // לאגד את הפקודות driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); זה ('צריך להכיל 2 שגיאות: שם פרטי/שם משפחה', function () {// התקשר לנהג הפונקציות הרב פעמיות.verifyFirstNameError (1);.verifyLastNameError (2);});

• מבנה קובץ/מדריך הפרויקט:

  • להלן מבנה פרויקט אופייני:

    • "פרוייקט" - ספריית הפרויקטים הראשית

      • README.md - Readme לפרויקט גלובלי

      • "משותף" - ספרייה לפונקציות גלובליות המשותפות לכל הפרויקטים

        • common -lib.js - ספריית פונקציות גלובלית
        • README.md - Readme לפונקציות גלובליות

      • "Product1" - ספריית המוצר 1

        • test-script1.js
        • test-script2.js

        • "משותף" - ספרייה לפונקציות מקומיות לפרויקט 1

          • prod1 -lib.js - ספריית פונקציות מקומית לפרויקט 1
          • README.md - readme עבור פונקציות מקומיות לפרויקט 1

      • "Product2"-ספריית המוצר 2test-script1.jstest-script2.js

        • "משותף" - ספרייה לפונקציות מקומיות לפרויקט 2

          • prod2 -lib.js - ספריית פונקציות מקומית לפרויקט 2
          • README.md - readme עבור פונקציות מקומיות לפרויקט 2

• חלק את סקריפטים לבדיקה למספר קבצים:

  • להלן דוגמא לשימוש במספר קבצים:

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

• התקשרות חזרה VS. הבטחות:

  • גרסה 3 של IO Driver IO תומכת הן בחיוג להתקשרות והן בהבטחות.

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

התקשרות חוזרות

// הגדר/אימת שם פרטי/שם משפחה באמצעות התקשרות חזרה

it ('צריך להגדיר/לאמת שם פרטי/שם משפחה באמצעות שיחות חוזרות', function (done) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).should.be.equal ("טוני"); console.log ("שם פרטי:" + e); driver.setValue ("#lname", "Keith", פונקציה (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("שם משפחה:" + e); done ();});});});});});

הבטחות

// הגדר/אימת שם פרטי/שם משפחה באמצעות הבטחות

it ('צריך להגדיר/לאמת שם פרטי/שם משפחה באמצעות הבטחות', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). ואז (פונקציה (ה) {(ה).should.be.equal ("טוני"); console.log ("שם פרטי:" + ה);}).setValue ("#lname", "Keith").getValue ("#lname"). ואז (פונקציה (e) {(e).should.be.equal ("קית"); console.log ("שם משפחה:" + ה);});});

שלב 7: משאבים נוספים

להלן מספר משאבים נוספים לעיונך:

• קבוצות דיון (Gitter)

  • קבוצת דיון IO של מנהל התקן אינטרנט
  • קבוצת דיון מוקה

• פרויקטים מעניינים אחרים

  • Supertest - טענות
  • חי - טענות

שלב 8: סיכום

הקדשתי זמן לחקר הטכנולוגיות לשימוש לפרויקט שלי. התחלתי במקור עם Selenium Web Driver אך עברתי להשתמש ב- IO של Driver Web. נראה שהיה קל יותר להשתמש ב- IO של מנהל התקן האינטרנט והרחבה הרבה יותר (לפחות התיעוד להרחבה - פקודות לשימוש חוזר היה טוב יותר).

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

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

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

אני מקווה שמאמר זה שימושי והדוגמאות ברורות ואינפורמטיביות.

אנא יידע אותי אם יש לך שאלות או הערות.

תודה, טוני קית '