Додаємо ChatGPT в TestRail для автоматизації генерації тестових сценаріїв

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Привіт, з вами Артур і сьогодні ми будемо вбудовувати телевізор в телевізор ШІ У TestRail!

Я люблю ШІ та все, що з ним повʼязано, і уже майже не уявляю уже свого життя без цих помічників.

А також люблю автоматизовувати робочі процеси у компанії і робити життя людей легшим. В цій статті я хочу покроково розказати, як ви можете інтегрувати генеративний штучний інтелект у TestRail. Конкретно тут буду показувати на прикладі ChatGPT, але можна взяти будь-який чат-бот.

Що саме ми будемо робити за допомогою ШІ? Генерувати тестові сценарії у вигляді чекліста.

Які наші дії?

• Перше: нам треба підготувати та закинути грошей в OpenAI.
• Друге: написати діалогове вікно на JS+HTML+CSS для нашої інтеграції.
• Третє: змінити налаштунки в TestRail для дозволу відправляти запити.
• Четверте: прикрутити відправлення запитів до нашого генеративного штучного інтелекту.

Тож, поїхали. Щоб зацікавити, одразу покажу демку того, що ми будемо робити:

А якщо ви не дуже полюбляєте лонгріди та частіше дивитесь відосики, є відеоверсія цієї статті в лайв-режимі. Весь код можна глянути тут.

Налаштовуємо OpenAI, щоб мати змогу відправляти запити по АРІ

Заходимо на platform.openai.com/usage та логінимось або створюємо акаунт, якщо у вас його ще немає. Далі треба відкрити цю сторінку та додати грошей.

Заповнюємо тут інформацію:

Не забудьте додати ліміти витрат.

Далі нам треба АРІ-ключ. Відкриваємо platform.openai.com/api-keys.

Вводимо назву:

Або можна вказати, які саме дозволи будуть вам потрібні.

Після цього ви отримаєте ключ. Збережіть його у ваш secret-менеджер та нікому не показуйте.

Перший крок завершено. Можемо протестувати, чи отримаємо тепер по АРІ інформацію. Всі можливості OpenAI можна побачити тут. Нам же треба конкретно ця генерація тексту. На сайті знайдемо приклад з URL:

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "model": "gpt-4o",
    "messages": [
      {
        "role": "system",
        "content": "You are a helpful assistant."
      },
      {
        "role": "user",
        "content": "Hello!"
      }
    ]
  }'

• OPENAI_API_KEY — це АРІ-ключ, який ми згенерували раніше.
• Model — це одна з доступних моделей. Їх насправді дуже багато, детальніше прочитати про це можна тут . Для нашого кейсу найбільш вдало за ціною та якістю підйде GPT-4o mini
• Messages — це повідомлення, які відправлятиме юзер (ми, user), а також вказівки, як відповідати штучному інтелекту (system).

Насправді тут є ще декілька параметрів, але поки їх опустимо. Тож давайте спробуємо відправити перше повідомлення:

До речі, для відправки запитів я уже доволі давно юзаю Bruno, курс по якому скоро викладу на свій ютуб-канал.

Як бачимо, запит відпрацював. Нас найбільше цікавить «content» «Hello! How can I assist you today?».

Пишемо кастомне діалогове вікно для інтеграції

Спочатку вмикаємо у себе дизайнера та візуалізуємо, як ми хочемо це бачити :D Перш за все, загально: мені потрібна кнопка, яка буде викликати діалог. На ньому треба текстове поле, кнопки Generate, Close та Refresh.

Дизайнер з мене так собі, тому я прикинув приблизно такий стиль:

Після генерації треба додати красивий лоадер:

А також відрендерити список відповідей з можливістю копіювання та відмітки, що вже було скопійовано.

Вийшло щось таке. Тепер давайте це зробимо. У TestRail є фіча Custom UI Scripts. Відкрийте як адмін.

Фіча дає змогу запускати JS+CSS на вішій сторінці. Формат там такий:

name: AI Test Cases
description: Generates AI Test Scenarios
author: Artur Shevchenko
version: 1.0
includes: ^suites/view
excludes:
js:
Ваш код на жс
css:
Стилізація

Спершу давайте додамо просто кнопку. Який алгоритм дій тут — треба додати її до існуючого елемента в JS-скрипті. Перші рядки в ньому такі:

name: AI Test Cases
description: Generates AI Test Scenarios
author: Artur Shevchenko
version: 1.0
includes: ^suites/view
excludes: 

З цікавого, що нам треба — includes та excludes. Це вказівки тестрейлу, де цей скрипт запускати, а де — ігнорувати.

Сам код виглядає наступним чином:

