Cypress: המדריך האולטימטיבי לבדיקות מקצה לקצה עבור יישומי אינטרנט

בנוף פיתוח הווב המתפתח במהירות של ימינו, הבטחת האיכות והאמינות של יישומי אינטרנט היא בעלת חשיבות עליונה. בדיקות מקצה לקצה (E2E) ממלאות תפקיד מכריע באימות שכל רכיבי האפליקציה פועלים יחד בצורה חלקה מנקודת מבטו של המשתמש. Cypress התגלתה כמסגרת בדיקות E2E מובילה, המציעה חוויה ידידותית למפתחים, תכונות עוצמתיות וביצועים מצוינים. מדריך מקיף זה ידריך אותך בכל מה שאתה צריך לדעת כדי להתחיל עם Cypress ולבדוק ביעילות את יישומי האינטרנט שלך.

מה זה Cypress?

Cypress הוא כלי בדיקה חזיתי מהדור הבא שנבנה עבור האינטרנט המודרני. שלא כמו מסגרות בדיקה מסורתיות שמריצות בדיקות בדפדפן, Cypress פועלת ישירות בדפדפן, ומעניקה לך שליטה ונראות חסרות תקדים בהתנהגות האפליקציה שלך. הוא נועד להיות מהיר, אמין וקל לשימוש, מה שהופך אותו לבחירה פופולרית בקרב מפתחים ומהנדסי QA ברחבי העולם. Cypress כתובה ב-JavaScript ופועלת בתוך הדפדפן, מה שהופך אותה לבעלת ביצועים גבוהים מאוד ומציעה גישה חסרת תקדים לפנימיות של האפליקציה.

יתרונות מרכזיים בשימוש ב-Cypress

• ידידותי למפתחים: Cypress מספקת API נקי ואינטואיטיבי, מה שמקל על כתיבה וניפוי באגים של בדיקות.
• מסע בזמן: Cypress מצלמת תמונות מצב של מצב האפליקציה שלך במהלך כל פקודת בדיקה, ומאפשרת לך לחזור אחורה בזמן ולראות בדיוק מה קרה בכל נקודה.
• טעינות מחדש בזמן אמת: Cypress נטענת מחדש באופן אוטומטי כשאתה מבצע שינויים בבדיקות שלך, ומספקת משוב מיידי.
• המתנה אוטומטית: Cypress ממתינה אוטומטית עד שהאלמנטים יהפכו גלויים או ניתנים לאינטראקציה לפני ביצוע פעולות, ומבטלת את הצורך בהמתנות מפורשות.
• שליטה ברשת: Cypress מאפשרת לך ליצור Stub עבור בקשות ותגובות רשת, ומאפשרת לך לדמות תרחישים שונים ולבדוק את טיפול השגיאות של האפליקציה שלך.
• יכולת ניפוי באגים: Cypress מספקת כלי ניפוי באגים מצוינים, כולל כלי ניפוי באגים עוצמתי והודעות שגיאה מפורטות.
• בדיקות חוצות דפדפנים: Cypress תומכת במספר דפדפנים, כולל Chrome, Firefox, Edge ו-Electron.
• בדיקות ללא ראש: הפעל בדיקות במצב ללא ראש לביצוע מהיר יותר בסביבות CI/CD.
• טענות מובנות: Cypress מספקת קבוצה עשירה של טענות מובנות כדי לאמת את ההתנהגות הצפויה של האפליקציה שלך.

התקנה והגדרה

ההתחלה עם Cypress היא פשוטה. כך מתקינים אותה:

1. דרישות מוקדמות: ודא שמותקנים במערכת שלך Node.js ו-npm (מנהל חבילות Node). אתה יכול להוריד אותם מאתר Node.js הרשמי.
2. התקן את Cypress: פתח את הטרמינל או את שורת הפקודה שלך, נווט לספריית הפרויקט שלך והפעל את הפקודה הבאה:

npm install cypress --save-dev

3. פתח את Cypress: לאחר השלמת ההתקנה, תוכל לפתוח את Cypress Test Runner על ידי הפעלת:

npx cypress open

פקודה זו תפעיל את Cypress Test Runner, המספקת ממשק גרפי להרצה וניפוי באגים של הבדיקות שלך.

כתיבת בדיקת Cypress ראשונה

