סלניום עם ג'אווה סקריפט – חלק ב

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

לפני שנתחיל לכתוב את הבדיקה הראשונה שלנו, בואו נראה את מה נבדוק.

בכתובת הבאה: https://atidcollege.co.il/Xamples/bmi/ תוכלו לראות מחשבון BMI אשר יודע לחשב מדד מסת גוף, זהו קובץ HTML שיצרתי עם פונקציית JS היודעת לחשב את הנתונים בלחיצת כפתור ולזרוק לנו התוצאה בשדה מסויים, ניתן לראותו גם כאן בפוסט זה:

* למען פשטות קוד ה-HTML , את הבדיקות שלנו נבצע על הדף המקורי (לדף זה נכנס עם ה-driver.get) שנתתי בקישור למעלה.

נגדיר 2 בדיקות. לבדיקה הראשונה נכניס ערכים שגויים ונבדוק את שורת ה-warning שהמחשבון יזרוק – Please Fill in all fields correctly.  לבדיקה השנייה נכניס ערכים תיקניים ונראה את התוצאה שהמחשבון יפלוט – That you are healthy.

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

var assert = require('assert');                 // asset התממשקות לספריית
var webdriver = require('selenium-webdriver');  // התממשקות לספריות של סלניום
var By = webdriver.By;                          // By קיצור דרך למתודת
var expect = require('chai').expect;            // Chai התממשקות לספריית

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

describe('My Test Suite', function () {
   it('My First Test', function () {
      //  הגדרת הסטפים של הפונקציה הראשונה
   });

   it('My Second Test', function () {
      // הגדרת הסטפים של הפונקציה השנייה
   });
});

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

beforeEach(function () {
   // מימוש הפונקציה 
    });
    
afterEach(function () {
   // מימוש הפונקציה    
});

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

לצורך העניין, הדוגמא שנתתי בקוד היא דוגמא ל-assert פשוט (אולי הפשוט ביותר) , ה-OK והמקביל של ב-Chai

assert.ok(text == 'Some Text');

יהיה שווה ערך ל

expect(text).to.be.equal('Some Text');

כמו כבר ציינתי, נבדוק 2 מקרים:

1. במקרה הראשון נכניס ערכים שגויים למחשבון ה-BMI (ערכי מחרוזות של תווים במקום מספרים) ונבדוק כי אנו מקבלים הודעת שגיאה

2. במקרה השני נכניס למחשבון ערכים וולידיים ונבדוק את השדה בו מופיע פלט התוצאה על ידי שימוש ב-expect().to.contain  (הכלה של טקסט)

ובסופו של דבר, תוכנית הבדיקות שלנו תראה כך:

var assert = require('assert');
var webdriver = require('selenium-webdriver');
var By = webdriver.By; 
var expect = require('chai').expect; 

describe('BMI Calc Page', function () {
    
    var driver;
    beforeEach(function () {
        driver = new webdriver.Builder().
        withCapabilities(webdriver.Capabilities.chrome()).
        build();
        
        driver.get('http://blog.yoniflenner.net/Samples/BMICalc/');
    });
    
    afterEach(function () {
        driver.quit();
    });
    

   it('BMI Test01 Warning', function (done) {
        var expectedValue = 'Please Fill in all fields correctly !';
        
        driver.findElement(By.id('weight')).sendKeys('I dont tell you');
        driver.findElement(By.id('hight')).sendKeys('I dont tell you');
        driver.findElement(By.id('calculate_data')).click();
        
        driver.findElement(By.id('new_input')).getText('value').then(function (text) {
            expect(text).to.be.equal(expectedValue);
            done();
        });
    });
    
    
    it('BMI Test02 Healthy', function (done) {
        var expectedValue = 'healthy';
        
        driver.findElement(By.id('weight')).sendKeys('70');
        driver.findElement(By.id('hight')).sendKeys('180');
        driver.findElement(By.id('calculate_data')).click();
        
        driver.findElement(By.id('bmi_means')).getAttribute('value').then(function (text) {
            expect(text).to.contain(expectedValue);
            done();
        });
    });
    
    
});

עוד כמה מילים לגביי השימוש ב-done שאנו רואים בקוד שלנו. מכיוון ש-java script היא שפה שרצה על Single Thread , תהיה לנו בעיה להריץ פקודות בסדר מסויים, הן לא ירוצו בצורה אסינכרונית (לפי סדר הקריאה שלהן), למשל במידה ונשלח את פקודת ה-click ואחריה את פקודת ה-assret , יכול להיווצר מצב שבו ה-assert יפול בגלל שהוא התבצע במקביל לפקודת ה-click , שזה אומר עוד לפני ש-click יצר איזשהו event שגרם לפליטת הודעה – אותה הודעה שנרצה אח"כ לבדוק ב-assertion.

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