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

1. יצירת פרויקט בדיקות

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

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

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

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

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

npm init playwright@latest

לאחר מכן חיברנו את קלוד קוד לדפדפן בעזרת MCP עם הפקודה:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

וגם התקנו את ה Skill של פליירייט עם הפקודה:

playwright-cli install --skills

אחרי שההתקנות הסתיימו אנחנו יכולים להתחיל לכתוב בדיקות.

2. הדגמה ראשונה - סוכן כותב בדיקה

כתבתי את הפרומפט הבא:

Use playwright

  Implement a first test in a new test file

  Test langlets.app loads, the click "Sign in" In the top right corner
  Then verify we are in the login page

  Iterate until the test pass.
  Use a real browser to check the site and understand its structure

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

import { test, expect } from '@playwright/test';

test('sign in link in the top right corner opens the login page', async ({ page }) => {
  await page.goto('https://langlets.app/');

  // The home page is loaded.
  await expect(page.getByRole('heading', { level: 1 })).toContainText(
    'Practice your target language with videos you love'
  );

  // Click "Sign in" in the top right corner (the page body has another
  // "Sign in" button, so scope the locator to the navigation).
  await page.getByRole('navigation').getByRole('link', { name: 'Sign in' }).click();

  // We are on the login page.
  await expect(page).toHaveURL(/\/users\/sign_in$/);
  await expect(page.getByRole('heading', { name: 'Log in' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Email or username' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'LOG IN' })).toBeVisible();
});

בשביל להריץ את הבדיקות אני כותב:

npx playwright test

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

בשביל הנוחות אני מוסיף לקובץ package.json סקריפט להרצה מהירה של הבדיקות:

{
  "name": "testlanglets",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "playwright test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "@playwright/test": "1.62.0",
    "@types/node": "26.1.2"
  }
}

וכך אוכל לכתוב:

npm run test

כדי להריץ את הבדיקות.

3. דוגמה 2 - כתיבת בדיקה אינטרקטיבית עם AI

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

1. פתח חלון דפדפן חדש.
2. התחבר ל https://langlets.app/app/import_requests.
3. ספר לי מה קרה.

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

ok that's actually the good behaviour
write a playwright test to verify what we just saw

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

import { test, expect } from '@playwright/test';

test('a signed out visitor is redirected from /app/import_requests to the login page', async ({
  page,
}) => {
  const response = await page.goto('https://langlets.app/app/import_requests');

  // The guarded page itself answers with a redirect...
  const redirect = response?.request().redirectedFrom();
  expect(redirect).toBeTruthy();
  expect(redirect!.url()).toBe('https://langlets.app/app/import_requests');
  expect((await redirect!.response())?.status()).toBe(302);

  // ...and we end up on the login page, not on the protected content.
  expect(response?.status()).toBe(200);
  await expect(page).toHaveURL(/\/users\/sign_in$/);
  await expect(page.getByRole('heading', { name: 'Log in' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Email or username' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'LOG IN' })).toBeVisible();
});

4. דוגמה 3 - חקור את האתר

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

explore the site and implement playwright tests for important functionality

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