Δημιουργήστε Web Test σε AJAX sites με το Visual Studio Team Suite 2005 και τον Fiddler 2
Εάν έχετε δουλέψει με το Visual Studio Team Suite 2005 (εάν δεν έχετε αυτή τη version του visual studio μπορείτε να κατεβάσετε την trial από το http://www.microsoft.com/downloads/details.aspx?FamilyID=5677DDC4-5035-401F-95C3-CC6F46F6D8F7&displaylang=en), σίγουρα έχετε δεί και το Test Project Template.
Σε projects αυτού του είδους μπορείτε να δημιουργήσετε διαφόρων ειδών tests όπως Unit Tests, Web Tests, Load Test, Ordered Tests ή Manual Tests. Σε αυτή τη δημοσίευση θα ασχοληθούμε με τη δημιουργία Web Tests σε AJAX Enabled Web Sites.
Τι είναι ένα Web Test?
Είναι ένα functional test (λειτουργικός έλεγχος) σε Web οθόνες, δηλαδή έλεγχος της σωστής λειτουργίας των σελίδων μιας Web εφαρμογής. Αν για παράδειγμα θέλουμε να ελέγξουμε αν η λειτουργία login δουλεύει σωστά σε ένα Web Application, τότε στην απλούστερη περίπτωση, πρέπει να κάνουμε δοκιμαστικά login με πολλά usernames και passwords (άλλοτε σωστά και άλλοτε λανθασμένα) και να δούμε πώς αποκρίνεται το σύστημα.
Δημιουργία του "προς δοκιμή" AJAX Enabled Web Site
Θα υλοποιήσουμε ένα πολύ απλό AJAX web site με μία μόνο σελίδα που θα επιτελεί τη λειτουργία Login. Η σελίδα Login.aspx θα έχει την ακόλουθη φόρμα:
<form id="_mainForm" runat="server">
<asp:ScriptManager ID="_scriptManager" runat="server" />
<div>
Ονομα: <asp:TextBox ID="_userNameTextBox" runat="server"></asp:TextBox>
Κωδικός: <asp:TextBox ID="_passwordTextBox" runat="server"></asp:TextBox>
<br />
<asp:Button ID="_loginButton" runat="server" Text="Εγγραφή" OnClick="_loginButton_Click" />
<asp:Panel ID="_loginSuccess" runat="server" Visible="false">Καλωσόρισες <asp:Label ID="_userNameLabel" runat="Server" /></asp:Panel>
<asp:Panel ID="_loginFailedPanel" runat="server" Visible="false">Λάθος στοιχεία, παρακαλώ ξαναδοκιμάστε</asp:Panel>
</div>
</form>
Ενώ ο server side κώδικας θα είναι κάπως έτσι:
protected void Page_Load(object sender, EventArgs e)
{
this._loginSuccess.Visible = false;
this._loginFailedPanel.Visible = false;
}
protected void _loginButton_Click(object sender, EventArgs e)
{
if ((this._userNameTextBox.Text == "nikos") &&
(this._passwordTextBox.Text == "makris"))
{
this._userNameLabel.Text = "nikos";
this._loginSuccess.Visible = true;
}
else
{
this._loginFailedPanel.Visible = true;
}
}
Οπως βλέπετε δεν χρησιμοποιούμε (ακόμα) τίποτε από το AJAX -πέρα από το _scriptManager control, ενώ ο κώδικας είναι πάρα πολύ απλός, παρατηρήστε ότι έχουμε (χάρη ευκολίας) ένα μόνο hardcoded όνομα και κωδικό χρήστη που θεωρούμε valid -τυχαία επιλεγμένο...
Προσθέστε στο solution με αυτό το web site ένα Test Project και στη συνέχει κάντε δεξί κλίκ και επιλέξτε "Add->Web Test".
Δημιουργείται έτσι ένα web test (με όνομα WebΤest1) και ανοίγει ο Internet Explorer. Παρατηρήστε to "Web Test Recorder" pane στα αριστερά. Κάνωντας κλήση της σελίδας που μόλις φτιάξαμε (http://localhost/AJAXEnabledWebSite/Login.aspx), βλέπουμε ότι καταγράφετε η κλήση (αριστερά).
Δώστε το σωστό όνομα και κωδικό και πατήστε το πλήκτρο "Είσοδος". Παρατηρούμε ότι καταγράφονται και το "Form port parameters".
Τώρα μπορείτε να σταματήσετε την καταγραφή (πατήστε το κουμπί Stop Recording πάνω από το Web Test Recorder). Μόλις δημιουργήσαμε ένα απλό web test. Θα το εμπλουτίσουμε με ένα απλό Validation Rule για να δούμε ότι η εφαρμογή μας συμπεριφέρετσι σωστά. Κάντε δεξί κλίκ στο δεύτερο βήμα του Web Test και επιλέξτε "Add Validation Rule..."
Στο παράθυρο που εμφανίζεται επιλέξτε "Find Text" και στο αντίσοιχο πεδίο (Find Text στα δεξιά) βάλτε τη λέξη "Καλωσόρισες"
Αυτός ο απλός έλεγχος θα μας δείξει αν το σύστημα συμπεριφέρετε σωστά όταν κάνουμε login με σωστό όνομα και κωδικό. Μπορείτε να τρέξετε το test για να διαπιστώσετε ότι "περνάει" επιτυχώς (παρατηρήστε το "Test Results" toolbox κάτω αριστερά.
Μέχρι εδώ όλα φαίνονται καλά. Αν όμως χρησιμοποιήσουμε το UpdatePanel του AJAX στην aspx σελίδα:
<form id="_mainForm" runat="server">
<asp:ScriptManager ID="_scriptManager" runat="server" />
<asp:UpdatePanel ID="_updatePanel" runat="server">
<ContentTemplate>
<div>
Ονομα: <asp:TextBox ID="_userNameTextBox" runat="server"></asp:TextBox>
Κωδικός: <asp:TextBox ID="_passwordTextBox" runat="server"></asp:TextBox>
<br />
<asp:Button ID="_loginButton" runat="server" Text="Εγγραφή" OnClick="_loginButton_Click" />
<asp:Panel ID="_loginSuccess" runat="server" Visible="false>Καλωσόρισες <asp:Label ID="_userNameLabel" runat="Server" /></asp:Panel>
<asp:Panel ID="_loginFailedPanel" runat="server" Visible="false">Λάθος στοιχεία, παρακαλώ ξαναδοκιμάστε</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
ώστε να έχουμε partial page update, τότε άν επαναλάβουμε τη διαδικάσία εγγραφής του Web Test θα δούμε ότι ΔΕΝ ΚΑΤΑΓΡΑΦΕΤΕ το postback του _submitButton.
Αααααα.... να μια αδυναμία του recorder, τι κάνουμε τώρα? Πώς θα καταγράψουμε ένα Web Test σε AJAX sites?
Δύο λύσεις:
Προφανώς πιο άμεση και πιο απλή λύση είναι η δεύτερη, και αυτή θα παρουσιάσουμε στις επόμενες παραγράφους.
Χρήση του Fiddler2 για την καταγραφή ενός Web Test
Πριν προσωρήσουμε πρέπει να τονίσω ότι το εργαλέιο Fiddler είναι ένας HTTP Debugging Proxy. Κάνει πάρα πολλά και ενδιαφέροντα πράγματα, ένα από αυτά είναι και η καταγραφή Web κλήσεων και η αποθήκευσή τους σαν Web Test του Visual Studio 2005.
Αφού κατεβάσετε και εγκαταστήσετε το Fiddler2, κάντε κλίκ στο εικόνίδιο "Fiddler 2" (τυπικά βρίσκετε στο "All Programs").
Στα αριστερά (το κίτρινο Pane) είναι αυτό στο οποίο καταγράφονται οι Web κλήσεις. Αν ανοίξετε έναν Internet Explorer στο "Tools->Internet Options-Connections-LAN Settings" και πατήσετε το πλήκτρο Advanced
θα δείτε ότι ότι έχει ορισθεί ένα Proxy στο Port 8888, αυτός έιναι ο Fiddler.
Tip: Εαν χρησιμοποιείτε Internet Explorer 7 και θέλετε να καταγράφετε τις Web κλήσεις προς τον localhost με το Fiddler, τότε θα πρέπει να ΜΗΝ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ το "localhost" στις http κλήσεις σας. Αντί αυτού χρησιμοποιείστε το όνομα του υπολογιστή σας. Ετσι αντί για http://localhost/... πρέπει να γράψετε http://<COMPUTER_NAME>/... Τούτο διότι ο Internet Explorer 7 κάνει πάντα "Bypass proxy settings for local addresses" ακόμα και αν στο παρακάτω παράθυρο επιλογών (Tools->Internet Options->Connections->Lan Settings) έχουμε unchecked αυτή την επιλογή.
Οπως μπορείτε να δείτε by default ο fiddler κάνει κλήση στο www.fiddler2.com. Επιλέξτε αυτή το entry στα αριστερά και πατήστε Delete. Εν συνεχεία ανοίξτε έναν Internet Explorer και καλέστε το AJAX enabled web site που δημιουργήσαμε http://<COMPUTER_NAME>/AJAXEnabledWebSite/Login.aspx.
Στο παράθυρο του fiddler θα εμφανιστούν τα ακόλουθα:
(ο υπολογιστής μου ονομάζεται Informatics και χρησιμοποιώ Internet Explorer 7, για αυτό και τα καταγραφόμενα URLs έχουν αυτό το όνομα και όχι Localhost).
Τώρα ήρθε η ώρα να δούμε ότι ο Fiddler πράγματι καταγράφει AJAX Web κλήσεις. Συμπληρώστε τη login φόρμα (όπως πρίν) και πατήστε το κουμπί "Είσοδος", μπορείτε να δείτε ότι ο Fiddler κατέγραψε αυτή την κλήση (η τελευταία στην επόμενη εικόνα).
Ωραία λοιπόν, καταγράψαμε στο Fiddler τις web κλήσεις που θέλαμε, τώρα πώς θα τις σώσουμε σαν ένα Visual Studio Team Suite 2005 Web Test? Πολύ απλά, επιλέξτε τις κλήσεις από το αριστερό κίτρινο pane, και στη συνέχεια "File->Save-Session(s)->as Visual Studio Web Test..."
Δώστε όποιο όνομα θέλετε και πατήστε "Save", στο επόμενο παράθυρο για την επιλογή "Plugins" μην επιλεγετε τίποτε (περισσότερα για τα plugins σε επόμενη δημοσίευση) και πατήστε "ΟΚ"
Τώρα στο Visual Studio, μπορείτε να εισάγετε αυτό το Web Test με την επιλογή "Add->Existing Item". Βάλτε το Validation Rule, Find Text που χρησιμοποιήσαμε και στο παραπάνω παράδειγμα και τρέξτε το test. Αυτό ήταν, δημιουργήσαμε ένα Web Test για το Visual Studio Team Suite 2005 σε ένα AJAX Enabled Web Site με τη βοήθεια του Fiddler 2.
Συμπεράσματα - Επεκτάσεις
Αυτό ήταν ένα απλό demo σχετικά με τα Web Tests, την αδυναμία του Built in recorder του VS 2005 να καταγράψει AJAX Partial Page Updates και ένα work around για αυτό με τη βοήθεια του Fiddler 2. Αυτά που είδαμε δεν ήταν παρά μια σταγόνα στο ωκεανό των όσων πρέπει να γνωρίζουμε για να κάνουμε ένα σωστό και ρεαλιστικό Web Test. Το ViewState και EvenτValidation correlation, τα custom Validation Rules καθώς και η χρήση μίας ή περισσότερων Datasource για τα δεδομένα που κάνουμε post, είναι πράγματα που θα δούμε σε επόμενη δημοσίευση (ελπίζω πολύ σύντομα). Stay tuned...