בואו ניצור בדיקה פשוטה כדי לוודא שדף הבית של אתר אינטרנט נטען כהלכה. צור קובץ חדש בשם `example.cy.js` בספרייה `cypress/e2e` של הפרויקט שלך.

// cypress/e2e/example.cy.js

describe('הבדיקה הראשונה שלי', () => {
  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')
  })
})

בואו נפרק את הבדיקה הזו:

• `describe()`: מגדיר חבילת בדיקות, שהיא אוסף של בדיקות קשורות.
• `it()`: מגדיר מקרה בדיקה בודד בתוך חבילת הבדיקות.
• `cy.visit()`: מנווט לכתובת האתר שצוינה.
• `cy.contains()`: מוצא רכיב המכיל את הטקסט שצוין.
• `.click()`: לוחץ על הרכיב שנבחר.
• `cy.url()`: מקבל את כתובת האתר הנוכחית של הדף.
• `.should()`: מבצע טענה לגבי מצב האפליקציה.
• `cy.get()`: בוחר רכיב באמצעות בורר CSS.
• `.type()`: מקליד טקסט לתוך הרכיב שנבחר.
• `.should('have.value', 'fake@email.com')`: טוען שהערך של הרכיב שווה ל-'fake@email.com'.

הפעל את הבדיקה הזו ב-Cypress Test Runner כדי לראות אותה בפעולה. אתה אמור לראות את הדפדפן מנווט לאתר Cypress Kitchen Sink, לוחץ על הקישור "type", ומאמת את כתובת האתר.

פקודות Cypress

Cypress מספקת מגוון רחב של פקודות לאינטראקציה עם האפליקציה שלך. הנה כמה מהפקודות הנפוצות ביותר:

• `cy.visit(url)`: מנווט לכתובת האתר שצוינה.
• `cy.get(selector)`: בוחר רכיב באמצעות בורר CSS.
• `cy.contains(content)`: בוחר רכיב המכיל את הטקסט שצוין.
• `cy.click()`: לוחץ על הרכיב שנבחר.
• `cy.type(text)`: מקליד טקסט לתוך הרכיב שנבחר.
• `cy.clear()`: מנקה את התוכן של רכיב קלט או textarea.
• `cy.submit()`: שולח טופס.
• `cy.check()`: מסמן תיבת סימון או כפתור רדיו.
• `cy.uncheck()`: מבטל סימון של תיבת סימון.
• `cy.select(value)`: בוחר אפשרות מתוך תפריט נפתח.
• `cy.scrollTo(position)`: גולל את הדף למיקום שצוין.
• `cy.trigger(event)`: מפעיל אירוע DOM על הרכיב שנבחר.
• `cy.request(url, options)`: שולח בקשת HTTP לכתובת האתר שצוינה.
• `cy.intercept(route, handler)`: מיירט בקשות HTTP התואמות לנתיב שצוין.
• `cy.wait(time)`: ממתין למשך הזמן שצוין.
• `cy.reload()`: טוען מחדש את הדף הנוכחי.
• `cy.go(direction)`: מנווט לדף הקודם או הבא בהיסטוריית הדפדפן.
• `cy.url()`: מקבל את כתובת האתר הנוכחית של הדף.
• `cy.title()`: מקבל את הכותרת של הדף.
• `cy.window()`: מקבל את אובייקט החלון.
• `cy.document()`: מקבל את אובייקט המסמך.
• `cy.viewport(width, height)`: מגדיר את גודל אזור התצוגה.

אלו רק כמה מהפקודות הרבות הזמינות ב-Cypress. עיין בתיעוד של Cypress לקבלת רשימה מלאה של פקודות והאפשרויות שלהן.

טענות ב-Cypress

טענות משמשות לאימות ההתנהגות הצפויה של האפליקציה שלך. Cypress מספקת קבוצה עשירה של טענות מובנות שבהן תוכל להשתמש כדי לבדוק את מצב הרכיבים, כתובת האתר, הכותרת ועוד. טענות משורשרות לאחר פקודות Cypress באמצעות השיטה `.should()`.

הנה כמה דוגמאות נפוצות לטענות:

