ΔΗΜΙΟΥΡΓΙΑ ΕΝOΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΕΓΓΡΑΦΕΑ (WEB

RECORDER) ΓΙΑ ΤΗΝ ΑΥΤΟΜΑΤΟΠΟΙΗΣΗ ΤΩΝ ΕΛΕΓΧΩΝ ΣΕ

ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ

Διπλωματικός Φοιτητής:

Νήρας Δημήτριος

ΑΕΜ: 8057

Επιβλέποντες:

Επίκουρος Καθηγητής, Ανδρέας Λ. Συμεωνίδης

Μεταδιδακτορικός Ερευνητής, Κυριάκος Χατζηδημητρίου

ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ

ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ

Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών

Θεσσαλονίκη, Οκτώβριος 2017

Κίνητρο

• Μεγάλος αριθμός ιστοσελίδων και διαδικτυακών εφαρμογών

• Ανάπτυξη test ελέγχου (user acceptance/e2e tests)

• Εύρεση των στοιχείων που πρέπει να ελεγχθούν

• Ανάθεση τιμών σε αυτά

• Έλεγχος της εύρυθμης λειτουργίας τους

Αποτέλεσμα: Επίπονη και χρονοβόρα διαδικασία (~25% χρόνου)

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

2

Web Recorder

Σκοπός της Διπλωματικής Εργασίας

• Αυτοματοποίηση της διαδικασίας δημιουργίας και ελέγχου των 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

Υπάρχοντα Εργαλεία

• Ghost Inspector

• Sauce Labs

• Selenium

• Sahi

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

4

Web Recorder

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)

Web Recorder – Συνολική Δομή

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

6

Web Recorder

Δυνατότητες Επέκτασης

• Διαχείριση χρηστών (σύνδεση – log in, αποσύνδεση – log out)

• Καταγραφή κινήσεων χρήστη (Recording Operations)

• Καταγραφή βημάτων ελέγχου ορθής λειτουργίας (Recording Assertions)

• Αποθήκευση και αποστολή των test

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

7

Web Recorder

Δυνατότητες Διαδικτυακής Εφαρμογής - 1

• Διαχείριση χρηστών (εγγραφή, σύνδεση, αποσύνδεση, αλλαγή στοιχείων, διαγραφή λογαριασμού)

• Εμφάνιση των διαθέσιμων σουιτών και των καταγεγραμμένων test

• Εκτέλεση ενός test (1 ή και περισσότερες φορές) και ολόκληρης σουίτας

• Επεξεργασία των βημάτων (steps) ενός test (λειτουργία, προσδιοριστικό, περιγραφή, προσθήκη, διαγραφή, αναδιάταξη)

• Αναζήτηση βημάτων κατά την επεξεργασία τους

• Προσθήκη ενός test προς εκτέλεση πριν ή μετά την εκτέλεση ενός συγκεκριμένου test

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

8

Web Recorder

Δυνατότητες Διαδικτυακής Εφαρμογής - 2

• Προβολή ιστορικού εκτελέσεων σε επίπεδο σουίτας και σε επίπεδο test

• Αυτόματη εκτέλεση σουίτας σε καθημερινή βάση

• Επεξεργασία στοιχείων σουίτας (όνομα, συχνότητα αυτόματης εκτέλεσης, διαγραφή)

• Επεξεργασία στοιχείων test (όνομα, σουίτα, αριθμός εκτελέσεων, διαγραφή)

• Εμφάνιση στατιστικών εκτελέσεων

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

9

Web Recorder

Τεχνολογίες

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

12

Web Recorder

Live DEMO

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

13

Web Recorder

Αποτελέσματα & Συμπεράσματα

• Εφαρμογή στις ενεργές ιστοσελίδες ‘‘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

Μελλοντική Εργασία

• Λήψη (Download) ενός test

• Προσθήκη περισσότερων επιλογών προγραμματισμού των test

• Προσθήκη βίντεο εκτέλεσης ενός test

• Προσθήκη περιγραφής κατά τη δημιουργία καινούριας σουίτας

• Διαφοροποίηση προγραμματισμένης εκτέλεσης (schedule) test και σουιτών

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

17

Web Recorder

Προβολή και αποθετήρια

• Προβολή της εφαρμογής στην ηλεκτρονική διεύθυνση ‘‘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

Ευχαριστίες

Ευχαριστώ τους επιβλέποντες της Διπλωματικής μου Εργασίας κ. Ανδρέα Συμεωνίδη και Κυριάκο Χατζηδημητρίου

… και φυσικά εσάς για την προσοχή σας!

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

19

Web Recorder

Ερωτήσεις

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

20

Web Recorder