Θα χρησιμοποιήσουμε τον ιστότοπο Mercury Tours ως δοκιμαστική εφαρμογή ιστού. Είναι ένα διαδικτυακό σύστημα κρατήσεων πτήσεων που περιέχει όλα τα στοιχεία που χρειαζόμαστε για αυτό το σεμινάριο. Η διεύθυνση URL της είναι http://demo.guru99.com/test/newtours/ και αυτή θα είναι η βασική διεύθυνση URL.
Δημιουργήστε ένα σενάριο με εγγραφή
Ας δημιουργήσουμε τώρα το πρώτο δοκιμαστικό σενάριο στο Selenium IDE χρησιμοποιώντας την πιο κοινή μέθοδο - καταγράφοντας. Στη συνέχεια, θα εκτελέσουμε το σενάριό μας χρησιμοποιώντας τη δυνατότητα αναπαραγωγής.
Βήμα 1
- Εκκινήστε το Firefox και το Selenium IDE.
- Πληκτρολογήστε την τιμή για το Βασικό URL: http://demo.guru99.com/test/newtours/.
- Ενεργοποιήστε το κουμπί Εγγραφή ενεργοποιημένο (εάν δεν είναι ακόμη ενεργοποιημένο από προεπιλογή).
| Βήμα 2
Στο Firefox, μεταβείτε στη διεύθυνση http://demo.guru99.com/test/newtours/. Ο Firefox θα σας οδηγήσει στη σελίδα παρόμοια με αυτήν που φαίνεται παρακάτω.
|
Βήμα 3
- Κάντε δεξί κλικ σε οποιοδήποτε κενό διάστημα στη σελίδα, όπως στο λογότυπο Mercury Tours στην επάνω αριστερή γωνία. Αυτό θα εμφανίσει το μενού περιβάλλοντος Selenium IDE. Σημείωση: Μην κάνετε κλικ σε υπερσυνδεδεμένα αντικείμενα ή εικόνες
- Ορίστε την επιλογή "Εμφάνιση διαθέσιμων εντολών".
- Στη συνέχεια, επιλέξτε "assertTitle ακριβής: Καλώς ορίσατε: Mercury Tours." Αυτή είναι μια εντολή που διασφαλίζει ότι ο τίτλος της σελίδας είναι σωστός.
|
| |
Βήμα 4
- Στο πλαίσιο κειμένου "Όνομα χρήστη" της Mercury Tours, πληκτρολογήστε ένα μη έγκυρο όνομα χρήστη, "validUNN".
- Στο πλαίσιο κειμένου "Κωδικός πρόσβασης", πληκτρολογήστε έναν μη έγκυρο κωδικό πρόσβασης, "validPWD".
|
| | |
Βήμα 5
- Κάντε κλικ στο κουμπί "Σύνδεση". Ο Firefox θα σας οδηγήσει σε αυτήν τη σελίδα.
|
| Βήμα 6
Απενεργοποιήστε το κουμπί εγγραφής για να σταματήσετε την εγγραφή. Το σενάριό σας θα πρέπει τώρα να μοιάζει με αυτό που φαίνεται παρακάτω.
|
| Βήμα 7
Τώρα που τελειώσαμε με το δοκιμαστικό σενάριό μας, θα το αποθηκεύσουμε σε δοκιμαστική θήκη. Στο μενού Αρχείο, επιλέξτε "Αποθήκευση δοκιμαστικής θήκης". Εναλλακτικά, μπορείτε απλά να πατήσετε Ctrl + S.
|
Βήμα 8
- Επιλέξτε την τοποθεσία που θέλετε και, στη συνέχεια, ονομάστε το Test Case ως "Invalid_login".
- Κάντε κλικ στο κουμπί "Αποθήκευση".
|
| Βήμα 9.
Παρατηρήστε ότι το αρχείο αποθηκεύτηκε ως HTML.
|
Βήμα 10.
Επιστρέψτε στο Selenium IDE και κάντε κλικ στο κουμπί Αναπαραγωγή για να εκτελέσετε ολόκληρο το σενάριο. Το Selenium IDE θα πρέπει να μπορεί να αναπαράγει τα πάντα άψογα.
Εισαγωγή στο Selenium Commands - Selenese
- Οι εντολές Selenese μπορούν να έχουν έως και δύο παραμέτρους: στόχο και τιμή.
- Οι παράμετροι δεν απαιτούνται συνεχώς. Εξαρτάται από τον αριθμό των εντολών που θα χρειαστούν.
3 τύποι εντολών
|
Ενέργειες
|
Αυτές είναι εντολές που αλληλεπιδρούν άμεσα με στοιχεία σελίδας.
Παράδειγμα: η εντολή "κλικ" είναι μια ενέργεια επειδή αλληλεπιδράτε άμεσα με το στοιχείο στο οποίο κάνετε κλικ.
Η εντολή "type" είναι επίσης μια ενέργεια επειδή βάζετε τιμές σε ένα πλαίσιο κειμένου και το πλαίσιο κειμένου τις εμφανίζει σε αντάλλαγμα. Υπάρχει αμφίδρομη αλληλεπίδραση μεταξύ εσάς και του πλαισίου κειμένου.
|
|
Αξεσουάρ
|
Είναι εντολές που σας επιτρέπουν να αποθηκεύετε τιμές σε μια μεταβλητή.
Παράδειγμα: η εντολή "storeTitle" είναι προσπελάστης επειδή "διαβάζει" μόνο τον τίτλο της σελίδας και την αποθηκεύει σε μια μεταβλητή. Δεν αλληλεπιδρά με κανένα στοιχείο της σελίδας.
|
|
Ισχυρισμοί
|
Είναι εντολές που επαληθεύουν εάν πληρούται μια συγκεκριμένη συνθήκη.
3 Τύποι ισχυρισμών
- Επιβεβαιώστε . Όταν μια εντολή "assert" αποτύχει, ο έλεγχος διακόπτεται αμέσως.
- Επαλήθευση . Όταν μια εντολή "επαλήθευση" αποτύχει, το Selenium IDE καταγράφει αυτήν την αποτυχία και συνεχίζει με την εκτέλεση της δοκιμής.
- WaitFor . Πριν προχωρήσουμε στην επόμενη εντολή, οι εντολές "waitFor" θα περιμένουν πρώτα να γίνει πραγματικότητα μια συγκεκριμένη συνθήκη.
- Εάν η κατάσταση γίνει αληθινή εντός της περιόδου αναμονής, το βήμα περνά.
- Εάν η συνθήκη δεν γίνει πραγματικότητα, το βήμα αποτυγχάνει. Η αποτυχία καταγράφεται και η εκτέλεση δοκιμής προχωρά στην επόμενη εντολή.
- Από προεπιλογή, η τιμή χρονικού ορίου ορίζεται στα 30 δευτερόλεπτα. Μπορείτε να το αλλάξετε στο παράθυρο διαλόγου Επιλογές IDE Selenium στην καρτέλα Γενικά.
|
Επιβεβαίωση έναντι επαλήθευσης
Κοινές εντολές
| Εντολή | Αριθμός παραμέτρων | Περιγραφή |
| Άνοιξε | 0 - 2 |
Ανοίγει μια σελίδα χρησιμοποιώντας μια διεύθυνση URL.
|
| click / clickAndWait | 1 |
Κάντε κλικ σε ένα καθορισμένο στοιχείο.
|
| type / typeKeys | 2 |
Πληκτρολογεί μια ακολουθία χαρακτήρων.
|
| verifikasiTitle / assertTitle | 1 |
Συγκρίνει τον πραγματικό τίτλο της σελίδας με την αναμενόμενη τιμή.
|
| verifikasiTextPresent | 1 |
Ελέγχει εάν κάποιο συγκεκριμένο κείμενο βρίσκεται μέσα στη σελίδα.
|
| verifyElementPresent | 1 |
Ελέγχει την παρουσία ενός συγκεκριμένου στοιχείου.
|
| Πίνακας επαλήθευσης | 2 |
Συγκρίνει τα περιεχόμενα ενός πίνακα με τις αναμενόμενες τιμές.
|
| waitForPageToLoad | 1 |
Παύει την εκτέλεση έως ότου φορτωθεί πλήρως η σελίδα.
|
| waitForElementPresent | 1 |
Παύει την εκτέλεση έως ότου εμφανιστεί το καθορισμένο στοιχείο.
|
Δημιουργήστε ένα σενάριο μη αυτόματα με το Firebug
Τώρα, θα δημιουργήσουμε ξανά την ίδια δοκιμαστική θήκη, πληκτρολογώντας τις εντολές. Αυτή τη φορά, θα πρέπει να χρησιμοποιήσουμε το Firebug.
Βήμα 1
- Ανοίξτε το Firefox και το Selenium IDE.
- Πληκτρολογήστε τη βασική διεύθυνση URL (http://demo.guru99.com/test/newtours/).
- Το κουμπί εγγραφής πρέπει να είναι OFF.
|
| Βήμα 2: Κάντε κλικ στην επάνω κενή γραμμή του προγράμματος επεξεργασίας. |
|
Πληκτρολογήστε "open" στο πλαίσιο κειμένου Command και πατήστε Enter.
|
Βήμα 3
- Περιηγηθείτε στον Firefox στη βασική διεύθυνση URL και ενεργοποιήστε το Firebug
- Στο παράθυρο επεξεργασίας Selenium IDE, επιλέξτε τη δεύτερη γραμμή (η γραμμή κάτω από την εντολή "open") και δημιουργήστε τη δεύτερη εντολή πληκτρολογώντας "assertTitle" στο πλαίσιο Command.
- Μη διστάσετε να χρησιμοποιήσετε τη δυνατότητα αυτόματης συμπλήρωσης.
|
Βήμα 4
- Στο Firebug, αναπτύξτε την ετικέτα για να εμφανιστεί η ετικέτα .</li>
<li>Κάντε κλικ στην τιμή της ετικέτας <title> (που είναι "Welcome: Mercury Tours") και επικολλήστε την στο πεδίο Target στο πρόγραμμα επεξεργασίας.</li>
</ul>
</td>
</tr>
<tr> <td><strong>Βήμα 5</strong>
<ul>
<li>Για να δημιουργήσετε την τρίτη εντολή, κάντε κλικ στην τρίτη κενή γραμμή στο πρόγραμμα επεξεργασίας και πληκτρολογήστε "type" στο πλαίσιο κειμένου Command</li>
<li>Στο Firebug, κάντε κλικ στο κουμπί "Επιθεώρηση".</li>
</ul>
</td>
</tr>
<tr> <td>Κάντε κλικ στο πλαίσιο κειμένου Όνομα χρήστη. Σημειώστε ότι το Firebug εμφανίζει αυτόματα τον κώδικα HTML για αυτό το στοιχείο.</td>
</tr>
<tr> <td><strong>Βήμα 6</strong>
<p>Σημειώστε ότι το πλαίσιο κειμένου Όνομα χρήστη δεν έχει αναγνωριστικό, αλλά έχει ένα χαρακτηριστικό NAME. Ως εκ τούτου, θα χρησιμοποιήσουμε το ΟΝΟΜΑ του ως εντοπιστή. Αντιγράψτε την τιμή NAME και επικολλήστε την στο πεδίο Target στο Selenium IDE.</p>
<p>Ακόμα στο πλαίσιο κειμένου Target, πρόθεμα "userName" με "name =", υποδεικνύοντας ότι το Selenium IDE πρέπει να στοχεύει ένα στοιχείο του οποίου το χαρακτηριστικό NAME είναι "userName"</p>
<p>Πληκτρολογήστε "validUN" στο πλαίσιο κειμένου Value του Selenium IDE. Το δοκιμαστικό σας σενάριο θα πρέπει τώρα να μοιάζει με την παρακάτω εικόνα. Τελειώσαμε με την τρίτη εντολή. Σημείωση: Αντί για μη έγκυροUN, μπορείτε να εισαγάγετε οποιαδήποτε άλλη συμβολοσειρά κειμένου. Ωστόσο, το Selenium IDE είναι πεζά και γράφετε τιμές / χαρακτηριστικά όπως ακριβώς στην εφαρμογή.</p>
</td>
</tr>
<tr> <td><strong>Βήμα 7</strong>
<ul>
<li>Για να δημιουργήσετε την τέταρτη εντολή, πληκτρολογήστε "type" στο πλαίσιο κειμένου Command.</li>
<li>Και πάλι, χρησιμοποιήστε το κουμπί "Επιθεώρηση" του Firebug για να βρείτε τον εντοπιστή για το πλαίσιο κειμένου "Κωδικός πρόσβασης".</li>
</ul>
<ul>
<li>
<p>Επικολλήστε το χαρακτηριστικό NAME ("κωδικός πρόσβασης") στο πεδίο Target και προθέστε το με "name ="</p>
</li>
<li>
<p>Πληκτρολογήστε "validPW" στο πεδίο Value στο Selenium IDE. Το δοκιμαστικό σας σενάριο θα πρέπει τώρα να μοιάζει με την παρακάτω εικόνα.</p>
</li>
</ul>
</td>
</tr>
<tr> <td><strong>Βήμα 8</strong>
<ul>
<li>Για την πέμπτη εντολή, πληκτρολογήστε "clickAndWait" στο πλαίσιο κειμένου Command στο Selenium IDE.</li>
<li>Χρησιμοποιήστε το κουμπί "Επιθεώρηση" του Firebug για να βρείτε τον εντοπιστή για το κουμπί "Σύνδεση".</li>
</ul>
<ul>
<li>Επικολλήστε την τιμή του χαρακτηριστικού NAME ("login") στο πλαίσιο κειμένου Target και προθέστε το με το "name =".</li>
<li>Το δοκιμαστικό σας σενάριο θα πρέπει τώρα να μοιάζει με την παρακάτω εικόνα.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p><strong>Βήμα 9:</strong> Αποθηκεύστε τη δοκιμαστική θήκη με τον ίδιο τρόπο που κάναμε στην προηγούμενη ενότητα.</p>
<a id="menu-6"></a>
<h2>Χρησιμοποιώντας το κουμπί Εύρεση</h2>
<p><strong>Το κουμπί Εύρεση στο Selenium IDE χρησιμοποιείται για να επιβεβαιώσει εάν αυτό που είχαμε τοποθετήσει στο πλαίσιο κειμένου Target είναι πράγματι το σωστό στοιχείο διεπαφής χρήστη.</strong></p>
<p>Ας χρησιμοποιήσουμε τη δοκιμαστική περίπτωση Invalid_login που δημιουργήσαμε στις προηγούμενες ενότητες. Κάντε κλικ σε οποιαδήποτε εντολή με καταχώρηση Target, ας πούμε, την τρίτη εντολή</p>
<p>Κάντε κλικ στο κουμπί Εύρεση. Παρατηρήστε ότι το πλαίσιο κειμένου Όνομα χρήστη στη σελίδα Mercury Tours επισημαίνεται για ένα δευτερόλεπτο.</p>
<p>Αυτό δείχνει ότι το Selenium IDE μπόρεσε να εντοπίσει και να αποκτήσει πρόσβαση στο αναμενόμενο στοιχείο σωστά. Εάν το κουμπί Εύρεση επισημαίνει ένα διαφορετικό στοιχείο ή καθόλου στοιχείο, τότε πρέπει να υπάρχει κάτι λάθος με το σενάριό σας.</p>
<a id="menu-7"></a>
<h2>Εκτέλεση εντολής</h2>
<p><strong>Αυτό σας επιτρέπει να εκτελέσετε οποιαδήποτε μεμονωμένη εντολή χωρίς να εκτελέσετε ολόκληρη τη δοκιμαστική θήκη</strong> . Απλώς κάντε κλικ στη γραμμή που θέλετε να εκτελέσετε και στη συνέχεια είτε κάντε κλικ στο "Ενέργειες> Εκτέλεση αυτής της εντολής" από τη γραμμή μενού ή απλά πατήστε "X" στο πληκτρολόγιό σας.</p>
<p><strong>Βήμα 1.</strong> Βεβαιωθείτε ότι το πρόγραμμα περιήγησής σας βρίσκεται στην αρχική σελίδα του Mercury Tours. Κάντε κλικ στην εντολή που θέλετε να εκτελέσετε. Σε αυτό το παράδειγμα, κάντε κλικ στη γραμμή "type | userName | validUN".</p>
<p><strong>Βήμα 2.</strong> Πατήστε "X" στο πληκτρολόγιό σας.</p>
<p><strong>Βήμα 3.</strong> Παρατηρήστε ότι το πλαίσιο κειμένου για το όνομα χρήστη συμπληρώνεται με το κείμενο "validUN"</p>
<p><strong>Η εκτέλεση εντολών με αυτόν τον τρόπο εξαρτάται σε μεγάλο βαθμό από τη σελίδα που εμφανίζει ο Firefox αυτήν τη στιγμή</strong> . Αυτό σημαίνει ότι εάν δοκιμάσετε το παραπάνω παράδειγμα με την αρχική σελίδα Google που εμφανίζεται αντί για το Mercury Tours ', τότε το βήμα σας θα αποτύχει επειδή δεν υπάρχει πλαίσιο κειμένου με το χαρακτηριστικό "userName" στην αρχική σελίδα του Google.</p>
<a id="menu-8"></a>
<h2>Σημείο εκκίνησης</h2>
<p><strong>Ένα σημείο εκκίνησης είναι ένας δείκτης που λέει στο Selenium IDE ποιες γραμμές θα ξεκινήσει η εκτέλεση</strong> . <strong>Το πλήκτρο συντόμευσης είναι "S".</strong></p>
<p>Στο παραπάνω παράδειγμα, η αναπαραγωγή θα ξεκινήσει στην τρίτη γραμμή (τύπος | κωδικός πρόσβασης | άκυρηPW). <strong>Μπορείτε να έχετε μόνο ένα σημείο εκκίνησης σε ένα μόνο σενάριο δοκιμής.</strong></p>
<p>Το σημείο εκκίνησης είναι παρόμοιο με το Εκτελέστε την εντολή έτσι ώστε να εξαρτώνται από τη σελίδα που εμφανίζεται αυτήν τη στιγμή. Το σημείο εκκίνησης θα αποτύχει εάν βρίσκεστε σε λάθος σελίδα.</p>
<a id="menu-9"></a>
<h2>ορια ΑΝΤΟΧΗΣ</h2>
<p>Τα σημεία διακοπής είναι δείκτες που λένε στο Selenium IDE πού να διακόψει αυτόματα το τεστ. <strong>Το πλήκτρο συντόμευσης είναι "B".</strong></p>
<p>Η κίτρινη επισήμανση σημαίνει ότι το τρέχον βήμα εκκρεμεί. Αυτό αποδεικνύει ότι το Selenium IDE έχει σταματήσει την εκτέλεση σε αυτό το βήμα. <strong>Μπορείτε να έχετε πολλά σημεία διακοπής σε μία δοκιμαστική περίπτωση.</strong></p>
<a id="menu-10"></a>
<h2>Βήμα</h2>
<p>Σας επιτρέπει να εκτελείτε τις επόμενες εντολές μία κάθε φορά μετά την παύση της δοκιμαστικής θήκης. Ας χρησιμοποιήσουμε το σενάριο στην προηγούμενη ενότητα "Breakpoints".</p>
<table>
<tbody>
<tr> <td width="50%"> </td> <td>
<p><strong>Πριν κάνετε κλικ στο "Βήμα".</strong></p>
<p>Η δοκιμαστική υπόθεση σταματά στη γραμμή "clickAndWait | login".</p>
</td>
</tr>
<tr> <td width="50%"> </td> <td>
<p><strong>Αφού κάνετε κλικ στο "Βήμα".</strong></p>
<p>Η γραμμή "clickAndWait | login" εκτελείται και σταματά στην επόμενη εντολή (verifikasiTitle | Sign-on: Mercury Tours).</p>
<p>Παρατηρήστε ότι η επόμενη γραμμή είναι σε παύση παρόλο που δεν υπάρχει σημείο διακοπής εκεί. Αυτός είναι ο κύριος σκοπός της λειτουργίας Βήμα - εκτελεί τις επόμενες εντολές μία κάθε φορά για να σας δώσει περισσότερο χρόνο για να ελέγξετε το αποτέλεσμα μετά από κάθε βήμα.</p>
</td>
</tr>
</tbody>
</table>
<a id="menu-11"></a>
<h2>Σημαντικά πράγματα που πρέπει να λάβετε υπόψη κατά τη χρήση άλλων μορφών στην προβολή πηγής</h2>
<p><strong>Το Selenium IDE λειτουργεί καλά μόνο με HTML - άλλες μορφές βρίσκονται ακόμη σε πειραματική λειτουργία</strong> . <strong>ΔΕΝ</strong> είναι <strong>σκόπιμο</strong> να δημιουργείτε ή να επεξεργάζεστε δοκιμές χρησιμοποιώντας άλλες μορφές στην Προβολή προέλευσης, επειδή χρειάζεται ακόμη πολλή δουλειά για να γίνει σταθερή. Ακολουθούν τα γνωστά σφάλματα από την έκδοση 1.9.1.</p>
<ul>
<li>Δεν θα μπορείτε να εκτελέσετε αναπαραγωγή ούτε να επιστρέψετε στην Προβολή πίνακα εκτός εάν επιστρέψετε σε HTML.</li>
<li>Ο μόνος τρόπος να προσθέσετε εντολές με ασφάλεια στον πηγαίο κώδικα είναι να τις καταγράψετε.</li>
<li>Όταν τροποποιείτε τον πηγαίο κώδικα με μη αυτόματο τρόπο, θα χαθεί όταν μεταβείτε σε άλλη μορφή.</li>
<li>Αν και μπορείτε να αποθηκεύσετε τη δοκιμαστική θήκη σας ενώ βρίσκεστε στην προβολή προέλευσης, το Selenium IDE δεν θα μπορεί να το ανοίξει.</li>
</ul>
<p><strong>Ο προτεινόμενος τρόπος για να μετατρέψετε τις δοκιμές σελήνης είναι να χρησιμοποιήσετε την επιλογή "Εξαγωγή υπόθεσης ως…" στο μενού Αρχείο και όχι μέσω της προβολής πηγής.</strong></p>
<a id="menu-12"></a>
<h2>Περίληψη</h2>
<ul>
<li>Τα σενάρια δοκιμής μπορούν να δημιουργηθούν είτε καταγράφοντας είτε πληκτρολογώντας χειροκίνητα τις εντολές και τις παραμέτρους.</li>
<li>Κατά τη δημιουργία χειρογράφων χειροκίνητα, το Firebug χρησιμοποιείται για να πάρει τον εντοπιστή.</li>
<li>Το κουμπί Εύρεση χρησιμοποιείται για να ελέγξει ότι η εντολή μπορεί να έχει πρόσβαση στο σωστό στοιχείο.</li>
<li>Η προβολή πίνακα εμφανίζει ένα δοκιμαστικό σενάριο σε μορφή πίνακα, ενώ η προβολή προέλευσης το εμφανίζει σε μορφή HTML.</li>
<li>Η αλλαγή της προβολής πηγής σε μορφή εκτός HTML είναι ακόμη πειραματική.</li>
<li>Μην χρησιμοποιείτε την προβολή προέλευσης για τη δημιουργία δοκιμών σε άλλες μορφές. Χρησιμοποιήστε τις δυνατότητες εξαγωγής.</li>
<li>Οι παράμετροι δεν απαιτούνται συνεχώς. Εξαρτάται από την εντολή.</li>
<li>Υπάρχουν τρεις τύποι εντολών:</li>
<ul>
<li>Ενέργειες - αλληλεπιδρά άμεσα με στοιχεία σελίδας</li>
<li>Accessors - "διαβάζει" μια ιδιότητα στοιχείου και την αποθηκεύει σε μια μεταβλητή</li>
<li>Assertions - συγκρίνει μια πραγματική τιμή με μια αναμενόμενη</li>
</ul>
<li>Οι ισχυρισμοί έχουν τρεις τύπους:</li>
<ul>
<li>Επιβεβαίωση - μετά από αποτυχία, τα επόμενα βήματα δεν εκτελούνται πλέον</li>
<li>Επαλήθευση - κατά την αποτυχία, τα επόμενα βήματα εξακολουθούν να εκτελούνται.</li>
<li>WaitFor - περνά εάν η καθορισμένη συνθήκη γίνει αληθινή εντός του χρονικού ορίου. Διαφορετικά, θα αποτύχει</li>
</ul>
<li>Οι πιο κοινές εντολές είναι:</li>
<ul>
<li>Άνοιξε</li>
<li>click / clickAndWait</li>
<li>type / typeKeys</li>
<li>verifikasiTitle / assertTitle</li>
<li>verifikasiTextPresent</li>
<li>verifyElementPresent</li>
<li>Πίνακας επαλήθευσης</li>
<li>waitForPageToLoad</li>
<li>waitForElementPresent</li>
</ul>
</ul>
</div>
</article>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> </div>
</div>
</div>
</div>
</div>
<aside class="col-lg-4 sidebar sidebar--right">
<div class="widget widget-popular-posts">
<h2 class="widget-title">Δημοφιλείς Αναρτήσεις</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003567-media-queries-for-standard-devices" title="Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα" rel="bookmark"><img src="https://cdn.css-code.org/6897204/media_queries_for_standard_devices_css-tricks.png.webp" loading="lazy" alt="Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα" title="Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003567-media-queries-for-standard-devices" title="Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα" rel="bookmark">Ερωτήματα πολυμέσων για τυπικές συσκευές - CSS-Κόλπα 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003568-remove-margins-for-firstlast-elements" title="Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα" rel="bookmark"><img src="https://cdn.css-code.org/6374785/remove_margins_for_firstlast_elements_css-tricks.png.webp" loading="lazy" alt="Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα" title="Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003568-remove-margins-for-firstlast-elements" title="Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα" rel="bookmark">Κατάργηση περιθωρίων για το πρώτο / το τελευταίο στοιχείο - CSS-Κόλπα 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003569-removing-dotted-outline" title="Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα" rel="bookmark"><img src="https://cdn.css-code.org/9802784/removing_dotted_outline_css-tricks.png.webp" loading="lazy" alt="Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα" title="Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003569-removing-dotted-outline" title="Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα" rel="bookmark">Αφαίρεση διακεκομμένου περιγράμματος CSS-Κόλπα 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div class="widget widget-popular-posts">
<h2 class="widget-title">Καλύτερη αξιολογήσεις για το μήνα</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003789-add-nth-of-type-to-jquery" title="Προσθήκη: nth-of-type στο jQuery - CSS-Κόλπα" rel="bookmark">Προσθήκη: nth-of-type στο jQuery - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003790-animate-heightwidth-to-auto" title="Ύψος / Πλάτος ζωγραφικής σε "Αυτόματο" - CSS-Κόλπα" rel="bookmark">Ύψος / Πλάτος ζωγραφικής σε "Αυτόματο" - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003791-add-non-breaking-space-on-title-to-prevent-widows" title="Προσθέστε μη σπάσιμο χώρο στον τίτλο για να αποτρέψετε χήρες - CSS-Κόλπα" rel="bookmark">Προσθέστε μη σπάσιμο χώρο στον τίτλο για να αποτρέψετε χήρες - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003793-automatically-discover-document-links-and-apply-class" title="Ανακαλύψτε αυτόματα συνδέσμους εγγράφων και εφαρμόστε κλάση - CSS-Κόλπα" rel="bookmark">Ανακαλύψτε αυτόματα συνδέσμους εγγράφων και εφαρμόστε κλάση - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003794-append-site-overlay-div" title="Προσθήκη προσαρτήματος ιστότοπου DIV - CSS-Κόλπα" rel="bookmark">Προσθήκη προσαρτήματος ιστότοπου DIV - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003795-calculate-distance-between-mouse-and-element" title="Υπολογίστε την απόσταση μεταξύ ποντικιού και στοιχείου - CSS-Κόλπα" rel="bookmark">Υπολογίστε την απόσταση μεταξύ ποντικιού και στοιχείου - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003796-better-broken-image-handling" title="Καλύτερος σπασμένος χειρισμός εικόνας - CSS-Κόλπα" rel="bookmark">Καλύτερος σπασμένος χειρισμός εικόνας - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003797-check-for-empty-elements" title="Έλεγχος για κενά στοιχεία - CSS-Κόλπα" rel="bookmark">Έλεγχος για κενά στοιχεία - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003798-browser-detection-apply-classes-to-html-element" title="Ανίχνευση προγράμματος περιήγησης + Εφαρμογή μαθημάτων σε στοιχείο HTML - CSS-Κόλπα" rel="bookmark">Ανίχνευση προγράμματος περιήγησης + Εφαρμογή μαθημάτων σε στοιχείο HTML - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003799-change-wmode-with-jquery" title="Αλλαγή WMode με jQuery - CSS-Κόλπα" rel="bookmark">Αλλαγή WMode με jQuery - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003800-check-if-checkbox-is-checked" title="Ελέγξτε εάν είναι επιλεγμένο το πλαίσιο ελέγχου - CSS-Κόλπα" rel="bookmark">Ελέγξτε εάν είναι επιλεγμένο το πλαίσιο ελέγχου - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003801-check-if-element-exists" title="Ελέγξτε εάν υπάρχει στοιχείο - CSS-Κόλπα" rel="bookmark">Ελέγξτε εάν υπάρχει στοιχείο - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003802-check-if-event-was-triggered-or-native" title="Ελέγξτε αν το συμβάν ενεργοποιήθηκε ή εγγενές - CSS-Κόλπα" rel="bookmark">Ελέγξτε αν το συμβάν ενεργοποιήθηκε ή εγγενές - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003803-check-if-jquery-is-loaded" title="Ελέγξτε εάν το jQuery έχει φορτωθεί - CSS-Κόλπα" rel="bookmark">Ελέγξτε εάν το jQuery έχει φορτωθεί - CSS-Κόλπα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003804-clear-a-file-input" title="Διαγραφή εισόδου αρχείου - CSS-Κόλπα" rel="bookmark">Διαγραφή εισόδου αρχείου - CSS-Κόλπα</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts">
<h2 class="widget-title">Κορυφή Άρθρα</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8224719-prime-number-from-1-to-100-program-in-java" title="Prime Number Από 1 έως 100 Πρόγραμμα στην Java" rel="bookmark"><img src="https://cdn.css-code.org/7309294/prime_number_from_1_to_100_program_in_java.png.webp" loading="lazy" alt="Prime Number Από 1 έως 100 Πρόγραμμα στην Java" title="Prime Number Από 1 έως 100 Πρόγραμμα στην Java" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224719-prime-number-from-1-to-100-program-in-java" title="Prime Number Από 1 έως 100 Πρόγραμμα στην Java" rel="bookmark">Prime Number Από 1 έως 100 Πρόγραμμα στην Java 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8224720-armstrong-number-program-in-java" title="Πρόγραμμα αριθμού Armstrong στην JAVA" rel="bookmark"><img src="https://cdn.css-code.org/4356581/armstrong_number_program_in_java.png.webp" loading="lazy" alt="Πρόγραμμα αριθμού Armstrong στην JAVA" title="Πρόγραμμα αριθμού Armstrong στην JAVA" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224720-armstrong-number-program-in-java" title="Πρόγραμμα αριθμού Armstrong στην JAVA" rel="bookmark">Πρόγραμμα αριθμού Armstrong στην JAVA 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8224721-fibonacci-series-program-in-java-using-loops-and-recursion" title="Πρόγραμμα Fibonacci Series στην Java χρησιμοποιώντας Loops & Αναδρομή" rel="bookmark"><img src="https://cdn.css-code.org/7498640/fibonacci_series_program_in_java_using_loops_ampamp_recursion.png.webp" loading="lazy" alt="Πρόγραμμα Fibonacci Series στην Java χρησιμοποιώντας Loops & Αναδρομή" title="Πρόγραμμα Fibonacci Series στην Java χρησιμοποιώντας Loops & Αναδρομή" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224721-fibonacci-series-program-in-java-using-loops-and-recursion" title="Πρόγραμμα Fibonacci Series στην Java χρησιμοποιώντας Loops & Αναδρομή" rel="bookmark">Πρόγραμμα Fibonacci Series στην Java χρησιμοποιώντας Loops & Αναδρομή 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
</aside> </div>
</div>
<footer class="footer footer--dark">
<div class="container">
<div class="footer__widgets">
<div class="row">
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Δημοφιλείς Αναρτήσεις</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225186-find-average-of-a-list-in-python-with-example" title="Βρείτε το μέσο όρο μιας λίστας στο Python με παράδειγμα" rel="bookmark">Βρείτε το μέσο όρο μιας λίστας στο Python με παράδειγμα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225187-python-remove-duplicates-from-a-list" title="Η Python αφαιρεί διπλότυπα από μια λίστα" rel="bookmark">Η Python αφαιρεί διπλότυπα από μια λίστα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225188-remove-element-from-a-python-list-clear-pop-remove-del" title="Κατάργηση στοιχείου από μια λίστα Python (διαγραφή, ποπ, αφαίρεση, del)" rel="bookmark">Κατάργηση στοιχείου από μια λίστα Python (διαγραφή, ποπ, αφαίρεση, del)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225189-python-list-index-with-example" title="Ευρετήριο Python List () με Παράδειγμα" rel="bookmark">Ευρετήριο Python List () με Παράδειγμα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225190-python-internet-access-using-urllib-request-and-urlopen" title="Πρόσβαση στο Διαδίκτυο Python χρησιμοποιώντας το Urllib.Αίτημα και urlopen ()" rel="bookmark">Πρόσβαση στο Διαδίκτυο Python χρησιμοποιώντας το Urllib.Αίτημα και urlopen ()</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Επιλογή Συντάκτη</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225207-top-25-scala-interview-questions-and-answers" title="Κορυφαίες 25 ερωτήσεις συνέντευξης Scala & Απαντήσεις" rel="bookmark">Κορυφαίες 25 ερωτήσεις συνέντευξης Scala & Απαντήσεις</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225208-web-developer-vs-software-developer-whats-the-difference" title="Web Developer vs Software Developer: Ποια είναι η διαφορά;" rel="bookmark">Web Developer vs Software Developer: Ποια είναι η διαφορά;</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225209-glm-in-r-generalized-linear-model-with-example" title="GLM σε R: Γενικευμένο γραμμικό μοντέλο με παράδειγμα" rel="bookmark">GLM σε R: Γενικευμένο γραμμικό μοντέλο με παράδειγμα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225210-mysql-update-query-with-example" title="Ερώτημα MySQL UPDATE με Παράδειγμα" rel="bookmark">Ερώτημα MySQL UPDATE με Παράδειγμα</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8225211-29-best-mac-app-software-in-2021-freepaid" title="29 BEST λογισμικό εφαρμογής Mac το 2021 (δωρεάν / επί πληρωμή)" rel="bookmark">29 BEST λογισμικό εφαρμογής Mac το 2021 (δωρεάν / επί πληρωμή)</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Κορυφή Άρθρα</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223935-sap-hana-sql-stored-procedure-tutorial" title="Εκπαιδευτική διαδικασία SAP HANA SQL" rel="bookmark">Εκπαιδευτική διαδικασία SAP HANA SQL</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223936-sap-hana-sql-data-profiling-learn-in-5-minutes" title="SAP HANA SQL DATA Profiling: Μάθετε σε 5 λεπτά" rel="bookmark">SAP HANA SQL DATA Profiling: Μάθετε σε 5 λεπτά</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223937-sap-hana-tutorial-create-sequence" title="SAP HANA Tutorial: Δημιουργία ακολουθίας" rel="bookmark">SAP HANA Tutorial: Δημιουργία ακολουθίας</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223938-sap-hana-tutorial-sql-script" title="Tutorial SAP HANA: Σενάριο SQL" rel="bookmark">Tutorial SAP HANA: Σενάριο SQL</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8223940-data-provisioning-and-replication-in-sap-hana" title="Παροχή ΔΕΔΟΜΕΝΩΝ & Αντιγραφή στο SAP HANA" rel="bookmark">Παροχή ΔΕΔΟΜΕΝΩΝ & Αντιγραφή στο SAP HANA</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<p>© Copyright el.css-code.org, 2025 Μαρτιου |
<a href="https://el.css-code.org/about-site" title="Σχετικά με τον ιστότοπο">Σχετικά με τον ιστότοπο</a> |
<a href="https://el.css-code.org/contacts" title="Επαφές">Επαφές</a> |
<a href="https://el.css-code.org/privacy-policy" title="Πολιτική απορρήτου">Πολιτική απορρήτου</a>.
</p>
</div>
</div>
</footer>
<link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body>
</html>
|
