Налаштування Cypress-тестів для 1С-Бітрікс

Налаштування Cypress-тестів для 1С-Бітрікс

Cypress — більш сучасна альтернатива Selenium для E2E-тестування фронтенду 1С-Бітрікс. Ключова перевага: тести виконуються всередині браузера, мають повний доступ до DOM і мережі, автоматично чекають появи елементів. Нестабільних тестів («іноді падає, іноді ні») у Cypress менше, ніж у Selenium, тому що немає гонки умов з явними sleep().

Налаштування Cypress-тестів для 1С-Бітрікс

Встановлення і структура

Cypress встановлюється як dev-залежність у папку шаблону або в корінь проєкту:

npm install --save-dev cypress

Структура тестів для проєкту на 1С-Бітрікс:

cypress/
    e2e/
        catalog/
            filter.cy.ts
            product-card.cy.ts
        cart/
            add-to-cart.cy.ts
            checkout.cy.ts
        auth/
            login.cy.ts
    support/
        commands.ts      <- кастомні команди
        e2e.ts           <- глобальні імпорти
    fixtures/
        user.json        <- тестові дані
        product.json
cypress.config.ts

cypress.config.ts для 1С-Бітрікс

import { defineConfig } from 'cypress';

export default defineConfig({
    e2e: {
        baseUrl: 'https://test.site.ru',
        specPattern: 'cypress/e2e/**/*.cy.ts',
        supportFile: 'cypress/support/e2e.ts',
        viewportWidth:  1280,
        viewportHeight: 900,
        defaultCommandTimeout: 8000,
        requestTimeout:        10000,
        video: false,
        screenshotOnRunFailure: true,

        // Налаштування для Бітрікс — сесії та CSRF
        experimentalModifyObstructiveThirdPartyCode: true,
    },
    env: {
        adminLogin:    'admin',
        adminPassword: '', // зі змінної оточення CYPRESS_adminPassword
        siteSessid:    '', // CSRF-токен для API-запитів
    },
});

Кастомні команди для 1С-Бітрікс

// cypress/support/commands.ts
declare global {
    namespace Cypress {
        interface Chainable {
            loginBitrix(login: string, password: string): Chainable<void>;
            addToCart(productUrl: string): Chainable<void>;
            getBitrixSessid(): Chainable<string>;
        }
    }
}

Cypress.Commands.add('loginBitrix', (login, password) => {
    cy.visit('/');
    // Отримуємо sessid з cookie
    cy.getCookie('PHPSESSID').then(() => {
        cy.request({
            method: 'POST',
            url:    '/local/ajax/auth.php',
            body:   { action: 'login', login, password },
        }).then(resp => {
            expect(resp.body.status).to.eq('success');
        });
    });
});

Cypress.Commands.add('addToCart', (productUrl) => {
    cy.visit(productUrl);
    cy.get('[data-action="add-to-cart"]').click();
    // Чекаємо оновлення лічильника кошика
    cy.get('.cart-counter', { timeout: 5000 }).should('not.have.text', '0');
});

E2E-тест каталогу з фільтром

// cypress/e2e/catalog/filter.cy.ts
describe('Розумний фільтр каталогу', () => {
    beforeEach(() => {
        cy.visit('/catalog/tools/');
        // Чекаємо завантаження фільтра і товарів
        cy.get('.catalog-filter').should('be.visible');
        cy.get('.product-list').should('be.visible');
    });

    it('фільтрує товари за брендом', () => {
        cy.get('[data-filter-prop="BRAND"] [value="bosch"]').click();

        // Чекаємо AJAX-оновлення (зникнення лоадера)
        cy.get('.catalog-loading').should('not.exist');

        // URL повинен змінитись
        cy.url().should('include', 'brand=bosch');

        // Всі картки містять бренд Bosch
        cy.get('.product-brand').each($el => {
            cy.wrap($el).should('have.text', 'Bosch');
        });
    });

    it('скидає фільтр', () => {
        cy.get('[data-filter-prop="BRAND"] [value="bosch"]').click();
        cy.get('.catalog-loading').should('not.exist');

        cy.get('.filter-reset-btn').click();
        cy.get('.catalog-loading').should('not.exist');

        cy.url().should('not.include', 'brand=bosch');
    });

    it('відображає коректну кількість товарів у лічильнику фільтра', () => {
        // Перевіряємо, що лічильник оновлюється при зміні фільтра
        cy.get('[data-filter-prop="BRAND"] [value="makita"]').click();
        cy.get('.catalog-loading').should('not.exist');

        cy.get('.products-count').invoke('text').then(text => {
            const count = parseInt(text.replace(/\D/g, ''));
            cy.get('.product-card').should('have.length', Math.min(count, 24)); // 24 — pageSize
        });
    });
});

Тест форми замовлення

// cypress/e2e/cart/checkout.cy.ts
describe('Оформлення замовлення', () => {
    it('успішно оформлює замовлення гостем', () => {
        // Додаємо товар у кошик через UI
        cy.addToCart('/catalog/tools/drills/bosch-gsh/');
        cy.visit('/cart/');
        cy.get('.checkout-btn').click();

        // Заповнюємо форму замовлення
        cy.get('#ORDER_PROP_1').type('Іван Іванов');               // Ім'я
        cy.get('#ORDER_PROP_2').type('[email protected]');           // Email
        cy.get('#ORDER_PROP_3').type('+79001234567');                // Телефон
        cy.get('#ORDER_PROP_6').type('м. Київ, вул. Тестова, 1'); // Адреса

        // Вибираємо доставку
        cy.get('[name="DELIVERY_ID"][value="1"]').click();

        // Вибираємо оплату
        cy.get('[name="PAY_SYSTEM_ID"][value="1"]').click();

        // Приймаємо користувацьку угоду
        cy.get('#agree').check();

        // Відправляємо замовлення
        cy.get('.order-submit-btn').click();

        // Чекаємо сторінки успішного замовлення
        cy.url({ timeout: 15000 }).should('include', '/personal/order/');
        cy.get('.order-success-message').should('be.visible');
    });
});

Перехоплення AJAX-запитів до 1С-Бітрікс

// Мокування AJAX-відповіді для ізольованого тестування
cy.intercept('POST', '/local/ajax/cart.php', {
    statusCode: 200,
    body: {
        status: 'success',
        cart: { items: [], totalCount: 0, totalPrice: 0 },
    },
}).as('cartRequest');

cy.get('[data-action="add-to-cart"]').click();
cy.wait('@cartRequest').its('response.statusCode').should('eq', 200);

Терміни