js:
$(document).ready(function () {
  var buttonHTML =`
    <div id="gpt-button" class="toolbar content-header-toolbar">
      <a class="toolbar-button toolbar-button-last toolbar-button-first content-header-button button-start" href="javascript:void(0)">
        Open AI Generator
      </a>
    </div>`;
  /* Add it to the toolbar using innerHTML */
  $("#content-header .content-header-inner").prepend(buttonHTML);
}

Тут можна трошки схитрувати і використати уже готові стилізації від TestRail. Наприклад, клас toolbar content-header-toolbar.

Далі вмикаємо чекбокс This UI script is active і зберігаємо.

Тепер, якщо відкрити тест-кейси, побачимо нову кнопку там.

Тепер цікавіше. Нам треба зверстати нове віконце, підключити стилі та повісити обробник на клік по цій кнопочці.

  /* Create the dialog HTML (initially hidden) */
  var dialogHTML =`
    <div id="gpt-dialog">
      <h3>Generate Test Scenarios</h3>
      <input id="gpt-input" type="text" class="form-control form-fields" name="gpt-input" autocomplete="off" maxlength="200">
      <div contenteditable="true" class="form-control form-control-full field-editor" id="gpt-input_area" placeholder="" element-index="2" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div>
      <br>
      <br>
      <button id="generate-button">Generate</button>
      <button id="close-dialog" style="margin-left: 10px;">Close</button>
      <button id="refresh-button" style="margin-left: 10px;">Refresh</button>
      <div id="gpt-results"></div>
      <div id="loader" class="spinner" style="display: none;"></div>
    </div>`;
  $("body").append(dialogHTML);
  $(document).on("click", "#gpt-button", function () {
    $("#gpt-dialog").show();
  });
  $(document).on("click", "#close-dialog", function () {
    $("#gpt-dialog").hide();
  });
  $(document).on("click", "#refresh-button", function () {
    // Clear the input field
    $("#gpt-input_area").text("");
    // Clear the results
    $("#gpt-results").html(""); 
    $("#gpt-results").hide();
  });

І тепер найцікавіше — по натиску на кнопку зробити запит. Треба дещо переробити формат даних, які відправляємо. Для зручнішої обробки можемо вказати, в якому форматі відправляти результат — json schema.

Весь метод обробки кліку на генерацію виглядатиме так:

  $(document).on("click", "#generate-button", async function () {
    $("#loader").show();
    $("#gpt-results").hide();
    var inputText = $("#gpt-input_area").text();
  
    const url = "https://api.openai.com/v1/chat/completions";
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization:`Bearer ${gpt_token}`,
      },
      body: JSON.stringify({
        model: "gpt-4o-mini",
        response_format: {
          type: "json_schema",
          json_schema: {
            name: "test_cases",
            schema: {
              type: "object",
              properties: {
                testCases: {
                  type: "array",
                  items: {
                    type: "string",
                  },
                },
              },
              required: ["testCases"],
              additionalProperties: false,
            },
          },
        },
        messages: [
          {
            role: "system",
            content: `You are a test engineer focused on test design. 
            You know all about test design techniques, especially Boundary Value Conditions and Equivalence Partitions. 
            Generate a list of test case titles in the format of a checklist. 
            Each title should represent a high-level test scenario for the feature described below. 
            Focus on covering different aspects such as functionality, validation, error handling, and performance. 
            Generate as much as you can. 
            Example: 'Admin can add new regular user'; 'Admin can add user with long name'; 'Admin cannot add user without a name'; 'Verify that the user can successfully sign up with valid credentials'`,
          },
          {
            role: "user",
            content: inputText,
          },
        ],
      }),
    };
    try {
      const response = await fetch(url, options);
      const data = await response.json();
      const json_response = JSON.parse(data.choices[0].message.content);
      const testScenarios = json_response.testCases;
      var resultsHTML = "<ul>";
      testScenarios.forEach(function (scenario) {
        resultsHTML += `
          <li>
            <div class="icon-copyblank" id="copy_test"></div>
            <input type="checkbox" style="display:none;"> 
            ${scenario}
          </li>
        `;
      });
      resultsHTML += "</ul>";
      $("#gpt-results").html(resultsHTML); // Show the results in the dialog
      var submitButton = `<button id='submit-button' style="display:none;">Add test scenarios</button>`;
      $("#gpt-results").append(submitButton);
    } catch (error) {
      console.error(error);
    }
    finally {
      $("#loader").hide();
      $("#gpt-results").show();
    }
  });

Сам промт можна ще більше оптимізовувати та кастомізовувати під ваші цілі. Останнє, що залишилось — це додати краси та зручності у копіюванні.

  $(document).on("click", "#copy_test", function () {
    $(this).removeClass('icon-copyblank').addClass('icon-button-accept');
    var parentText = $(this).parent().text().trim();
    navigator.clipboard.writeText(parentText).then(function() {
    }).catch(function(error) {
        console.error('Error copying text to clipboard:', error);
    });
  });

І щоб все було гарно, навісити наші кастомні стилі. Їх можна побачити уже у репозиторії. Там нічого цікавого насправді немає. Але! Зараз це працювати не буде, оскільки TestRail не дозволяє за замовчуванням відправляти дані назовні.

Тому нам треба ввімкнути цей дозвіл:

https://yalantis.testrail.net/index.php?/admin/site_settings# і відкриваємо Security.

Тепер все готово і можемо використовувати потужність штучного інтелекта прямо у TestRail :)

Вдалих вам оптимізацій робочих процесів!

P. S. Щоб завжди бути в курсі оновлень, підписуйтеся на мій Telegram-канал або на YouTube.