• `.should('be.visible')`: טוען שרכיב גלוי.
• `.should('not.be.visible')`: טוען שרכיב אינו גלוי.
• `.should('be.enabled')`: טוען שרכיב מופעל.
• `.should('be.disabled')`: טוען שרכיב מושבת.
• `.should('have.text', 'expected text')`: טוען שלרכיב יש את הטקסט שצוין.
• `.should('contain', 'expected text')`: טוען שרכיב מכיל את הטקסט שצוין.
• `.should('have.value', 'expected value')`: טוען שלרכיב יש את הערך שצוין.
• `.should('have.class', 'expected class')`: טוען שלרכיב יש את המחלקה שצוינה.
• `.should('have.attr', 'attribute name', 'expected value')`: טוען שלרכיב יש את התכונה והערך שצוינו.
• `.should('have.css', 'css property', 'expected value')`: טוען שלרכיב יש את מאפיין ה-CSS והערך שצוינו.
• `.should('have.length', expected length)`: טוען שלרכיב יש את האורך שצוין (לדוגמה, מספר הרכיבים ברשימה).

ניתן גם ליצור טענות מותאמות אישית כדי להתאים לצרכים הספציפיים שלך.

שיטות עבודה מומלצות לכתיבת בדיקות Cypress

ביצוע שיטות עבודה מומלצות יכול לעזור לך לכתוב בדיקות Cypress ניתנות לתחזוקה, אמינות ויעילות יותר. הנה כמה המלצות:

• כתוב בדיקות ברורות ותמציתיות: כל בדיקה צריכה להתמקד בפונקציונליות או בתרחיש ספציפיים. הימנע מכתיבת בדיקות מורכבות מדי שקשה להבין ולתחזק.
• השתמש בשמות בדיקות משמעותיים: תן לבדיקות שלך שמות תיאוריים המציינים בבירור מה הן בודקות.
• הימנע מקידוד קשיח של ערכים: השתמש במשתנים או בקבצי תצורה כדי לאחסן ערכים שעשויים להשתנות עם הזמן.
• השתמש בפקודות מותאמות אישית: צור פקודות מותאמות אישית כדי לתמצת לוגיקה לשימוש חוזר ולהפוך את הבדיקות שלך לקריאות יותר.
• בודד בדיקות: כל בדיקה צריכה להיות עצמאית מבדיקות אחרות. הימנע מהסתמכות על מצב האפליקציה מבדיקות קודמות.
• נקה לאחר בדיקות: אפס את מצב האפליקציה לאחר כל בדיקה כדי להבטיח שבדיקות עוקבות יתחילו ממצב נקי.
• השתמש בתכונות נתונים: השתמש בתכונות נתונים (לדוגמה, `data-testid`) כדי לבחור רכיבים בבדיקות שלך. תכונות נתונים נוטות פחות להשתנות ממחלקות CSS או מזהים, מה שהופך את הבדיקות שלך לעמידות יותר בפני שינויים בממשק המשתמש.
• הימנע מהמתנות מפורשות: Cypress ממתינה אוטומטית עד שהאלמנטים יהפכו גלויים או ניתנים לאינטראקציה. הימנע משימוש בהמתנות מפורשות (לדוגמה, `cy.wait()`) אלא אם כן יש צורך מוחלט.
• בדוק זרימות משתמשים: התמקד בבדיקת זרימות משתמשים ולא ברכיבים בודדים. זה יעזור לך להבטיח שהאפליקציה שלך פועלת כהלכה מנקודת מבטו של המשתמש.
• הפעל בדיקות באופן קבוע: שלב בדיקות Cypress בצינור ה-CI/CD שלך והפעל אותן באופן קבוע כדי לתפוס באגים מוקדם בתהליך הפיתוח.

טכניקות Cypress מתקדמות

Stubbing ו-Mocking

Cypress מאפשרת לך ליצור Stub עבור בקשות ותגובות רשת, ומאפשרת לך לדמות תרחישים שונים ולבדוק את טיפול השגיאות של האפליקציה שלך. זה שימושי במיוחד לבדיקת תכונות המסתמכות על ממשקי API או שירותים חיצוניים.

כדי ליצור Stub עבור בקשת רשת, אתה יכול להשתמש בפקודה `cy.intercept()`. לדוגמה, הקוד שלהלן יוצר Stub עבור בקשת GET לכתובת `/api/users` ומחזיר תגובה מדומה:

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

