M

MLOG

Ελληνικά

Ένας αναλυτικός οδηγός για το Cypress, το ισχυρό framework για end-to-end testing, που καλύπτει εγκατάσταση, συγγραφή tests, debugging, ενσωμάτωση CI/CD και βέλτιστες πρακτικές.

Cypress: Ο απόλυτος οδηγός End-to-End Testing για εφαρμογές web

Στο σημερινό, ταχέως εξελισσόμενο τοπίο της ανάπτυξης web, η διασφάλιση της ποιότητας και της αξιοπιστίας των εφαρμογών web είναι υψίστης σημασίας. Ο έλεγχος End-to-End (E2E) διαδραματίζει κρίσιμο ρόλο στην επαλήθευση ότι όλα τα στοιχεία μιας εφαρμογής λειτουργούν αρμονικά μεταξύ τους από την οπτική γωνία του χρήστη. Το Cypress έχει αναδειχθεί ως ένα κορυφαίο E2E testing framework, προσφέροντας μια φιλική προς τον προγραμματιστή εμπειρία, ισχυρά χαρακτηριστικά και εξαιρετική απόδοση. Αυτός ο αναλυτικός οδηγός θα σας καθοδηγήσει σε όλα όσα πρέπει να γνωρίζετε για να ξεκινήσετε με το Cypress και να ελέγξετε αποτελεσματικά τις εφαρμογές web σας.

Τι είναι το Cypress;

Το Cypress είναι ένα εργαλείο ελέγχου front-end επόμενης γενιάς, φτιαγμένο για το σύγχρονο web. Σε αντίθεση με τα παραδοσιακά testing frameworks που εκτελούν τα tests σε έναν browser, το Cypress λειτουργεί απευθείας μέσα στον browser, δίνοντάς σας απαράμιλλο έλεγχο και ορατότητα στη συμπεριφορά της εφαρμογής σας. Είναι σχεδιασμένο για να είναι γρήγορο, αξιόπιστο και εύκολο στη χρήση, καθιστώντας το μια δημοφιλή επιλογή μεταξύ προγραμματιστών και μηχανικών QA παγκοσμίως. Το Cypress είναι γραμμένο σε JavaScript και εκτελείται εντός του browser, καθιστώντας το πολύ αποδοτικό και προσφέροντας απαράμιλλη πρόσβαση στα εσωτερικά της εφαρμογής.

Βασικά οφέλη από τη χρήση του Cypress

Εγκατάσταση και ρύθμιση

Το ξεκίνημα με το Cypress είναι απλό. Δείτε πώς να το εγκαταστήσετε:

  1. Προαπαιτούμενα: Βεβαιωθείτε ότι έχετε εγκατεστημένα τα Node.js και npm (Node Package Manager) στο σύστημά σας. Μπορείτε να τα κατεβάσετε από την επίσημη ιστοσελίδα του Node.js.
  2. Εγκατάσταση του Cypress: Ανοίξτε το τερματικό ή τη γραμμή εντολών σας, πλοηγηθείτε στον κατάλογο του έργου σας και εκτελέστε την ακόλουθη εντολή:
    3. npm install cypress --save-dev
  3. Άνοιγμα του Cypress: Μόλις ολοκληρωθεί η εγκατάσταση, μπορείτε να ανοίξετε το Cypress Test Runner εκτελώντας:
    4. npx cypress open

    Αυτή η εντολή θα ξεκινήσει το Cypress Test Runner, το οποίο παρέχει ένα γραφικό περιβάλλον για την εκτέλεση και την αποσφαλμάτωση των tests σας.

Γράφοντας το πρώτο σας Test στο Cypress

Ας δημιουργήσουμε ένα απλό test για να επαληθεύσουμε ότι η αρχική σελίδα ενός ιστότοπου φορτώνει σωστά. Δημιουργήστε ένα νέο αρχείο με το όνομα `example.cy.js` στον κατάλογο `cypress/e2e` του έργου σας.


