Playwright למתחילים: מדריך מעשי לאוטומציה של בדיקות תוכנה

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

במדריך הזה נלמד את הבסיס בצורה הדרגתית: מהו Playwright, אילו ידע וכלים נדרשים, איך מתקינים אותו, איך כותבים בדיקה ראשונה, כיצד מאתרים רכיבים בעמוד ואיך בונים תרחישים שימושיים למערכות אמיתיות.

1. מה זה Playwright?

Playwright הוא כלי אוטומציה בקוד פתוח שפותח על ידי Microsoft ומאפשר לשלוט בדפדפנים באמצעות קוד. בעולם בדיקות התוכנה משתמשים בו כדי לבדוק אתרים ואפליקציות Web, לבצע פעולות משתמש ולוודא שהתוצאות המתקבלות נכונות.

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

מה אפשר לבדוק באמצעות Playwright?

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

להיכרות רחבה יותר עם הכלי, מומלץ לקרוא גם את המדריך Playwright – מה זה ואיך משתמשים בו לבדיקות?.

2. מה צריך לדעת לפני שמתחילים ללמוד Playwright?

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

היכרות בסיסית עם JavaScript

במדריך הזה נשתמש ב-JavaScript ובסביבת Node.js. כדאי להכיר משתנים, מחרוזות, פונקציות, תנאים, מערכים ואת המבנה הבסיסי של קוד אסינכרוני, כולל המילים async ו-await.

לדוגמה:

const userName = 'Test User';

console.log(userName);

בדוגמה הזאת הגדרנו משתנה בשם userName והדפסנו את הערך שלו. בהמשך נשתמש במשתנים כדי לשמור נתוני בדיקה ולהעביר אותם לשדות באתר.

מושגים בסיסיים בבדיקות תוכנה

• Test Case: תרחיש בדיקה שמגדיר מה בודקים ומה אמור לקרות.
• Expected Result: התוצאה הצפויה לפי הדרישות.
• Actual Result: התוצאה שהתקבלה בפועל.
• Bug: התנהגות שאינה תואמת לדרישות או לציפיות שהוגדרו.
• Regression Testing: בדיקות שמטרתן לזהות אם שינוי חדש גרם לתקלות בתפקוד שכבר עבד.

אם אתם חדשים בתחום, תוכלו להשלים את הבסיס בעזרת המדריך מה זה QA? מדריך מלא לבדיקות תוכנה.

3. התקנת Playwright צעד אחר צעד

כדי להתחיל לעבוד עם Playwright ב-JavaScript, יש להתקין את Node.js וליצור פרויקט בדיקות. ההתקנה הראשונית אורכת בדרך כלל דקות ספורות, בהתאם למחשב ולחיבור האינטרנט.

שלב ראשון: התקנת Node.js

היכנסו לאתר הרשמי של Node.js והתקינו גרסת LTS נתמכת.

לאחר ההתקנה, פתחו את הטרמינל או את שורת הפקודה והריצו:

node -v
npm -v

אם מופיעות גרסאות מספריות, סימן שהפקודות זמינות. אם מתקבלת הודעת שגיאה, בדקו שההתקנה הושלמה ושנתיב ההתקנה מוגדר כראוי.

שלב שני: יצירת פרויקט חדש

בחרו תיקייה שבה תרצו לשמור את הפרויקט. לאחר מכן הריצו את הפקודות הבאות:

mkdir playwright-demo
cd playwright-demo
npm init playwright@latest

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

אם הדפדפנים אינם מותקנים, אפשר להריץ:

npx playwright install

שלב שלישי: הכרת מבנה הפרויקט

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

playwright-demo/
├── tests/
│   └── example.spec.js
├── playwright.config.js
├── package.json
└── node_modules/

tests היא התיקייה שבה שומרים את תרחישי הבדיקה. הקובץ playwright.config.js משמש להגדרות ההרצה, ואילו package.json מכיל מידע על הפרויקט ועל התלויות שלו.

4. כתיבת בדיקה אוטומטית ראשונה ב-Playwright

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

צרו קובץ בשם homepage.spec.js בתוך תיקיית tests, והכניסו אליו את הקוד הבא:

const { test, expect } = require('@playwright/test');

test('homepage displays the expected title', async ({ page }) => {
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle(/Example Domain/);
});

מה עושה כל שורה?

שימו לב לשימוש ב-async וב-await. פעולות רבות ב-Playwright מתבצעות באופן אסינכרוני, ולכן await מאפשר להמתין להשלמת הפעולה לפני שממשיכים לשלב הבא.

איך מריצים את הבדיקה?

מתוך תיקיית הפרויקט, הפעילו:

npx playwright test

כדי לראות את הדפדפן בזמן הבדיקה, השתמשו בפקודה:

npx playwright test --headed

אפשר גם לפתוח ממשק אינטראקטיבי שמקל על בחירת בדיקות ועל תחקור התוצאות:

npx playwright test --ui

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

5. איך מאתרים כפתורים ושדות ב-Playwright?

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

איתור כפתור לפי תפקיד ושם

נניח שיש באתר כפתור בשם "התחברות". ניתן לאתר אותו לפי התפקיד שלו והשם הנגיש:

await page.getByRole('button', {
  name: 'התחברות'
}).click();

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

