Πώς να δοκιμάσετε σωστά το πεδίο εισαγωγής διεύθυνσης…

Ο έλεγχος του πεδίου εισαγωγής email περιλαμβάνει τον έλεγχο λειτουργικότητας, επικύρωσης, ευχρηστίας και ασφάλειας.

Λειτουργικός έλεγχος:

Εισαγωγή έγκυρων διευθύνσεων:
- test@example.com
- firstname.lastname@example.com
- email@subdomain.example.com
- firstname+lastname@example.com
- email@example.co.uk
- email@example.museum
- email@example.name
- email@example.демо (για υποστήριξη διεθνών ονομάτων τομέα - IDN)
Εισαγωγή μη έγκυρων διευθύνσεων:
- Απουσία @: testexample.com
- Πολλαπλά @: test@@example.com
- Μη έγκυρη μορφή τομέα: test@example
- Απουσία ονόματος χρήστη: @example.com
- Ειδικοί χαρακτήρες στο όνομα χρήστη: te!st@example.com, te#st@example.com
- Ειδικοί χαρακτήρες στον τομέα: test@exa!mple.com
- Μακρύς διεύθυνση (έλεγχος ορίων): a_very_long_email_address_that_exceeds_typical_limits@example.com (ελέγξτε τα όρια σύμφωνα με τις προδιαγραφές ή την κοινή λογική)
- Διεύθυνση με κενά: test @example.com
- Διεύθυνση με λανθασμένη σύνταξη: test@.com, test.@example.com
- Διεύθυνση με IP αντί τομέα (αν δεν υποστηρίζεται): test@[192.168.1.1]
- Διεύθυνση με κυριλλικούς χαρακτήρες (αν δεν υποστηρίζεται IDN): тест@пример.рф
Κενό πεδίο: Αποστολή φόρμας με κενό πεδίο.

Επικύρωση:

Έλεγχος ότι τα εισαγόμενα δεδομένα συμφωνούν με τη σύνταξη email (κανονικές εκφράσεις).
Εμφάνιση μηνυμάτων σφάλματος στον χρήστη κατά την εισαγωγή μη έγκυρων δεδομένων.
Έλεγχος ακρίβειας και σαφήνειας των μηνυμάτων σφάλματος.
Διασφάλιση ότι η φόρμα δεν αποστέλλεται εάν υπάρχουν σφάλματα επικύρωσης.

Χρηστικότητα & UI/UX:

Εστίαση στο πεδίο κατά το φόρτωμα της σελίδας (αν είναι κατάλληλο).
Κείμενο υπόδειξης με παράδειγμα μορφής (π.χ., user@example.com).
Υποστήριξη αυτόματης συμπλήρωσης από το πρόγραμμα περιήγησης.
Ετικέτα (<label>) για το πεδίο.
Ο χρήστης δεν μπορεί να εισάγει μη επιτρεπτούς χαρακτήρες (αν υπάρχει τέτοια λογική στο frontend).
Αν υπάρχει μάσκα εισαγωγής, ελέγξτε τη λειτουργία της.

Ασφάλεια:

Έλεγχος για ευπάθειες XSS: εισαγωγή σεναρίων, HTML tags (<script>alert('XSS')</script>) στο πεδίο.
Έλεγχος για ενέσεις (SQL/NoSQL): εισαγωγή ειδικών χαρακτήρων που μπορούν να επηρεάσουν ερωτήματα στη βάση δεδομένων (' OR '1'='1).
Περιορισμός ρυθμού (αν η φόρμα στέλνει email ή εκτελεί απαιτητικές ενέργειες): έλεγχος περιορισμού του αριθμού προσπαθειών από μια IP ή χρήστη.

Αυτοματοποίηση:

Γράψτε μονάδες δοκιμών για τις λειτουργίες επικύρωσης email.
Γράψτε ολοκληρωμένες δοκιμές για τον έλεγχο της λειτουργίας του πεδίου στο πλαίσιο της φόρμας.
Γράψτε E2E δοκιμές για τον πλήρη σεναριο χρήσης της φόρμας με το πεδίο email.

Παράδειγμα κώδικα για μονάδα δοκιμής επικύρωσης:

// Υποθέτουμε ότι έχουμε μια συνάρτηση validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Απλό παράδειγμα regex
  return re.test(email);
}

// Μονάδες δοκιμών με Jest
describe('validateEmail', () => {
  test('θα πρέπει να επιστρέφει true για έγκυρο email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('θα πρέπει να επιστρέφει false για μη έγκυρο email', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('θα πρέπει να επιστρέφει false για κενή συμβολοσειρά', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Παράδειγμα E2E δοκιμής με Cypress:

// cypress/integration/email_field.spec.js
describe('Πεδίο Email', () => {
  it('επικυρώνει σωστά και εμφανίζει σφάλμα για μη έγκυρη εισαγωγή', () => {
    cy.visit('/your-form-page'); // URL σελίδας με φόρμα
    cy.get('#email-input').type('μη_έγκυρο'); // Εισαγωγή μη έγκυρου email
    cy.get('button[type="submit"]').click(); // Κλικ στο κουμπί αποστολής
    cy.get('.error-message').should('be.visible').and('contain', 'Μη έγκυρη μορφή email'); // Έλεγχος μηνύματος σφάλματος
  });

  it('επιτρέπει την υποβολή της φόρμας με έγκυρο email', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('έγκυρο@example.com');
    cy.get('button[type="submit"]').click();
    // Περαιτέρω έλεγχοι: ανακατεύθυνση, μήνυμα επιτυχίας
    cy.url().should('include', '/success'); // Έλεγχος URL μετά την επιτυχή υποβολή
  });
});

Πίνακας με παραδείγματα περιπτώσεων δοκιμής:

ID	Ενέργεια χρήστη	Αναμενόμενο αποτέλεσμα
TC_01	Εισαγωγή `test@example.com`	Το πεδίο θεωρείται έγκυρο. Η φόρμα αποστέλλεται (αν όλα τα πεδία είναι συμπληρωμένα).
TC_02	Εισαγωγή `μη_έγκυρο-email`	Το πεδίο θεωρείται μη έγκυρο. Εμφανίζεται μήνυμα σφάλματος.
TC_03	Άφησε το πεδίο κενό και προσπάθησε να στείλεις τη φόρμα	Το πεδίο θεωρείται μη έγκυρο (αν είναι υποχρεωτικό). Εμφανίζεται μήνυμα σφάλματος.
TC_04	Εισαγωγή `test@example.co.uk`	Το πεδίο θεωρείται έγκυρο.
TC_05	Εισαγωγή `<script>alert('XSS')</script>`	Το σενάριο δεν πρέπει να εκτελεστεί. Το πεδίο πρέπει να είναι sanitized ή validated.

Είναι επίσης σημαντικό να λαμβάνονται υπόψη οι ειδικές απαιτήσεις του έργου (π.χ., υποστήριξη συγκεκριμένων ζωνών τομέα, ευαισθησία σε πεζά/κεφαλαία), καθώς και να γίνονται δοκιμές σε διαφορετικές συσκευές και browsers.

Πώς να δοκιμάσετε σωστά το πεδίο εισαγωγής διεύθυνσης email;