Швидка та легка міграція з Cypress на Playwright за допомогою OpenAI

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

Привіт! Я Роман, Senior Test Automation Engineer в TenantCloud.

У цій статті я поділюся досвідом міграції великого проєкту з понад 4 000 файлів із Cypress на Playwright. Завдяки OpenAI нам вдалося провести міграцію всього за три місяці. Розповім про ключові кроки та алгоритми, які допомогли нам успішно завершити цей процес.

Ця стаття також доступна англійською мовою.

Налаштування акаунта OpenAI

Реєстрація в OpenAI: перейдіть на платформу OpenAI та зареєструйте акаунт, якщо ви ще цього не зробили.

Створення API-ключа: після входу в систему перейдіть на Dashboard, відкрийте розділ API key та створіть новий ключ. Цей ключ буде використовуватись для надсилання запитів до OpenAI.

Розуміння обмежень використання та як їх збільшити

Під час використання OpenAI API, зокрема GPT-4 Turbo (GPT-4o), ви починаєте з певними обмеженнями, які залежать від рівня вашого акаунта.

За замовчуванням усі акаунти починають у безплатному рівні (Free Tier), який має обмеження у $100 на місяць. Щоб отримати доступ до вищих лімітів і ефективніше використовувати GPT-4 Turbo, потрібно підвищити рівень використання.

Щоб вийти з безплатного рівня, спочатку потрібно оновити свій акаунт, витративши щонайменше $5. Після цього ви автоматично перейдете на перший рівень. Хоч перший рівень також має обмеження в $100 на місяць, він може надати вищі ліміти для запитів API.

Для відправлення запитів API потрібно поповнити свій кредитний баланс. Однак, ви можете поповнити баланс лише до межі вашого поточного рівня або до встановленого вами ліміту витрат у налаштуваннях акаунта.

Тож підсумуємо: після оновлення до першого рівня шляхом витрати $5 (які зараховуються на ваш кредитний баланс), ви отримаєте ліміт у $100 для витрат на місяць. За потреби можете зменшити цей ліміт у налаштуваннях. Для нашого проєкту з міграції ми витратили приблизно 150—200$.

Підготовка

Створення нової структури папок для Playwright: це дозволить вам працювати систематично, мігруючи проєкт Cypress папку за папкою.

Визначення файлів для міграції: визначте, які файли необхідно повністю мігрувати до Playwright, а які сумісні з новим фреймворком та можуть бути перенесені без змін.

Копіювання файлів з Cypress до Playwright: перед початком міграції скопіюйте ваші файли з папки Cypress до папки Playwright. Це гарантує, що оригінальні файли залишаться незмінними під час міграції, що дасть змогу легко повертатися до старих файлів для перевірки, якщо щось буде упущено або потребуватиме перехресної перевірки.

Автоматизація дрібних змін за допомогою IDE: використовуйте свою IDE для пошуку та заміни дрібних змінних або констант, які відрізняються між Cypress та Playwright.

Міграція основного коду, потім перехід до тестів і виправлень: почніть з міграції основного коду. Після цього переходьте до тестів та їхніх виправлень. Такий підхід гарантує, що основна функціональність буде стабільною перед запуском тестів.

Встановлення OpenAI та створення інструкцій для міграції:

Щоб почати автоматизувати процес міграції, потрібно налаштувати OpenAI у вашому проєкті та створити чіткі інструкції щодо того, як має відбуватись міграція.

У цьому прикладі використовується Node версії 20.15.1.

1. Встановлення OpenAI та додаткових бібліотек

npm install openai glob

2. Створення скрипту для міграції: створіть новий файл під назвою migration.js і додайте наступний код для налаштування клієнта OpenAI:

const openai = new OpenAI({
    organization: your_org_key, // Can be found in profile settings
    apiKey: your_api_key // Key you created
});

3. Визначення інструкцій для міграції: додайте блок інструкцій, які OpenAI буде використовувати для керування процесом міграції. Ось приклад:

const instructions = `Instructions for migrating from Cypress to Playwright. Here's a summarized version for better clarity:
1. **Import Statements**: Always add import statements at the top of the file.

2. **Constructor**: Always add a constructor with a page member:
\`constructor(protected page: Page) {}\`

If there is already a constructor, combine this member with the existing ones, for example:
\`protected readonly page: Page;\`
\`constructor(page: Page, selector = '[data-test="checkbox"]')\`

3. **Replacing Cypress Commands**: All Cypress commands must be replaced with Playwright syntax.

4. **Object Creation**: When creating new objects in a class like:
\`public navBar = new NavBar({ selector: '[data-test="nav-bar"]' });\`
Pass \`this.page\` to their constructor as the first argument, for example:
\`public navBar = new NavBar(this.page, { selector: '[data-test="nav-bar"]' });\`
`;