// cypress/e2e/example.cy.js

describe('Το πρώτο μου Test', () => {
  it('Επισκέπτεται το Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Ας αναλύσουμε αυτό το test:

Εκτελέστε αυτό το test στο Cypress Test Runner για να το δείτε σε δράση. Θα πρέπει να δείτε τον browser να πλοηγείται στον ιστότοπο Cypress Kitchen Sink, να κάνει κλικ στον σύνδεσμο "type" και να επαληθεύει τη διεύθυνση URL.

Εντολές Cypress

Το Cypress παρέχει ένα ευρύ φάσμα εντολών για την αλληλεπίδραση με την εφαρμογή σας. Ακολουθούν μερικές από τις πιο συχνά χρησιμοποιούμενες εντολές:

Αυτές είναι μόνο μερικές από τις πολλές εντολές που είναι διαθέσιμες στο Cypress. Ανατρέξτε στην τεκμηρίωση του Cypress για μια πλήρη λίστα εντολών και των επιλογών τους.

Διαβεβαιώσεις (Assertions) στο Cypress

Οι διαβεβαιώσεις χρησιμοποιούνται για την επαλήθευση της αναμενόμενης συμπεριφοράς της εφαρμογής σας. Το Cypress παρέχει ένα πλούσιο σύνολο ενσωματωμένων διαβεβαιώσεων που μπορείτε να χρησιμοποιήσετε για να ελέγξετε την κατάσταση των στοιχείων, τη διεύθυνση URL, τον τίτλο και πολλά άλλα. Οι διαβεβαιώσεις συνδέονται αλυσιδωτά μετά από τις εντολές του Cypress χρησιμοποιώντας τη μέθοδο `.should()`.

Ακολουθούν μερικά κοινά παραδείγματα διαβεβαιώσεων:

Μπορείτε επίσης να δημιουργήσετε προσαρμοσμένες διαβεβαιώσεις για να ταιριάζουν στις συγκεκριμένες ανάγκες σας.

Βέλτιστες πρακτικές για τη συγγραφή Tests στο Cypress

Η τήρηση βέλτιστων πρακτικών μπορεί να σας βοηθήσει να γράψετε πιο συντηρήσιμα, αξιόπιστα και αποδοτικά tests στο Cypress. Ακολουθούν ορισμένες συστάσεις:

Προηγμένες τεχνικές Cypress

Stubbing και Mocking

Το Cypress σας επιτρέπει να κάνετε stub σε αιτήματα και απαντήσεις δικτύου, επιτρέποντάς σας να προσομοιώσετε διαφορετικά σενάρια και να ελέγξετε τον χειρισμό σφαλμάτων της εφαρμογής σας. Αυτό είναι ιδιαίτερα χρήσιμο για τον έλεγχο λειτουργιών που βασίζονται σε εξωτερικά API ή υπηρεσίες.

Για να κάνετε stub σε ένα αίτημα δικτύου, μπορείτε να χρησιμοποιήσετε την εντολή `cy.intercept()`. Για παράδειγμα, ο παρακάτω κώδικας κάνει stub ένα αίτημα GET στο `/api/users` και επιστρέφει μια ψευδή (mock) απάντηση:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Στη συνέχεια, μπορείτε να περιμένετε για το παρεμποδισμένο αίτημα χρησιμοποιώντας `cy.wait('@getUsers')` και να επαληθεύσετε ότι η εφαρμογή σας χειρίζεται σωστά την ψευδή απάντηση.

Εργασία με Local Storage και Cookies

Το Cypress παρέχει εντολές για την αλληλεπίδραση με το local storage και τα cookies. Μπορείτε να χρησιμοποιήσετε αυτές τις εντολές για να ορίσετε, να λάβετε και να καθαρίσετε το local storage και τα cookies στα tests σας.

Για να ορίσετε ένα στοιχείο στο local storage, μπορείτε να χρησιμοποιήσετε την εντολή `cy.window()` για να αποκτήσετε πρόσβαση στο αντικείμενο window και στη συνέχεια να χρησιμοποιήσετε τη μέθοδο `localStorage.setItem()`. Για παράδειγμα:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Για να λάβετε ένα στοιχείο από το local storage, μπορείτε να χρησιμοποιήσετε την εντολή `cy.window()` και στη συνέχεια να χρησιμοποιήσετε τη μέθοδο `localStorage.getItem()`. Για παράδειγμα:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Για να ορίσετε ένα cookie, μπορείτε να χρησιμοποιήσετε την εντολή `cy.setCookie()`. Για παράδειγμα:


cy.setCookie('myCookie', 'myCookieValue')

Για να λάβετε ένα cookie, μπορείτε να χρησιμοποιήσετε την εντολή `cy.getCookie()`. Για παράδειγμα:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Χειρισμός μεταφόρτωσης αρχείων

Το Cypress παρέχει ένα plugin που ονομάζεται `cypress-file-upload` το οποίο απλοποιεί τη μεταφόρτωση αρχείων στα tests σας. Για να εγκαταστήσετε το plugin, εκτελέστε την ακόλουθη εντολή:

npm install -D cypress-file-upload

Στη συνέχεια, προσθέστε την ακόλουθη γραμμή στο αρχείο σας `cypress/support/commands.js`:


import 'cypress-file-upload';

Μπορείτε στη συνέχεια να χρησιμοποιήσετε την εντολή `cy.uploadFile()` για να ανεβάσετε ένα αρχείο. Για παράδειγμα:


cy.get('input[type="file"]').attachFile('example.txt')

Εργασία με IFrames

Ο έλεγχος των IFrames μπορεί να είναι δύσκολος, αλλά το Cypress παρέχει έναν τρόπο αλληλεπίδρασης μαζί τους. Μπορείτε να χρησιμοποιήσετε την εντολή `cy.frameLoaded()` για να περιμένετε να φορτώσει ένα IFrame, και στη συνέχεια να χρησιμοποιήσετε την εντολή `cy.iframe()` για να λάβετε το αντικείμενο document του IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress και Continuous Integration/Continuous Deployment (CI/CD)

Η ενσωμάτωση του Cypress στον CI/CD αγωγό σας είναι απαραίτητη για τη διασφάλιση της ποιότητας της εφαρμογής σας. Μπορείτε να εκτελέσετε τα tests του Cypress σε headless mode στο περιβάλλον CI/CD σας. Δείτε πώς:

  1. Εγκατάσταση του Cypress: Βεβαιωθείτε ότι το Cypress είναι εγκατεστημένο ως εξάρτηση στο έργο σας.
  2. Διαμόρφωση του CI/CD: Διαμορφώστε τον CI/CD αγωγό σας για να εκτελεί τα tests του Cypress μετά από κάθε build.
  3. Εκτέλεση του Cypress Headlessly: Χρησιμοποιήστε την εντολή `cypress run` για να εκτελέσετε τα tests του Cypress σε headless mode.

Παράδειγμα διαμόρφωσης CI/CD (με χρήση GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Αυτή η διαμόρφωση θα εκτελεί τα tests του Cypress κάθε φορά που γίνεται push κώδικα στον κλάδο `main` ή δημιουργείται ένα pull request προς τον κλάδο `main`. Η ενέργεια `cypress-io/github-action` απλοποιεί τη διαδικασία εκτέλεσης των tests του Cypress στα GitHub Actions.

Αποσφαλμάτωση (Debugging) των Tests στο Cypress

Το Cypress παρέχει εξαιρετικά εργαλεία αποσφαλμάτωσης για να σας βοηθήσει να εντοπίσετε και να διορθώσετε προβλήματα στα tests σας. Ακολουθούν μερικές συμβουλές για την αποσφαλμάτωση των tests στο Cypress:

Cypress εναντίον άλλων Frameworks ελέγχou

Ενώ το Cypress είναι ένα ισχυρό end-to-end testing framework, είναι απαραίτητο να κατανοήσετε πώς συγκρίνεται με άλλες δημοφιλείς επιλογές. Ακολουθεί μια σύντομη επισκόπηση:

Η επιλογή του framework εξαρτάται από τις συγκεκριμένες ανάγκες και απαιτήσεις του έργου σας. Το Cypress είναι μια εξαιρετική επιλογή για σύγχρονες εφαρμογές web που απαιτούν γρήγορο, αξιόπιστο και φιλικό προς τον προγραμματιστή end-to-end testing.

Πραγματικά παραδείγματα του Cypress σε δράση

Ας εξερευνήσουμε μερικά πραγματικά παραδείγματα για το πώς μπορεί να χρησιμοποιηθεί το Cypress για τον έλεγχο διαφορετικών τύπων εφαρμογών web:

Έλεγχος μιας εφαρμογής E-commerce

Μπορείτε να χρησιμοποιήσετε το Cypress για να ελέγξετε διάφορες ροές χρηστών σε μια εφαρμογή e-commerce, όπως:

Ακολουθεί ένα παράδειγμα ενός test στο Cypress που επαληθεύει ότι ένας χρήστης μπορεί να προσθέσει επιτυχώς ένα προϊόν στο καλάθι του:


it('Προσθέτει ένα προϊόν στο καλάθι', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Έλεγχος μιας εφαρμογής Social Media

Μπορείτε να χρησιμοποιήσετε το Cypress για να ελέγξετε τις αλληλεπιδράσεις των χρηστών σε μια εφαρμογή κοινωνικής δικτύωσης, όπως:

Ακολουθεί ένα παράδειγμα ενός test στο Cypress που επαληθεύει ότι ένας χρήστης μπορεί να δημιουργήσει επιτυχώς μια νέα ανάρτηση:


it('Δημιουργεί μια νέα ανάρτηση', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Γεια σου, κόσμε!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Γεια σου, κόσμε!')
})

Έλεγχος μιας τραπεζικής εφαρμογής

Για τραπεζικές εφαρμογές, το Cypress μπορεί να χρησιμοποιηθεί για τον έλεγχο κρίσιμων λειτουργιών όπως:

Ένα test για την επαλήθευση μιας μεταφοράς χρημάτων θα μπορούσε να μοιάζει κάπως έτσι (με κατάλληλο stubbing για λόγους ασφαλείας):


it('Μεταφέρει χρήματα επιτυχώς', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Συμπέρασμα

Το Cypress είναι ένα ισχυρό και ευέλικτο end-to-end testing framework που μπορεί να σας βοηθήσει να διασφαλίσετε την ποιότητα και την αξιοπιστία των εφαρμογών web σας. Το φιλικό προς τον προγραμματιστή API, τα ισχυρά χαρακτηριστικά και η εξαιρετική του απόδοση το καθιστούν μια δημοφιλή επιλογή μεταξύ προγραμματιστών και μηχανικών QA παγκοσμίως. Ακολουθώντας τις βέλτιστες πρακτικές που περιγράφονται σε αυτόν τον οδηγό, μπορείτε να γράψετε αποτελεσματικά tests στο Cypress που θα σας βοηθήσουν να εντοπίσετε σφάλματα νωρίς στη διαδικασία ανάπτυξης και να παραδώσετε λογισμικό υψηλής ποιότητας στους χρήστες σας.

Καθώς οι εφαρμογές web συνεχίζουν να εξελίσσονται, η σημασία του end-to-end testing θα αυξάνεται συνεχώς. Η υιοθέτηση του Cypress και η ενσωμάτωσή του στη ροή εργασίας ανάπτυξης θα σας δώσει τη δυνατότητα να δημιουργήσετε πιο στιβαρές, αξιόπιστες και φιλικές προς το χρήστη εμπειρίες web.