איתור שדות טופס

אם בטופס יש שדות עם תוויות מתאימות, אפשר להשתמש ב-getByLabel():

await page.getByLabel('Email').fill('qa@example.com');
await page.getByLabel('Password').fill('TestPassword123!');

הפקודה fill() ממלאת את השדה בערך שנמסר לה. בדוגמה השתמשנו בפרטי בדיקה בלבד. בפרויקט אמיתי יש להימנע משמירת סיסמאות אמיתיות בקוד.

שיטות איתור נפוצות

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

6. דוגמאות מעשיות למתחילים

דוגמה א': בדיקת הודעה שמופיעה בעמוד

נניח שאתם רוצים לוודא שכותרת מסוימת מוצגת לאחר פתיחת העמוד:

const { test, expect } = require('@playwright/test');

test('page displays welcome heading', async ({ page }) => {
  await page.goto('https://example.com/');

  await expect(
    page.getByRole('heading', { name: 'Example Domain' })
  ).toBeVisible();
});

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

דוגמה ב': לחיצה על כפתור ובדיקת התוצאה

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

test('details button displays information', async ({ page }) => {
  await page.goto('https://your-app.example/details');

  await page.getByRole('button', {
    name: 'הצגת פרטים'
  }).click();

  await expect(
    page.getByText('הפרטים זמינים לצפייה')
  ).toBeVisible();
});

כתובת האתר והטקסטים כאן הם דוגמאות בלבד. כדי להריץ את הבדיקה, יש להחליף אותם בכתובת וברכיבים שקיימים במערכת שלכם.

דוגמה ג': בדיקת טופס התחברות

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

const { test, expect } = require('@playwright/test');

test('user can log in', async ({ page }) => {
  await page.goto('https://your-app.example/login');

  await page.getByLabel('Email').fill('qa@example.com');
  await page.getByLabel('Password').fill('ValidTestPassword123!');

  await page.getByRole('button', {
    name: 'Log in'
  }).click();

  await expect(page).toHaveURL(/dashboard/);

  await expect(
    page.getByRole('heading', { name: 'Dashboard' })
  ).toBeVisible();
});

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

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

דוגמה ד': בדיקת הודעת שגיאה

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

test('invalid login displays an error', async ({ page }) => {
  await page.goto('https://your-app.example/login');

  await page.getByLabel('Email').fill('wrong@example.com');
  await page.getByLabel('Password').fill('WrongPassword123!');

  await page.getByRole('button', {
    name: 'Log in'
  }).click();

  await expect(
    page.getByRole('alert')
  ).toContainText('פרטי ההתחברות אינם תקינים');
});

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

דוגמה ה': בדיקת תהליך מקצה לקצה

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

לקריאה נוספת, עברו למדריך בדיקות E2E – איך בונים תרחיש בדיקה מקצה לקצה.

7. איך מריצים בדיקות וצופים בתוצאות?

אחרי שכתבתם כמה בדיקות, חשוב לדעת כיצד להריץ אותן, לזהות כשלים ולהבין מה גרם להם.

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

8. טעויות נפוצות של מתחילים ואיך לפתור אותן

הבדיקה נכשלת מפני שהרכיב לא נמצא

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

הבדיקה נכשלת בגלל המתנה קצרה מדי

מתחילים לפעמים מוסיפים השהיות קבועות באמצעות waitForTimeout(). השהיה כזאת עלולה להאט את הבדיקה ועדיין לא לפתור את הבעיה. בדרך כלל עדיף להמתין לתנאי מוגדר באמצעות Locator ו-Assertion מתאימים.

הבדיקה עוברת פעם אחת ונכשלת בפעם אחרת

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

הבדיקה עוברת אבל לא באמת בודקת את הדרישה

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

למידע נוסף על תכנון תהליך אוטומציה, קראו את המאמר איך בונים תהליך אוטומציה לבדיקות תוכנה.

9. תוכנית לימוד Playwright למתחילים

במקום ללמוד את כל היכולות של Playwright בבת אחת, מומלץ להתקדם לפי שלבים ולתרגל בכל שלב על דוגמה מעשית.

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

הרחבה בנושא נמצאת במאמר מתי לא כדאי לבצע אוטומציה לבדיקות תוכנה?.

10. מה כדאי ללמוד אחרי Playwright הבסיסי?

לאחר שתצליחו לכתוב ולהריץ בדיקות פשוטות, תוכלו להרחיב את הידע שלכם בכמה תחומים מרכזיים:

• בדיקות API: בדיקת תגובות HTTP, נתוני JSON, הרשאות וטיפול בשגיאות.
• בדיקות E2E: אימות תהליכים מלאים מנקודת המבט של המשתמש.
• בדיקות חוצות דפדפנים: הרצת תרחישים ב-Chromium, Firefox ו-WebKit.
• דוחות ותחקור: עבודה עם Trace, צילומי מסך ודוחות HTML.
• שילוב ב-CI/CD: הרצת בדיקות באופן אוטומטי כחלק מתהליך הפיתוח.

להמשך לימוד מומלץ לעיין במדריך בדיקות API עם Playwright – מדריך מעשי לאוטומציה של שירותים.

11. שאלות נפוצות על Playwright למתחילים