לאחר מכן תוכל להמתין לבקשה שיורטה באמצעות `cy.wait('@getUsers')` ולאמת שהאפליקציה שלך מטפלת בתגובה המדומה כהלכה.

עבודה עם אחסון מקומי ועוגיות

Cypress מספקת פקודות לאינטראקציה עם אחסון מקומי ועוגיות. אתה יכול להשתמש בפקודות אלה כדי להגדיר, לקבל ולנקות אחסון מקומי ועוגיות בבדיקות שלך.

כדי להגדיר פריט אחסון מקומי, אתה יכול להשתמש בפקודה `cy.window()` כדי לגשת לאובייקט החלון ולאחר מכן להשתמש בשיטה `localStorage.setItem()`. לדוגמה:

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

כדי לקבל פריט אחסון מקומי, אתה יכול להשתמש בפקודה `cy.window()` ולאחר מכן להשתמש בשיטה `localStorage.getItem()`. לדוגמה:

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

כדי להגדיר עוגייה, אתה יכול להשתמש בפקודה `cy.setCookie()`. לדוגמה:

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

כדי לקבל עוגייה, אתה יכול להשתמש בפקודה `cy.getCookie()`. לדוגמה:

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

טיפול בהעלאות קבצים

Cypress מספקת תוסף בשם `cypress-file-upload` שמפשט את העלאות הקבצים בבדיקות שלך. כדי להתקין את התוסף, הפעל את הפקודה הבאה:

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()` כדי לקבל את אובייקט המסמך של ה-IFrame.

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

Cypress ושילוב רציף/פריסה רציפה (CI/CD)

שילוב של Cypress בצינור ה-CI/CD שלך חיוני להבטחת איכות האפליקציה שלך. אתה יכול להריץ בדיקות Cypress במצב ללא ראש בסביבת ה-CI/CD שלך. כך עושים זאת:

1. התקן את Cypress: ודא ש-Cypress מותקנת כתלות בפרויקט שלך.
2. הגדר את CI/CD: הגדר את צינור ה-CI/CD שלך להרצת בדיקות Cypress לאחר כל בנייה.
3. הפעל את Cypress במצב ללא ראש: השתמש בפקודה `cypress run` כדי להריץ בדיקות Cypress במצב ללא ראש.

תצורת 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'

תצורה זו תריץ בדיקות Cypress בכל פעם שהקוד נדחף לענף `main` או שנוצרת בקשת משיכה כנגד הענף `main`. הפעולה `cypress-io/github-action` מפשטת את תהליך ההרצה של בדיקות Cypress ב-GitHub Actions.

ניפוי באגים בבדיקות Cypress

Cypress מספקת כלי ניפוי באגים מצוינים שיעזרו לך לזהות ולתקן בעיות בבדיקות שלך. הנה כמה טיפים לניפוי באגים בבדיקות Cypress:

• השתמש ב-Cypress Test Runner: ה-Cypress Test Runner מספק ממשק חזותי להרצה וניפוי באגים של הבדיקות שלך. אתה יכול לעבור על הבדיקות שלך פקודה אחת בכל פעם, לבדוק את מצב האפליקציה ולהציג הודעות שגיאה מפורטות.
• השתמש בפקודה `cy.pause()`: הפקודה `cy.pause()` עוצרת את הביצוע של הבדיקה שלך ומאפשרת לך לבדוק את מצב האפליקציה בכלי הפיתוח של הדפדפן.
• השתמש בפקודה `cy.debug()`: הפקודה `cy.debug()` מדפיסה את הרכיב שנבחר לקונסולה, ומאפשרת לך לבדוק את המאפיינים והתכונות שלו.
• השתמש בכלי הפיתוח של הדפדפן: כלי הפיתוח של הדפדפן מספקים שפע של מידע על האפליקציה שלך, כולל ה-DOM, בקשות רשת ויומני קונסולה.
• קרא את הודעות השגיאה בעיון: Cypress מספקת הודעות שגיאה מפורטות שיכולות לעזור לך לזהות את הגורם לשגיאה. שים לב להודעת השגיאה ולעקבות המחסנית.

Cypress לעומת מסגרות בדיקה אחרות

בעוד Cypress היא מסגרת בדיקות מקצה לקצה עוצמתית, חשוב להבין כיצד היא משתווה לאפשרויות פופולריות אחרות. הנה סקירה קצרה:

• Selenium: Selenium היא מסגרת בדיקות אוטומציה בשימוש נרחב. בעוד שהיא גמישה ותומכת במספר שפות, היא יכולה להיות מורכבת להגדרה ולתחזוקה. Cypress מציעה חוויה פשוטה וידידותית יותר למפתחים, במיוחד עבור יישומים מבוססי JavaScript.
• Puppeteer: Puppeteer היא ספריית Node המספקת API ברמה גבוהה לשליטה ב-Chrome או Chromium ללא ראש. היא מצוינת לגירוד ולאוטומציה של משימות דפדפן, אך עשויה לדרוש תצורה ידנית יותר בהשוואה ל-Cypress לבדיקות מקצה לקצה.
• Playwright: Playwright היא מסגרת אוטומציה חוצת דפדפנים נוספת שפותחה על ידי מיקרוסופט. היא חולקת קווי דמיון עם Puppeteer אך מציעה תמיכה רחבה יותר בדפדפנים. ל-Cypress יש כלי ניפוי באגים ייחודי לנסיעה בזמן וחוויית בדיקות משולבת יותר.

הבחירה של המסגרת תלויה בצרכים ודרישות הספציפיות של הפרויקט שלך. Cypress היא בחירה מצוינת עבור יישומי אינטרנט מודרניים הדורשים בדיקות מקצה לקצה מהירות, אמינות וידידותיות למפתחים.

דוגמאות מהעולם האמיתי ל-Cypress בפעולה

בואו נחקור כמה דוגמאות מהעולם האמיתי לאופן שבו ניתן להשתמש ב-Cypress כדי לבדוק סוגים שונים של יישומי אינטרנט:

בדיקת יישום מסחר אלקטרוני

אתה יכול להשתמש ב-Cypress כדי לבדוק זרימות משתמשים שונות ביישום מסחר אלקטרוני, כגון:

• חיפוש מוצרים
• הוספת מוצרים לעגלה
• ביצוע צ'ק-אאוט וביצוע הזמנה
• ניהול הגדרות חשבון

הנה דוגמה לבדיקת Cypress שמוודאת שמשתמש יכול להוסיף מוצר לעגלה שלו בהצלחה:

it('מוסיף מוצר לעגלה', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

בדיקת יישום מדיה חברתית

אתה יכול להשתמש ב-Cypress כדי לבדוק אינטראקציות משתמשים ביישום מדיה חברתית, כגון:

• יצירת פוסט חדש
• לייק לפוסט
• הערות על פוסט
• מעקב אחר משתמשים אחרים

הנה דוגמה לבדיקת Cypress שמוודאת שמשתמש יכול ליצור פוסט חדש בהצלחה:

it('יוצר פוסט חדש', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

בדיקת יישום בנקאות

עבור יישומי בנקאות, ניתן להשתמש ב-Cypress כדי לבדוק פונקציונליות קריטיות כגון:

• כניסה מאובטחת
• בדיקת יתרות חשבון
• העברת כספים
• ניהול מוטבים

בדיקה לאימות העברת כספים עשויה להיראות כך (עם יצירת Stub מתאימה לאבטחה):

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 היא מסגרת בדיקות מקצה לקצה עוצמתית ורב-תכליתית שיכולה לעזור לך להבטיח את האיכות והאמינות של יישומי האינטרנט שלך. ה-API הידידותי למפתחים, התכונות העוצמתיות והביצועים המצוינים הופכים אותה לבחירה פופולרית בקרב מפתחים ומהנדסי QA ברחבי העולם. על ידי ביצוע שיטות העבודה המומלצות המתוארות במדריך זה, תוכל לכתוב בדיקות Cypress יעילות שיעזרו לך לתפוס באגים מוקדם בתהליך הפיתוח ולספק תוכנה באיכות גבוהה למשתמשים שלך.

ככל שיישומי אינטרנט ממשיכים להתפתח, החשיבות של בדיקות מקצה לקצה רק תלך ותגדל. אימוץ Cypress ושילובה בתהליך העבודה של הפיתוח שלך יעצימו אותך לבנות חוויות אינטרנט חזקות, אמינות וידידותיות יותר למשתמש.