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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Тестировщику Разработчику

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

---

Зачем 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:

const { isValidEmail } = require('./validators');

describe('isValidEmail', () => {
  test('принимает корректный email', () => {
    expect(isValidEmail('qa@example.com')).toBe(true);
  });

  test('отклоняет пустую строку', () => {
    expect(isValidEmail('')).toBe(false);
  });

  test('отклоняет строку без @', () => {
    expect(isValidEmail('not-an-email')).toBe(false);
  });
});

Запуск:

npm test

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

---

Шаг 2 — E2E на Playwright

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

const { test, expect } = require('@playwright/test');

test.describe('Демо-форма входа', () => {
  test('успешный вход показывает приветствие', async ({ page }) => {
    await page.goto('https://the-internet.herokuapp.com/login');

    await page.fill('#username', 'tomsmith');
    await page.fill('#password', 'SuperSecretPassword!');
    await page.click('button[type="submit"]');

    await expect(page.locator('#flash')).toContainText('You logged into');
  });

  test('неверный пароль показывает ошибку', async ({ page }) => {
    await page.goto('https://the-internet.herokuapp.com/login');

    await page.fill('#username', 'tomsmith');
    await page.fill('#password', 'wrong');
    await page.click('button[type="submit"]');

    await expect(page.locator('#flash')).toContainText('Your password is invalid');
  });
});

Запуск:

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 E2E	await expect(...), не фиксированные паузы
Селектор #id сломался	getByRole, data-testid — см. 1182
Тесты падают только в 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. 1013 — полный цикл ручной + Selenium регистрации.
3. 1182 — продвинутый Playwright (паттерны, отчёты, карьера).
4. Дополнительные модули — Git, HTTP, английский.
5. Cypress и Playwright в каталоге.

---

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

• Практикум: 1011 Python · 1012 · 1013 · 1014 · 1015 Java · 1016 JS
• Бонус-модули: 1274
• Маршрут: О разделе

---