Додайте свої інструкції, враховуючи конкретні потреби. Основна мета — надати чіткі вказівки та приклади того, як слід виконувати міграцію.

4. Надання прикладів повністю мігрованого коду: разом з інструкціями створіть у вашому скрипті константи, які будуть містити приклади повністю мігрованого коду.

Ось як може виглядати повний скрипт migration.js з усім об’єднаним:

/*jshint esversion: 8 */
'use strict';
import { OpenAI } from 'openai';
import { globSync } from 'glob';
import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
import path from 'path';
const openai = new OpenAI({
   organization: 'your_key',
   apiKey: 'your_api key',
});
const instructions = `your instructions `;
const migratedCodeExample = `your fully migrated code`;
const migratedCodeExample3 = ``;
const migratedCodeExample4 = ``;
const migratedCodeExample5 = ``;
const files = globSync(
   'modules/users/forms/**/{*.dialog.ts,*.component.ts,*.helper.ts,*.page.ts,*.step.ts,*.tab.ts,*.service.ts,*.form.ts}',
   { ignore: '**/node_modules/**' }
);
const newDirectory = 'updated_files';
mkdirSync(newDirectory, { recursive: true });
async function callChat() {
   for (const filePath of files) {
       const codeToMigrate = readFileSync(filePath, 'utf-8');
       let chat = await openai.chat.completions.create({
           model: 'gpt-4o',
           messages: [
               {
                   role: 'system',
                   content:
                       'You will be provided with class containing cypress commands,' +
                       'and be provided with the instructions of migrating from cypress to playwright, ' +
                       'your task is to fully migrate the provided code to playwright following the instructions and applying your knowledge of commands, ' +
                       'you should migrate file as it is but add changes mentioned in instructions, ' +
                       'output must be in utf-8, typescript file, ' +
                       'only code so that I can easily paste it to the file, ' +
                       'without your explanations, text or comments, without wrapping ts code with quotes',
               },
               {
                   role: 'user',
                   content: `Here is the instructions for the migration \n\n${instructions}\n\n
                   Here's the Cypress code you need to migrate to playwright:\n${codeToMigrate}\n\n
                   Here are some examples of migrate code \n${migratedCodeExample}\n\n${migratedCodeExample2}\n\n${migratedCodeExample3}\n\n${migratedCodeExample4}} \n\n${migratedCodeExample5}`,
               },
           ],
       });
       const directoryPath = path.dirname(filePath);
       const updatedDirectory = path.join(directoryPath, 'updated_files');
       mkdirSync(updatedDirectory, { recursive: true });
       const newFilePath = path.join(updatedDirectory, path.basename(filePath));
       writeFileSync(newFilePath, chat.choices[0].message.content);
   }
}
callChat();

Скрипт автоматизує міграцію файлів Cypress на Playwright за допомогою моделі GPT-4 Turbo від OpenAI. Ось що він робить після запуску node migration.js:

• Скрипт використовує globSync для пошуку всіх відповідних файлів TypeScript на основі наданого вами шаблону.
• Створюється нова директорія з назвою updated_files, у якій будуть зберігатися мігровані файли.
• Для кожного знайденого файлу скрипт зчитує його вміст і надсилає його разом з інструкціями щодо міграції та прикладами до OpenAI.
• Скрипт записує мігрований код у новий файл у директорії updated_files, зберігаючи оригінальну структуру папок.

Перегляд та завершення міграції

1. Перевірте мігрований код: уважно перегляньте код, згенерований AI, щоб переконатися, що жодні частини не були пропущені або мігрували неправильно.
2. Замініть старий код: якщо все виглядає добре, скопіюйте мігрований код з директорії updated_files та замініть старий код у вашому проєкті.
3. Приберіть зайве: після того, як ви замінили всі необхідні файли, видаліть директорію updated_files для очищення проєкту від тимчасових файлів.

На що варто звернути увагу

1. AI може не мігрувати весь файл, якщо він надто довгий. Ідеальна довжина файлу — від 100 до 200 рядків. Однак, варто спробувати, щоб зрозуміти, що найкраще працює для вас, оскільки результати можуть варіюватися залежно від вмісту та складності коду.

2. Можуть виникнути помилки ліміту при міграції великої кількості довгих файлів одночасно. Щоб уникнути цього, розбийте папку з файлами на дві або більше частин. Ідеально мігрувати по 10–15 файлів за раз, або до 20, залежно від їхнього вмісту. Експериментуйте, щоб знайти оптимальну кількість файлів, які можна мігрувати одночасно.

3. Іноді AI може не мігрувати код так, як очікується. Якщо це трапляється, найкраще видалити згенеровану міграцію для цієї папки та почати процес заново. Забезпечте, щоб ваші інструкції були чіткими та лаконічними — це може покращити точність міграції.

Легкої міграції!

Корисні посилання:
Usage Tears