בדיקות E2E אוטומטיות עבור 1C-Bitrix עם Playwright

החשיבות של בדיקות E2E עבור Bitrix

לאחר כל עדכון של מודול, תבנית או אינטגרציית API, מישהו בודק ידנית את העגלה, תהליך הרכישה וחשבון המשתמש. התהליך אורך 2–3 שעות אך עדיין מפספס רגרסיות: אף בודק לא יכול בסדרה אחת לכסות חמישה דפדפנים, תצוגות מובייל והתחברות דרך רשתות חברתיות. עם יותר מ-50 פרויקטי Bitrix מאחורינו — בכשליש מהמקרים השחרור התעכב בדיוק בגלל רגרסיה שהתגלתה ברגע האחרון. בדיקות E2E פותרות זאת אוטומטית: הן רצות תוך 15–20 דקות ותופסות באופן עקבי את המקרים שבני אדם מפספסים. זה מקצר את זמן בדיקות הרגרסיה ביותר מ-80%.

איך אנחנו עושים זאת

אנחנו מקימים את סביבת הבדיקות, בוחרים את הכלי, כותבים Page Object Model עבור רכיבים מרכזיים ומשלבים את ההרצה ב-CI/CD שלכם. אנחנו מספקים פתרון מלא — מבדיקת הארכיטקטורה הקיימת ועד מסירת תיעוד והדרכת הצוות שלכם.

תהליך שלב-אחר-שלב

1. בדיקה: ניתוח רכיבי Bitrix קיימים, טיפול ב-AJAX וזרימות משתמש קריטיות. (1–2 ימים)
2. תכנון: יישור רשימת התרחישים עם הצוות שלכם, קביעת סדרי עדיפויות לכיסוי. (יום אחד)
3. יישום: כתיבת Page Object Model עבור 5–10 רכיבים מרכזיים ו-15–30 תרחישי בדיקה. (3–5 ימים)
4. אינטגרציית CI/CD: הגדרת הרצות אוטומטיות על push ל-main/staging עם שמירת ארטיפקטים. (יום אחד)
5. מסירה: מתן תיעוד וסדנת 2–3 שעות לצוות שלכם. (יום אחד)

Playwright מול Cypress עבור Bitrix: השוואה

Playwright מריץ בדיקות עד פי 2 מהר יותר מ-Cypress בזכות ביצוע מקבילי ותמיכה טבעית במספר דפדפנים (התיעוד הרשמי של Playwright). הוא תומך בכל הדפדפנים בהרצה אחת, עובד גם במצב headless וגם במצב עם ממשק, ויש לו API חזק ללוקיישנים שלא נשבר כשהדום משתנה. אמולציית מכשירים מובנית ויירוט רשת הם בדיוק מה שצריך לבדיקת sale.order.ajax עם האופי האסינכרוני שלו.

Cypress מצוין עבור SPA, אבל עבור אתרי Bitrix מרובי-עמודים המגבלות שלו (מקור יחיד, חוסר תמיכה טבעית בטאבים מרובים) יוצרות בעיות. בפרויקטים שלנו אנחנו משתמשים ב-Playwright ב-9 מתוך 10 מקרים.

תשתית סביבת הבדיקות

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

tests/ e2e/ fixtures/ # JSON с тестовыми данными pages/ # Page Object Model specs/ # сценарии playwright.config.ts 

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e/specs',
  timeout: 30_000,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: process.env.TEST_BASE_URL || 'https://test.shop.example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'mobile',
      use: { ...devices['iPhone 13'] },
    },
  ],
});

Page Object Model עבור Bitrix

לרכיבים סטנדרטיים כמו tests/ e2e/ fixtures/ # JSON с тестовыми данными pages/ # Page Object Model specs/ # сценарии playwright.config.ts , // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests/e2e/specs', timeout: 30_000, retries: process.env.CI ? 2 : 0, use: { baseURL: process.env.TEST_BASE_URL || 'https://test.shop.example.com', trace: 'on-first-retry', screenshot: 'only-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'mobile', use: { ...devices['iPhone 13'] } }, ], }); ו-bitrix:sale.order.ajax יש מחלקות CSS יציבות. Page Object מבודד את הלוקיישנים מהבדיקות — אם תבנית משתנה בגרסה חדשה, עורכים קובץ אחד במקום את כל התרחישים.

// tests/e2e/pages/CartPage.ts
import { Page, Locator } from '@playwright/test';

export class CartPage {
  readonly page: Page;
  readonly checkoutButton: Locator;
  readonly totalPrice: Locator;

  constructor(page: Page) {
    this.page = page;
    this.checkoutButton = page.locator('.basket-checkout-btn');
    this.totalPrice = page.locator('.basket-coupon-block-total-price-current');
  }

  async goto() {
    await this.page.goto('/personal/cart/');
  }

