Перейти к основному содержимому

Практикум JavaScript — Playwright и Jest

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Тестировщику Разработчику
Теория данных (раздел 3)

Проверка в БД — SQL для тестировщика, Основы БД, транзакции, PostgreSQL. Карта — о разделе.

Практикум №6 (JavaScript). JavaScript — язык фронтенда, скриптов Postman и Playwright. Здесь два мини-трека: Jest (быстрые unit-проверки) и Playwright (E2E в браузере). Python-аналог — Подготовка среды и создание первого теста, Java — Практикум Java — JUnit и REST Assured.

Зачем JavaScript тестировщику​

ОбластьГде используется JS
E2E вебPlaywright, Cypress
Unit фронтаJest, Vitest
API в Postmanвкладка Tests, pm.test()
Нагрузкаk6 (скрипты на JS)

Если команда пишет React/Vue, автотесты часто тоже на JavaScript/TypeScript.

Подготовка окружения​

Нужны Node.js 20+ и npm:

node -version
npm -version
mkdir qa-js-lab && cd qa-js-lab
npm init -y

Jest​

npm install --save-dev jest

В package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Playwright​

npm init playwright@latest

Мастер создаст tests/, конфиг и примеры. Подробнее — 1182 Playwright.

Шаг 1 — unit-тест на Jest​

Файл src/validators.js:

function isValidEmail(email) {
  if (!email || typeof email !== 'string') return false;
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
}

module.exports = { isValidEmail };

Файл src/validators.test.js:

Код ITЗагрузка примера кода…

Запуск:

npm test

Jest в каталоге инструментов.

Шаг 2 — E2E на Playwright​

Файл tests/login.spec.js:

Код ITЗагрузка примера кода…

Запуск:

npx playwright test
npx playwright test --headed

Playwright сам ждёт элементы — не используйте sleep(). См. 114 E2E.

Шаг 3 — скрипт в Postman​

На вкладке Tests запроса:

pm.test('Статус 200', () => {
  pm.response.to.have.status(200);
});

pm.test('Тело содержит id', () => {
  const json = pm.response.json();
  pm.expect(json).to.have.property('id');
});

Коллекцию можно гонять через Newman в CI — Postman в каталоге.

TypeScript​

Playwright и Jest одинаково работают с TypeScript. Достаточно переименовать файлы в .ts и добавить ts-jest / @playwright/test с типами. Для QA на старте JavaScript достаточно.

Типичные ошибки​

ОшибкаРешение
Flaky E2Eawait expect(...), не фиксированные паузы
Селектор #id сломалсяgetByRole, data-testid — см. Playwright
Тесты падают только в CI--headed локально, скриншот/trace в Playwright
Смешали unit и E2E в одной папкеsrc/*.test.js и tests/*.spec.js раздельно

Углубление в Playwright​

После шага 2 откройте 1182 Playwright — там подробно:

  • архитектура UI-автотестов, CSS/XPath, видео и Trace Viewer;
  • SPA/React, Page Object, Page Component, Page Factory;
  • pytest, Allure, CI, Pydantic и переменные окружения;
  • портфолио, GitHub и подготовка к собеседованию.

Что дальше​

  1. Ручное веб-тестирование — те же сценарии сначала руками.
  2. Проверка пользовательского сценария — полный цикл ручной + Selenium регистрации.
  3. Playwright — продвинутый Playwright (паттерны, отчёты, карьера).
  4. Дополнительные модули — Git, HTTP, английский.
  5. Cypress и Playwright в каталоге.

Навигация по разделу "Тестирование"​

Содержание