Подход к ведению тестовой документации и выбранные для этого инструменты — важная часть процесса разработки, которая напрямую влияет на качество продукта. Особенно важно поддерживать тестовую документацию в актуальном виде. Qase может быть одним из подходящих для этого инструментов. Кроме того, он помогает объединить мир ручного тестирования с автоматизированным, а описанные тест-кейсы — с их исполнением.

В статье мы рассмотрим реализацию связки Qase с Playwright и GitLab CI, которую мы используем в SmartHead: от создания проекта до получения отчетов об автоматизированном тестировании.

Преимущества использования Qase, Playwright и GitLab CI

Qase предлагает широкую функциональность для управления тестированием, включая тест-кейсы, чек-листы, тестовые прогоны и планы, а также интеграции с баг-трекинговыми инструментами. В сочетании с Playwright и GitLab CI это дает следующие преимущества:

1. Централизованное управление тестами: Удобный интерфейс для ведения всех тест-кейсов, планов и прогонов.

2. Автоматическое создание и синхронизация тестов: Обеспечение актуальности тест-кейсов и минимизация рисков дублирования.

3. Простота интеграции и использования: Playwright облегчает написание и поддержку тестов, а GitLab CI автоматизирует их выполнение при каждом изменении в коде.

4. Подробные и наглядные отчеты: Qase предоставляет детальные отчеты о выполнении тестов, что помогает быстро выявлять и исправлять ошибки.

5. Запуск тестов локально или в CI: Возможность запуска тестов на локальном компьютере или в CI/CD пайплайне с автоматической синхронизацией информации о каждом прогоне и тест-кейсе в Qase.

6. Запуск пайплайнов прямо из Qase: Более интегрированный и автоматизированный процесс тестирования. Отчеты доступны как в Qase, так и в GitLab после каждого прогона.

7. Поддержка вложений: Возможность прикреплять скриншоты, логи, записи прохождения тестов и другие файлы к отчетам для детального анализа ошибок и проблем.

Перейдем к реализации.

Шаг 1: Создание проекта в Qase

Создать новый проект в Qase

1. Зарегистрируйтесь или войдите в свою учетную запись в Qase.

2. Создайте новый проект, указав его название и другие необходимые данные.

Скрин с примером нового репозитория в Qase

Настройка автоматического создания тест-кейсов

В настройках проекта (Settings > Run) включите опцию автоматического создания новых тест-кейсов при отсутствии совпадений. Это поможет избежать дублирования и поддерживать актуальность базы данных.

При отключении этой функции, название тест-кейса из кода будет отображаться в прогоне тестов, но в репозиторий он не добавится. При включении функции, если тест-кейс не отмечен как существующий (не указан id из Qase), то новый тест-кейс будет добавлен в репозиторий проекта автоматически.

Создать несколько тест-кейсов в проекте

1. Создайте 1-2 тест-кейса. Они понадобятся нам для дальнейших шагов.

2. Укажите основные параметры, такие как название, описание и шаги выполнения теста.

Шаг 2: Настройка интеграции Qase + Playwright

Установить Playwright и playwright-qase-reporter

1. Перейдите в корень проекта.

2. Следуя инструкциям, установите Playwright.

3. Также, по инструкции, установите репортер для Qase. 

Настроить интеграцию в Qase

1. Войдите в Qase.

2. Перейдите в раздел «Apps».

3. Найдите и выберите Playwright.

4. Установите интеграцию и сохраните созданный токен. Имя можете дать любое понятное, оно нигде не будет использоваться, только сам токен.

Скрин активации Playwright в Qase

Настройка конфигурации в Playwright

1. Создайте файл .env. В нем будут храниться наши sensitive data для локального запуска. Туда мы добавим скопированный токен из Qase

Скрин Qase токен в Playwright

2. После установки Playwright в корне проекта появится playwright.config.ts. Откройте файл и добавьте следующую конфигурацию:

import { defineConfig, devices } from '@playwright/test';
require('dotenv').config({ path: '.env' }); // Необходим для использования переменных в .env

export default defineConfig({
  testDir: './tests', // Ваш репозиторий с тестами
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,

  reporter: [
    ['list'],
    ['playwright-qase-reporter',
      {
        testops: {
          project: 'TEST', // Ваш код проекта из Qase
          api: {
            token: process.env.QASE_TOKEN, // Токен из .env
          },
          run: {
            id: process.env.QASE_RUN_ID,
            complete: true,
          },
          uploadAttachments: true,
        },
      }],
  ],

  use: {
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    }
  ],

});

Не забудьте добавить файл .env в .gitignore, чтобы случайно не запушить токен в репозиторий.

Про id в Qase runs

id: process.env.QASE_RUN_ID

Указание QASE_RUN_ID в конфиге нужно для того, чтобы не создавались разные прогоны в Qase. Без этой настройки автоматическому прогону, который мы создадим в Qase, и прогону, который запустит пайплайн, присвоятся разные id. Таким образом, мы четко указываем: «Пойди, посмотри, есть ли уже созданный QASE_RUN_ID, и если да, то положи тесты из прогона в пайплайне туда»

Прописать id кейсов в тестах

Для связывания тестов из Playwright с тестами из репозитория Qase нам необходимо прописать дополнительно их id в тестах. Названия, для удобства, лучше давать идентичные тем, что записаны в Qase. Хотя так или иначе в тестовом прогоне будет указано название кейса, чей id вы указали.

// test.spec.ts
import { test, expect } from '@playwright/test';
import { qase } from 'playwright-qase-reporter';

