Тестируем REST API на реальном проекте с использованием Playwright и TypeScript

Научитесь писать автотесты используя Playwright на Typescript

Про проект Transactions Manager API

Проект для тестування API керування фінансовими транзакціями.

Вы будете писать автотести для эндпоинтов для операций CRUD, аутентификации и обработки ошибок.

Посилання: https://transactionsmanagerapi.netlify.app/

Transaction Manager — вебзастосунок для керування фінансовими транзакціями

Застосунок надає користувачам можливість:

  • Створювати, переглядати, редагувати та видаляти транзакції

  • Слідкувати за поточним станом операцій (в очікуванні, завершені, невдалі)

  • Відстежувати загальну суму відправлених і отриманих коштів

  • Використовувати вбудований інтерфейс для тестування API-запитів (REST Tester)

Документація API

Перш ніж тестувати проєкт, ознайомимось із документацією.
Цей API надає функціональність для керування фінансовими транзакціями між користувачами в застосунку. Підтримуються операції створення, отримання, оновлення та видалення транзакцій.

Версія: 1.0.0

Автентифікація
Для доступу до API потрібен API-ключ, який можна отримати в особистому кабінеті після реєстрації користувача. Ключ передається в заголовку Authorization:
Authorization: Bearer [apikey]
Якщо ключ відсутній або недійсний, сервер поверне помилку 401 Unauthorized.

Базова структура Playwright + TypeScript + Page Object для перевірки створення користувача, логіну та створення транзакції через REST API.

Крок 1: Встановлення Node.js

  1. Перейдіть на офіційний сайт: https://nodejs.org

  2. Завантажте LTS-версію (рекомендовану).

  3. Встановіть Node.js (разом із npm — Node Package Manager).

  4. Перевірте встановлення у терміналі (PowerShell, Terminal, Bash):
    node -v
    npm -v

Крок 2: Встановлення Git (для Windows)

  1. Завантажте Git: https://git-scm.com/downloads

  2. Встановіть Git, залишаючи налаштування за замовчуванням.

  3. Перевірте встановлення:
    git —version

Крок 3: Встановлення Visual Studio Code

  1. Завантажити: https://code.visualstudio.com

  2. Встановіть VS Code.

Крок 4: Ініціалізація проєкту

Створення проєкту playwright-tests

Крок 5: Встановлення Playwright з TypeScript

npm init playwright@latest

Крок 6: Створення Page Object структури

/tests
└── api
├── pages
│ ├── auth.api.ts
│ └── transaction.api.ts
├── utils
│ └── types.ts
├── create-user.spec.ts
├── login-user.spec.ts
└── create-transaction.spec.ts
/playwright.config.ts

types.ts – опис типів

export interface AuthResponse {
access_token: string;
refresh_token: string;
expires_at: number;
user: {
id: string;
email: string;
};
}

export interface TransactionResponse {
id: string;
from_user: string;
to_user: string;
amount: number;
status: string;
created_at: string;
}

 

auth.api.ts – API Page Object для авторизації

import { request } from ‘@playwright/test’;
import { AuthResponse } from ‘../utils/types’;

const BASE_URL = process.env.BASE_URL || ‘https://wfeyphieqwpnkkqgyvci.supabase.co’;
const API_KEY = process.env.API_KEY || ‘eyJhbGciOiJIUzI1NiIsInR5cCI…’;

export class AuthAPI {
static async registerUser(email: string, password: string): Promise<AuthResponse> {
const context = await request.newContext();
const response = await context.post(`${BASE_URL}/auth/v1/signup`, {
headers: {
apikey: API_KEY,
‘Content-Type’: ‘application/json’
},
data: { email, password }
});

return response.json();
}

static async loginUser(email: string, password: string): Promise<AuthResponse> {
const context = await request.newContext();
const response = await context.post(`${BASE_URL}/auth/v1/token?grant_type=password`, {
headers: {
apikey: API_KEY,
‘Content-Type’: ‘application/json’
},
data: { email, password }
});

return response.json();
}
}

transaction.api.ts – Page Object для транзакцій

import { request } from ‘@playwright/test’;
import { TransactionResponse } from ‘../utils/types’;

const BASE_URL = process.env.BASE_URL || ‘https://wfeyphieqwpnkkqgyvci.supabase.co’;
const API_KEY = process.env.API_KEY || ‘eyJhbGciOiJIUzI1NiIsInR5cCI…’;

export class TransactionAPI {
static async createTransaction(token: string, fromUser: string): Promise<TransactionResponse> {
const context = await request.newContext();
const response = await context.post(`${BASE_URL}/rest/v1/transactions`, {
headers: {
apikey: API_KEY,
Authorization: `Bearer ${token}`,
Prefer: ‘return=representation’,
‘Content-Type’: ‘application/json’
},
data: {
from_user: fromUser,
to_user: ‘recipient@test.com’,
amount: 10.5,
status: ‘pending’
}
});

return response.json();
}
}

create-user.spec.ts – тест створення користувача

import { test, expect } from ‘@playwright/test’;
import { AuthAPI } from ‘./pages/auth.api’;

test(‘Користувач успішно реєструється’, async () => {
const email = `test+${Date.now()}@gmail.com`;
const password = ‘123456’;

const response = await AuthAPI.registerUser(email, password);

expect(response.access_token).toBeTruthy();
expect(response.user.email).toBe(email);
});

login-user.spec.ts – тест логіну

import { test, expect } from ‘@playwright/test’;
import { AuthAPI } from ‘./pages/auth.api’;

test(‘Користувач успішно авторизується’, async () => {
const email = ‘test+user1@gmail.com’;
const password = ‘123456’;

const response = await AuthAPI.loginUser(email, password);

expect(response.access_token).toBeTruthy();
expect(response.user.email).toBe(email);
});

 

create-transaction.spec.ts – створення транзакції

import { test, expect } from ‘@playwright/test’;
import { AuthAPI } from ‘./pages/auth.api’;
import { TransactionAPI } from ‘./pages/transaction.api’;

test(‘Успішне створення транзакції’, async () => {
const email = ‘test+user1@gmail.com’;
const password = ‘123456’;

const auth = await AuthAPI.loginUser(email, password);
const transaction = await TransactionAPI.createTransaction(auth.access_token, auth.user.id);

expect(transaction.to_user).toBe(‘recipient@test.com’);
expect(transaction.amount).toBe(10.5);
expect(transaction.status).toBe(‘pending’);
expect(transaction.created_at).toBeTruthy();
});

Ви можете завантажити колекцію у форматі JSON та імпортувати її до Postman.

Завдання для самостійної роботи

Отримання транзакції за ID

Ціль: Навчитися відправляти GET-запит на отримання однієї транзакції по id.

Отримання списку всіх транзакцій

Ціль: Отримати масив усіх створених транзакцій.

Видалення транзакції

Ціль: Навчитися видаляти транзакції за ID.

Більше тест-кейсів зі створення/редагування транзакцій

Підтримка та питання

Якщо вам потрібна будь-яка підтримка або у вас виникли додаткові питання, не соромтеся зв'язатися з нами, ми готові швидко надати вам допомогу.

Через чат-бот

Поширені запитання

Колекція в Postman - це набір API-запитів, згрупованих за змістом. Вона спрощує тестування та автоматизацію роботи з API

Завантажте файл колекції у форматі .json, відкрийте Postman, натисніть Importвиберіть файл та натисніть Open.

Так, після імпорту ви можете змінювати запити, додавати нові, зберігати змінні та ділитися колекцією з колегами.

Після завершення практикуму ви матимете змогу продовжити навчання на поглибленому місячному курсі з REST API