  async applyPromocode(code: string) {
    await this.page.fill('.basket-coupon-field-input', code);
    await this.page.click('.basket-coupon-apply-btn');
    await this.page.waitForResponse(resp => resp.url().includes('ajax_basket') && resp.status() === 200 );
  }
}

תרחישים מרכזיים

הוספה לעגלה ותהליך רכישה:

// tests/e2e/specs/checkout.spec.ts
import { test, expect } from '@playwright/test';
import { CartPage } from '../pages/CartPage';

test('checkout flow', async ({ page }) => {
  // Добавляем товар со страницы каталога
  await page.goto('/catalog/electronics/headphones/sennheiser-hd-599/');
  await page.click('.catalog-element-offer-set-item:first-child'); // выбор SKU
  await page.click('.btn-buy');
  await expect(page.locator('.bx-basket-count')).toContainText('1');

  // Переход в корзину
  const cart = new CartPage(page);
  await cart.goto();
  await expect(cart.totalPrice).toBeVisible();

  // Оформление
  await cart.checkoutButton.click();
  await page.fill('#order-name', 'Иван Иванов');
  await page.fill('#order-email', '[email protected]');
  await page.fill('#order-phone', '+79001234567');
  await page.click('#pay-system-1'); // выбор способа оплаты
  await Promise.all([
    page.waitForURL(/\/order\/success\//),
    page.click('.btn-checkout-submit'),
  ]);
  await expect(page.locator('.sale-order-detail-result')).toBeVisible();
});

התחברות וחשבון אישי:

test('login and account access', async ({ page }) => {
  await page.goto('/personal/login/');
  await page.fill('#USER_LOGIN', '[email protected]');
  await page.fill('#USER_PASSWORD', 'testpassword123');
  await page.click('.login-btn');
  await expect(page).toHaveURL(/\/personal\//);
  await expect(page.locator('.personal-user-name')).toContainText('Иван');
});

אינטגרציית CI/CD

אנחנו מגדירים הרצות בדיקות על כל push ל-main/staging. במקרה של כישלון, ארטיפקטים (צילומי מסך, traces) נשמרים לניתוח. דוגמה לקונפיגורציית GitHub Actions:

# .github/workflows/e2e.yml
name: E2E Tests
on:
  push:
    branches: [main, staging]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test
        env:
          TEST_BASE_URL: ${{ secrets.TEST_BASE_URL }}
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

מה כלול בהקמת E2E (מה שאנחנו מספקים)

• בדיקת ארכיטקטורה קיימת: אילו רכיבים בשימוש, איך מיושמת אסינכרוניות, אילו תרחישים קריטיים.
• תכנון כיסוי בדיקות: יישור רשימת התרחישים עם הצוות שלכם.
• כתיבת Page Object Model עבור 5–10 רכיבים מרכזיים.
• יישום 15–30 תרחישי בדיקה (עגלה, תהליך רכישה, אימות, סינון, קודי קופון, חשבון אישי).
• הגדרת הרצת CI/CD (GitHub Actions / GitLab CI / Jenkins).
• תיעוד להרצה ותחזוקת הבדיקות.
• הדרכת צוות: סדנת 2–3 שעות על הוספת תרחישים חדשים.

עלות ההקמה נעה בדרך כלל בין $2,500 ל-$7,500, תלוי במספר התרחישים והמורכבות. לדוגמה, פרויקט טיפוסי עם 20 תרחישים עולה כ-$5,000 וחוסך כ-$2,000 בחודש בעלויות בדיקות ידניות. ההשקעה הזו מחזירה את עצמה בדרך כלל תוך 2–3 חודשים דרך הפחתת עלויות בדיקות הרגרסיה הידניות.

תרחישים בעדיפות גבוהה לבדיקות E2E

יציבות הבדיקות היא המטרה המרכזית. אנחנו משתמשים ב-sale.order.ajax במקום ב-system.auth.form, בלוקיישנים לפי search.title כאשר מחלקות CSS סטנדרטיות משתנות עם עדכוני תבנית. כשבדיקות לא יציבות, הבעיה היא כמעט תמיד באסינכרוניות של AJAX של Bitrix, לא ב-Playwright.

הניסיון וההבטחות שלנו

אנחנו שותפים מוסמכים של 1C-Bitrix עם ניסיון של למעלה מ-5 שנים. בתקופה זו יישמנו בדיקות E2E עבור 20+ פרויקטים ברמות מורכבות שונות — מחנויות מקוונות קטנות ועד פורטלים ארגוניים על Bitrix24. אנחנו מבטיחים יציבות בדיקות: לאחר המסירה, בדיקות לא נכשלות על שינויים ריקים. אם עולות שאלות, אנחנו מספקים ייעוץ חינמי למשך חודש לאחר המסירה.

הזמנת הקמה

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

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