test('Отображение тайтла главной страницы Playwright', async ({ page }) => {
   qase.id(1); // ID тест-кейса в Qase

   // Step #1
   await page.goto('https://playwright.dev/');
   await expect(page).toHaveURL('https://playwright.dev/');
   // Expected result: Страница открывается

   // Step #2
   const title = await page.getByText('Playwright enables reliable end-to-end testing for modern web apps.');
   await expect(title).toBeVisible();
   // Expected result: Тайтл отображается
});

Также для примера напишем тест, в котором не будем указывать qase.id():

test('Тест, которого нет в репозитории', async ({ page }) => {
   // Step #1
   await page.goto('https://playwright.dev/');
   await expect(page).toHaveURL('https://playwright.dev/');
   // Expected result: Страница открывается

   // Step #2
   const title = await page.getByText('Playwright enables reliable end-to-end testing for modern web apps.');
   await expect(title).toBeVisible();
   // Expected result: Тайтл отображается
});

Запуск тестов

Запустите тесты с помощью команды, указав ваш путь к тестам:

QASE_MODE=testops npx playwright test tests/test.spec.ts

Проверка результатов в Qase

После успешного прохождения тестов вы получите в консоли ссылку на ваш прогон в Qase.

Прямо из консоли мы можем перейти по ссылке и увидеть только что пройденный тестовый прогон.

Вы также можете поделиться им, сделав ссылку публичной или оставить её приватной. Также вы можете посмотреть подробно все шаги прохождения каждого отдельного кейса, время его прохождения, перейти по ссылке, чтобы посмотреть Pipeline и прочее.

Скрин готового тестового прогона в Qase

Кейс, который был указан с id подтянет существующий кейс из Qase. В нем будут подтянуты шаги, указанные вами и вся остальная информация.

Кейс же без указания id будет по дефолту подтягиваться в таком состоянии:

В репозитории проекта также появится тест-кейс, которого раньше не было. Он создастся благодаря настройке, которую мы добавили в начале статьи (Настройка автоматического создания тест-кейсов). Если отключить эту настройку, тесты будут проходить, но новые добавляться в репозиторий не будут.

Рекомендация: при последующих запусках новый кейс создаваться не будет, но я бы советовала прописывать id в коде каждого кейса для того, чтобы не создавалась путаница.

Шаг 3: Интеграция Qase с GitLab CI

Создайте проект на GitLab, если он еще не создан. Также проверьте, чтобы CI/CD был включен в разделе «Settings» -> «General» -> «Visibility, project features, permissions».

Настроить переменные в GitLab

Благодаря созданному .env мы сможем безопасно хранить данные на проекте, но для запуска тестов в CI нам необходимо как-то делиться этими данными с GitLab. Для этого существуют Variables в GitLab.

Чтобы добавить свою переменную, необходимо:

1. Зайдите в «Settings» -> «CI/CD». Здесь мы можем сохранить информацию, аналогичную файлу .env, чтобы использовать в дальнейшем.

2. Нажмите Add variable и в открывшемся окне введите в Key QASE_TOKEN, а в Value — значения токена.

3. Сохраните данные:)

Скрин сохраненной переменной в git

Настроить файл .gitlab-ci.yml в проекте

Существует множество доступных статей по CI/CD, с помощью которых вы сможете выбрать для себя наиболее подходящий способ использовать его. Я лишь покажу малую часть, которая поможет интегрироваться с Qase.

Для начала добавьте в корень проекта файл .gitlab-ci.yml. Пример минимальной конфигурации .gitlab-ci.yml будет включать в себя:

1. Использование официального образа Docker от Playwright.

2. Установка зависимостей.

3. Запуск тестов с отправкой отчетов в Qase.

stages:
  - test

test:
  stage: test
  image: mcr.microsoft.com/playwright:v1.42.1-jammy
  script:
    - npm ci
    - npx playwright install
    - QASE_MODE=testops npx playwright test tests/test.spec.ts

Не забудьте запушить код в ваш репозиторий GitLab.

После этого запустится пайплайн и в Qase сформируется отчет о прохождении тестов аналогичный ранее сформированному.

Создать автоматический тест-ран в Qase

После всех проделанных настроек мы можем запустить прогон в Qase, который создаст пайплайн в GitLab и запустит тесты.

1. Перейдите в Qase.

2. Откройте раздел Test Runs и нажмите Start new test run

3. В настройках тестового прогона внесите необходимые данные, выберите интеграцию с GitLab, укажите нужный проект, ветку и запустите тесты.

Скрин Start new test run

После выполнения прогона также сформируется отчет.

Таким образом, мы запустили автотесты тремя способами: локально, при изменении кода в репозитории, при создании автоматического прогона в Qase. В каждом случае отчет был отправлен в Qase.

Заключение

Для создания программного обеспечения важно эффективно использовать современные инструменты автоматизации и тестирования. Интеграция Qase, Playwright и GitLab CI представляет собой отличную комбинацию, которая поможет улучшить процесс разработки и тестирования.

Автоматизация тестирования с помощью Playwright позволяет быстро и надежно проверять функциональность приложений на различных платформах и браузерах, сокращая время на тестирование. GitLab CI обеспечивает автоматическое выполнение тестов при каждом обновлении кода, что помогает раньше обнаруживать и устранять ошибки. А интеграция с Qase даёт возможность видеть полную картину внутри одной системы: от создания тест-кейса до его автоматизированного выполнения и получения подробного отчета.