Δημιουργία ενός διαδικτυακού εγγραφέα (web recorder) για την αυτοματοποίηση των ελεγχών σε διαδικτυακές εφαρμογές

1. ΔΗΜΙΟΥΡΓΙΑ ΕΝOΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΕΓΓΡΑΦΕΑ (WEB
RECORDER) ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ ΕΛΕΓΧΩΝ ΣΕ
ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
Διπλωματικός Φοιτητής:
Νήρας Δημήτριος
ΑΕΜ: 8057
Επιβλέποντες:
Επίκουρος Καθηγητής, Ανδρέας Λ. Συμεωνίδης
Μεταδιδακτορικός Ερευνητής, Κυριάκος Χατζηδημητρίου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ
Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών
Θεσσαλονίκη, Οκτώβριος 2017

2. Κίνητρο
• Μεγάλος αριθμός ιστοσελίδων και διαδικτυακών εφαρμογών
• Ανάπτυξη test ελέγχου (user acceptance/e2e tests)
• Εύρεση των στοιχείων που πρέπει να ελεγχθούν
• Ανάθεση τιμών σε αυτά
• Έλεγχος της εύρυθμης λειτουργίας τους
Αποτέλεσμα: Επίπονη και χρονοβόρα διαδικασία (~25% χρόνου)
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
2
Web Recorder

3. Σκοπός της Διπλωματικής Εργασίας
• Αυτοματοποίηση της διαδικασίας δημιουργίας και ελέγχου των test
• Δημιουργία Chrome extension για την καταγραφή των κινήσεων (Clicks,
Inputs, HTML, CSS, JS, API calls, περιεχόμενο κτλ.)
• Δημιουργία διαδικτυακής εφαρμογής (προγραμματισμός και
επεξεργασία των test, εμφάνιση αποτελεσμάτων κ.ά.)
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
3
Web Recorder
Web Recorder
Automated Website Testing and Monitoring

4. Υπάρχοντα Εργαλεία
• Ghost Inspector
• Sauce Labs
• Selenium
• Sahi
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
4
Web Recorder

5. Web Recorder
• Επέκταση στον Chrome (Chrome
Extension)
• Διαδικτυακή εφαρμογή
▫ Παρασκήνιο (Back-end)
▫ Προσκήνιο (Front-end)
▫ Βάση Δεδομένων (Database)
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
5
Web Recorder
• Καταγραφή Test (Tests Recording)
• Έλεγχος Ιστοσελίδων (Website Testing)
• Έλεγχος Διεπαφών (UI Testing)
• Συνεχής Παρακολούθηση (Continuous
Monitoring)
• Δημιουργία και Διαχείριση test (Build
and Manage tests)

6. Web Recorder – Συνολική Δομή
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
6
Web Recorder

7. Δυνατότητες Επέκτασης
• Διαχείριση χρηστών (σύνδεση – log in, αποσύνδεση – log out)
• Καταγραφή κινήσεων χρήστη (Recording Operations)
• Καταγραφή βημάτων ελέγχου ορθής λειτουργίας (Recording Assertions)
• Αποθήκευση και αποστολή των test
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
7
Web Recorder

8. Δυνατότητες Διαδικτυακής Εφαρμογής - 1
• Διαχείριση χρηστών (εγγραφή, σύνδεση, αποσύνδεση, αλλαγή στοιχείων,
διαγραφή λογαριασμού)
• Εμφάνιση των διαθέσιμων σουιτών και των καταγεγραμμένων test
• Εκτέλεση ενός test (1 ή και περισσότερες φορές) και ολόκληρης σουίτας
• Επεξεργασία των βημάτων (steps) ενός test (λειτουργία, προσδιοριστικό,
περιγραφή, προσθήκη, διαγραφή, αναδιάταξη)
• Αναζήτηση βημάτων κατά την επεξεργασία τους
• Προσθήκη ενός test προς εκτέλεση πριν ή μετά την εκτέλεση ενός
συγκεκριμένου test
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
8
Web Recorder

9. Δυνατότητες Διαδικτυακής Εφαρμογής - 2
• Προβολή ιστορικού εκτελέσεων σε επίπεδο σουίτας και σε επίπεδο test
• Αυτόματη εκτέλεση σουίτας σε καθημερινή βάση
• Επεξεργασία στοιχείων σουίτας (όνομα, συχνότητα αυτόματης εκτέλεσης,
διαγραφή)
• Επεξεργασία στοιχείων test (όνομα, σουίτα, αριθμός εκτελέσεων,
διαγραφή)
• Εμφάνιση στατιστικών εκτελέσεων
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
9
Web Recorder

10. Τεχνολογίες
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
12
Web Recorder

11. Live DEMO
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
13
Web Recorder

12. Αποτελέσματα & Συμπεράσματα
• Εφαρμογή στις ενεργές ιστοσελίδες ‘‘https://cassandra.iti.gr’’,
‘‘https://issel.ee.auth.gr’’, ‘‘https://e-shop.gr’’, ‘‘http://ee.auth.gr’’ κ.ά.
• Δημιουργία 25 test διαφορετικού μεγέθους (5 έως και 35 βήματα) και
λειτουργικότητας
• Παρακολούθηση για 2 εβδομάδες
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
15
Web Recorder

13. Μελλοντική Εργασία
• Λήψη (Download) ενός test
• Προσθήκη περισσότερων επιλογών προγραμματισμού των test
• Προσθήκη βίντεο εκτέλεσης ενός test
• Προσθήκη περιγραφής κατά τη δημιουργία καινούριας σουίτας
• Διαφοροποίηση προγραμματισμένης εκτέλεσης (schedule) test και
σουιτών
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
17
Web Recorder

14. Προβολή και αποθετήρια
• Προβολή της εφαρμογής στην ηλεκτρονική διεύθυνση
‘‘http://snf-766614.vm.okeanos.grnet.gr’’
• Αποθετήριο (repository) επέκτασης Chrome στο GitHub στη διεύθυνση
‘‘https://github.com/AuthEceSoftEng/web-recorder-chrome-plugin’’
• Αποθετήριο (repository) διαδικτυακής εφαρμογής (προσκήνιο -
frontend και παρασκήνιο - backend) στη διεύθυνση
‘‘https://github.com/AuthEceSoftEng/web-recorder-server’’
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
18
Web Recorder

15. Ευχαριστίες
Ευχαριστώ τους επιβλέποντες της Διπλωματικής μου Εργασίας κ. Ανδρέα
Συμεωνίδη και Κυριάκο Χατζηδημητρίου
… και φυσικά εσάς για την προσοχή σας!
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
19
Web Recorder

16. Ερωτήσεις
Οκτώβριος 2017 ΔΗΜΙΟΥΡΓΙΑ ΕΝΟΣ WEB RECORDER ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ TEST ΣΕ ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ
20
Web Recorder