Современное тестирование программного обеспечения требует большего, чем просто ручные клики и исследовательское тестирование. Сегодняшние QA-инженеры нуждаются в мощных средах разработки, специализированных расширениях и инструментах отладки для написания автоматизированных тестов, анализа сетевого трафика и эффективного расследования багов. Это всеобъемлющее руководство охватывает основные IDE, расширения и инструменты, которые должен освоить каждый тестировщик.

Оглавление

  1. VS Code для QA-инженеров
  2. IntelliJ IDEA для тестирования
  3. Мастерство Browser DevTools
  4. Proxy-инструменты: Charles и Fiddler
  5. Выбор правильных инструментов

VS Code для QA-инженеров

Visual Studio Code стал предпочтительным редактором для многих тестировщиков благодаря своей легковесности, обширному маркетплейсу расширений и отличной поддержке множества языков программирования. Давайте рассмотрим, как превратить VS Code в мощную среду для тестирования.

Основные расширения для тестировщиков

1. Расширения для запуска тестов

Jest Runner

  • Прямая интеграция с фреймворком тестирования Jest
  • Запуск отдельных тестов или наборов тестов одним кликом
  • Отображение результатов тестов прямо в редакторе
  • Отладка тестов непосредственно из редактора

Установка:

code --install-extension Orta.vscode-jest

Конфигурация в .vscode/settings.json:

{
  "jest.autoRun": "off",
  "jest (как обсуждается в [From Manual to Automation: Complete Transition Guide for QA Engineers](/blog/manual-to-automation-transition)).showCoverageOnLoad": true,
  "jest (как обсуждается в [Allure Framework: Creating Beautiful Test Reports](/blog/allure-framework-reporting)).coverageFormatter": "DefaultFormatter",
  "jest.debugMode": true
}

Test Explorer UI

  • Унифицированный проводник тестов для множества фреймворков
  • Поддерживает Jest, Mocha, Pytest, JUnit и другие
  • Древовидное представление всех тестов с индикаторами прохождения/провала
  • Быстрая навигация к определениям тестов
code --install-extension hbenl.vscode-test-explorer

Playwright Test for VSCode

  • Запуск тестов Playwright прямо из VS Code
  • Выбор локаторов с визуальным инструментом
  • Запись тестов с интеграцией codegen
  • Отладка с точками останова
code --install-extension ms-playwright.playwright

Пример конфигурации:

{
  "playwright.reuseBrowser": true,
  "playwright (как обсуждается в [Cloud Testing Platforms: Complete Guide to BrowserStack, Sauce Labs, AWS Device Farm & More](/blog/cloud-testing-platforms)).showTrace": true,
  "playwright.env": {
    "HEADLESS": "false"
  }
}

2. Качество кода и линтинг

ESLint Необходим для качества тестового кода JavaScript/TypeScript:

code --install-extension dbaeumer.vscode-eslint

.eslintrc.js для тестовых файлов:

module.exports = {
  env: {
    node: true,
    jest: true,
    mocha: true
  },
  extends: [
    'eslint:recommended',
    'plugin:jest/recommended'
  ],
  rules: {
    'jest/no-disabled-tests': 'warn',
    'jest/no-focused-tests': 'error',
    'jest/valid-expect': 'error'
  }
}

Prettier Согласованное форматирование кода для тестовой автоматизации:

code --install-extension esbenp.prettier-vscode

Конфигурация:

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2
}

3. Расширения для тестирования API

REST Client Тестирование API-эндпоинтов без выхода из VS Code:

code --install-extension humao.rest-client

Создайте файлы .http для тестирования API:

### Получить пользователя по ID
GET https://api.example.com/users/123
Authorization: Bearer {{token}}

### Создать нового пользователя
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "Иван Иванов",
  "email": "ivan@example.com"
}

### Переменные
@baseUrl = https://api.example.com
@token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

### Использование переменных
GET {{baseUrl}}/profile
Authorization: Bearer {{token}}

Thunder Client Легковесная альтернатива Postman:

code --install-extension rangav.vscode-thunder-client

Возможности:

  • Коллекции и окружения
  • Графический интерфейс для тестирования API
  • Генерация сниппетов кода на нескольких языках
  • Импорт/экспорт коллекций Postman

4. Отладка и инспекция

JavaScript Debugger Встроен в VS Code, но требует конфигурации:

Создайте .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest текущий файл",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${fileBasename}",
        "--runInBand",
        "--no-cache"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Отладка теста Playwright",
      "program": "${workspaceFolder}/node_modules/.bin/playwright",
      "args": [
        "test",
        "${file}",
        "--debug"
      ],
      "console": "integratedTerminal"
    }
  ]
}

CodeLLDB (для тестирования на Python):

code --install-extension vadimcn.vscode-lldb

Конфигурация отладки Python:

{
  "type": "python",
  "request": "launch",
  "name": "Pytest текущий файл",
  "module": "pytest",
  "args": [
    "${file}",
    "-v",
    "-s"
  ],
  "console": "integratedTerminal"
}

5. Контроль версий и совместная работа

GitLens Расширенные возможности Git для отслеживания изменений в тестах:

code --install-extension eamodio.gitlens

Ключевые функции для тестировщиков:

  • Аннотации blame, показывающие кто написал каждый тест
  • История файлов для отслеживания эволюции тестов
  • Сравнение версий тестов между ветками
  • История строк для понимания модификаций тестов

Live Share Парное тестирование и совместная отладка:

code --install-extension MS-vsliveshare.vsliveshare

Сценарии использования:

  • Парное программирование в тестовой автоматизации
  • Сеансы удаленной отладки
  • Совместный код-ревью тестов
  • Сессии обмена знаниями

Пользовательские сниппеты для тестовой автоматизации

Создайте пользовательские сниппеты в Код > Настройки > Пользовательские сниппеты:

Сниппеты для тестов Jest (javascript.json):

{
  "Jest блок Describe": {
    "prefix": "desc",
    "body": [
      "describe('${1:название набора}', () => {",
      "  ${2:// код теста}",
      "});"
    ]
  },
  "Jest тестовый случай": {
    "prefix": "test",
    "body": [
      "test('${1:название теста}', async () => {",
      "  ${2:// реализация теста}",
      "});"
    ]
  },
  "Jest Before Each": {
    "prefix": "beforeach",
    "body": [
      "beforeEach(async () => {",
      "  ${1:// код подготовки}",
      "});"
    ]
  },
  "Шаблон API теста": {
    "prefix": "apitest",
    "body": [
      "test('${1:эндпоинт} должен ${2:ожидаемое поведение}', async () => {",
      "  const response = await request(app)",
      "    .${3:get}('${4:/api/endpoint}')",
      "    .set('Authorization', `Bearer \\${token}`);",
      "",
      "  expect(response.status).toBe(${5:200});",
      "  expect(response.body).toMatchObject({",
      "    ${6:// ожидаемые свойства}",
      "  });",
      "});"
    ]
  }
}

Сниппеты Playwright:

{
  "Тест Playwright": {
    "prefix": "pwtest",
    "body": [
      "test('${1:описание теста}', async ({ page }) => {",
      "  await page.goto('${2:https://example.com}');",
      "  ${3:// шаги теста}",
      "});"
    ]
  },
  "Playwright Expect": {
    "prefix": "pwexpect",
    "body": [
      "await expect(page.locator('${1:селектор}')).${2:toBeVisible}();"
    ]
  }
}

Конфигурация workspace для тестовых проектов

Создайте .vscode/settings.json для вашего тестового проекта:

{
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/coverage": true,
    "**/playwright-report": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/coverage": true,
    "**/dist": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.spec.js": "javascript",
    "*.test.js": "javascript",
    "*.http": "http"
  },
  "jest.autoRun": {
    "watch": false,
    "onSave": "test-file"
  },
  "testing.automaticallyOpenPeekView": "failureInVisibleDocument",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "npm.enableScriptExplorer": true
}

Задачи для общих операций тестирования

Создайте .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Запустить все тесты",
      "type": "npm",
      "script": "test",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Запустить тесты с покрытием",
      "type": "npm",
      "script": "test:coverage",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "Линт тестовых файлов",
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "Создать отчет Playwright",
      "type": "shell",
      "command": "npx playwright show-report",
      "problemMatcher": []
    }
  ]
}

Горячие клавиши для продуктивности

Настройте горячие клавиши в Keybindings (JSON):

[
  {
    "key": "ctrl+shift+t",
    "command": "testing.runCurrentFile"
  },
  {
    "key": "ctrl+shift+d",
    "command": "testing.debugCurrentFile"
  },
  {
    "key": "ctrl+shift+a",
    "command": "testing.runAll"
  },
  {
    "key": "ctrl+shift+f",
    "command": "testing.reRunFailTests"
  }
]

Multi-Root workspace для сложных проектов

Для проектов с отдельными фронтенд и бэкенд тестами:

Создайте test-automation.code-workspace:

{
  "folders": [
    {
      "name": "API тесты",
      "path": "./api-tests"
    },
    {
      "name": "E2E тесты",
      "path": "./e2e-tests"
    },
    {
      "name": "Тесты производительности",
      "path": "./performance-tests"
    }
  ],
  "settings": {
    "files.watcherExclude": {
      "**/node_modules/**": true
    }
  }
}

IntelliJ IDEA для тестирования

IntelliJ IDEA (и другие IDE от JetBrains) предоставляют мощные возможности для Java-автоматизации тестов, включая отличную поддержку JUnit, TestNG, Selenium и других фреймворков тестирования.

Основные плагины для тестирования

1. Плагины для тестовой автоматизации

Поддержка JUnit 5 (встроенная)

  • Запуск тестов из иконок в редакторе
  • Навигация между тестами и продакшн-кодом
  • Автоматическая генерация методов тестов
  • Анализ покрытия

Конфигурация в Run Configuration:

Опции VM: -ea -Dfile.encoding=UTF-8
Рабочая директория: $MODULE_WORKING_DIR$
Переменные окружения: ENV=test

Плагин TestNG Поддержка продвинутого фреймворка тестирования:

<!-- Зависимость pom.xml -->
<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>7.8.0</version>
    <scope>test</scope>
</dependency>

Конфигурация TestNG (testng.xml):

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Набор тестов" parallel="methods" thread-count="5">
    <test name="API тесты">
        <classes>
            <class name="com.example.tests.UserApiTest"/>
            <class name="com.example.tests.ProductApiTest"/>
        </classes>
    </test>
    <test name="UI тесты">
        <packages>
            <package name="com.example.tests.ui"/>
        </packages>
    </test>
</suite>

Cucumber for Java Поддержка BDD-тестирования:

Settings > Plugins > Install "Cucumber for Java"

Возможности:

  • Подсветка синтаксиса Gherkin
  • Навигация от шагов к определениям шагов
  • Генерация определений шагов из feature-файлов
  • Запуск сценариев из редактора

Пример feature-файла:

Feature: Аутентификация пользователя

  Background:
    Given приложение запущено
    And база данных очищена

  @smoke @api
  Scenario: Успешный вход с валидными учетными данными
    Given существует пользователь с именем "testuser"
    When пользователь входит с именем "testuser" и паролем "Test123!"
    Then вход должен быть успешным
    And должен быть возвращен валидный JWT токен

  @negative
  Scenario Outline: Неудачные попытки входа
    When пользователь входит с именем "<username>" и паролем "<password>"
    Then вход должен провалиться
    And сообщение об ошибке должно быть "<error>"

    Examples:
      | username  | password  | error                     |
      | invalid   | Test123!  | Неверные учетные данные   |
      | testuser  | wrong     | Неверные учетные данные   |
      |           | Test123!  | Требуется имя пользователя|

2. Инструменты покрытия кода

Покрытие кода IntelliJ IDEA (встроенное) Запуск тестов с покрытием:

  1. Правый клик на тестовом классе/пакете
  2. Выбрать “Run with Coverage”
  3. Просмотр покрытия в gutter редактора и окне Coverage

Конфигурация в .idea/workspace.xml:

<component name="CoverageOptionsProvider">
  <option name="myAddOrReplace" value="2" />
  <option name="myGlobalRunner" value="IDEA" />
  <option name="myTraceTestFramework" value="false" />
</component>

Плагин JaCoCo Более продвинутые отчеты о покрытии:

<!-- Maven плагин -->
<plugin>
    <groupId>org.jacoco</groupId>
    <artifactId>jacoco-maven-plugin</artifactId>
    <version>0.8.11</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-agent</goal>
            </goals>
        </execution>
        <execution>
            <id>report</id>
            <phase>test</phase>
            <goals>
                <goal>report</goal>
            </goals>
        </execution>
        <execution>
            <id>jacoco-check</id>
            <goals>
                <goal>check</goal>
            </goals>
            <configuration>
                <rules>
                    <rule>
                        <element>PACKAGE</element>
                        <limits>
                            <limit>
                                <counter>LINE</counter>
                                <value>COVEREDRATIO</value>
                                <minimum>0.80</minimum>
                            </limit>
                        </limits>
                    </rule>
                </rules>
            </configuration>
        </execution>
    </executions>
</plugin>

3. Тестирование REST API

HTTP Client (встроенный) Создайте файлы .http для тестирования API:

### Окружение разработки
@host = http://localhost:8080
@token = {{auth_token}}

### Получить токен аутентификации
# @name auth
POST {{host}}/api/auth/login
Content-Type: application/json

{
  "username": "admin",
  "password": "admin123"
}

> {% client.global.set("auth_token", response.body.token); %}

### Получить всех пользователей (с аутентификацией)
GET {{host}}/api/users
Authorization: Bearer {{token}}

### Создать нового пользователя
POST {{host}}/api/users
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "username": "новыйпользователь",
  "email": "новыйпользователь@example.com",
  "role": "USER"
}

### Обновить пользователя
# @name updateUser
PUT {{host}}/api/users/{{userId}}
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "email": "обновленный@example.com"
}

### Обработчик ответа
> {%
    client.test("Запрос выполнен успешно", function() {
        client.assert(response.status === 200, "Статус ответа не 200");
    });

    client.test("Пользователь обновлен корректно", function() {
        client.assert(response.body.email === "обновленный@example.com");
    });
%}

### Удалить пользователя
DELETE {{host}}/api/users/{{userId}}
Authorization: Bearer {{token}}

4. Интеграция с инструментами баз данных

Database Tools and SQL (встроенные) Подключение к тестовым базам данных для проверки данных:

  1. Открыть окно инструмента Database
  2. Добавить источник данных (PostgreSQL, MySQL и т.д.)
  3. Создать консоль SQL для управления тестовыми данными

Пример скрипта настройки тестовых данных:

-- Настройка тестовых данных
TRUNCATE TABLE users CASCADE;
TRUNCATE TABLE orders CASCADE;

INSERT INTO users (id, username, email, role, created_at)
VALUES
    (1, 'testuser1', 'test1@example.com', 'USER', NOW()),
    (2, 'testuser2', 'test2@example.com', 'USER', NOW()),
    (3, 'admin', 'admin@example.com', 'ADMIN', NOW());

INSERT INTO orders (id, user_id, product_id, quantity, total, status)
VALUES
    (1, 1, 101, 2, 199.98, 'COMPLETED'),
    (2, 1, 102, 1, 49.99, 'PENDING'),
    (3, 2, 101, 1, 99.99, 'COMPLETED');

-- Проверка данных
SELECT u.username, COUNT(o.id) as order_count, SUM(o.total) as total_spent
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
GROUP BY u.id, u.username;

Live Templates для тестового кода

Создайте пользовательские live templates в Settings > Editor > Live Templates:

Тестовый метод JUnit 5:

@Test
@DisplayName("$DESCRIPTION$")
void $METHOD_NAME$() {
    // Arrange (Подготовка)
    $ARRANGE$
    
    // Act (Действие)
    $ACT$
    
    // Assert (Проверка)
    $ASSERT$
}

REST Assured API тест:

@Test
void test$METHOD$Returns$STATUS$() {
    given()
        .contentType(ContentType.JSON)
        .header("Authorization", "Bearer " + token)
        .when()
        .$HTTP_METHOD$("$ENDPOINT$")
        .then()
        .statusCode($STATUS_CODE$)
        .body("$JSON_PATH$", equalTo($EXPECTED_VALUE$));
}

Метод Page Object для Selenium:

public $RETURN_TYPE$ $METHOD_NAME$($PARAMETERS$) {
    wait.until(ExpectedConditions.elementToBeClickable($ELEMENT$));
    $ELEMENT$.$ACTION$();
    return $RETURN_VALUE$;
}

Data Provider TestNG:

@DataProvider(name = "$PROVIDER_NAME$")
public Object[][] $METHOD_NAME$() {
    return new Object[][] {
        $DATA$
    };
}

Конфигурации запуска для выполнения тестов

Шаблон конфигурации JUnit:

Название: Все юнит-тесты
Тип теста: All in package
Пакет: com.example.tests.unit
Опции VM: -ea -Xmx512m
Рабочая директория: $MODULE_DIR$
Переменные окружения: 
  ENV=test
  LOG_LEVEL=DEBUG
Перед запуском: Build, Run Maven Goal (clean compile)

Конфигурация набора TestNG:

Название: Интеграционные тесты
Набор: src/test/resources/testng-integration.xml
Опции VM: -Denv=staging -Dbrowser=chrome
Listeners: com.example.listeners.TestListener
Перед запуском: Build, Run Maven Goal (clean test-compile)

Отладка тестовых сбоев

Условные точки останова: Правый клик на точке останова и добавить условие:

username.equals("проблемныйПользователь") && response.getStatus() != 200

Вычислить выражение: Во время отладки используйте Alt+F8 для вычисления:

// Проверить содержимое JSON ответа
new ObjectMapper().readTree(response.getBody().asString())

// Проверить состояние элемента
driver.findElement(By.id("submitBtn")).isEnabled()

// Проверка запроса к базе данных
jdbcTemplate.queryForObject("SELECT COUNT(*) FROM users WHERE status = 'ACTIVE'", Integer.class)

Точки останова исключений: Установите точки останова для конкретных исключений:

  • Перейти в Run > View Breakpoints
  • Добавить Java Exception Breakpoints
  • Ввести класс исключения (например, AssertionError, TimeoutException)

Анализ и инспекция кода

Включите полезные инспекции для тестового кода:

Settings > Editor > Inspections > Enable:
- JUnit > Test method naming convention
- JUnit > Test method without assertions
- TestNG > Dependent methods
- Java > Probable bugs > Constant conditions
- Java > Testing > Assertion arguments order

Пользовательский профиль инспекции для тестов:

<!-- .idea/inspectionProfiles/Tests.xml -->
<profile version="1.0">
  <option name="myName" value="Tests" />
  <inspection_tool class="JUnitTestMethodWithNoAssertions" enabled="true" level="WARNING" />
  <inspection_tool class="TestMethodWithoutAssertion" enabled="true" level="WARNING" />
</profile>

Мастерство Browser DevTools

Инструменты разработчика браузера необходимы каждому тестировщику, будь то отладка проблем UI, анализ производительности сети или исследование ошибок JavaScript. Современные браузеры (Chrome, Firefox, Safari, Edge) предлагают мощные встроенные инструменты.

Chrome DevTools для тестирования

1. Панель Elements

Инспекция DOM для тестовой автоматизации:

  • Правый клик на элементе → Inspect
  • Поиск уникальных селекторов для автоматизации
  • Копировать XPath: Правый клик на элементе → Copy → Copy XPath
  • Копировать JS Path: Правый клик на элементе → Copy → Copy JS path

Лучшие практики генерации селекторов:

// Вместо хрупкого XPath:
// /html/body/div[1]/div[2]/form/div[3]/button

// Используйте более стабильные селекторы:
document.querySelector('[data-testid="submit-button"]')
document.querySelector('button[type="submit"].primary')

// Или относительный XPath:
//button[contains(text(), 'Отправить')]
//button[@data-testid='submit-button']

Live редактирование для тестирования:

  • Двойной клик на атрибутах для изменения
  • Редактировать как HTML для сложных изменений
  • Тестировать CSS изменения в панели Styles
  • Принудительные состояния элемента: :hover, :active, :focus

2. Панель Console

Основные команды Console для тестировщиков:

// Запрос элементов (похоже на тестовую автоматизацию)
$('button.submit')           // Возвращает первое совпадение (как querySelector)
$$('button')                 // Возвращает все совпадения (как querySelectorAll)
$x('//button[@type="submit"]') // XPath запрос

// Инспектировать элементы
inspect($('button.submit'))  // Открывает панель Elements

// Мониторинг событий
monitorEvents($('form'), 'submit')  // Лог отправки формы
unmonitorEvents($('form'))          // Остановить мониторинг

// Мониторинг сети
monitor(названиеФункции)        // Лог когда функция вызывается
unmonitor(названиеФункции)

// Производительность
console.time('названиеОперации')
// ... выполнение кода ...
console.timeEnd('названиеОперации')  // Показывает время выполнения

// Табличный вывод для анализа данных
console.table(пользователи)         // Показать массив объектов как таблицу

// Тестовые утверждения
console.assert(значение > 0, 'Значение должно быть положительным')

// Получить обработчики событий
getEventListeners($('button.submit'))

// Копировать данные в буфер обмена
copy(JSON.stringify(данныеПользователя))

Сниппеты для переиспользуемых тестовых скриптов:

Создайте сниппет в Sources > Snippets:

// Сниппет: Проверить все ошибки валидации
(function checkValidation() {
  const errors = $$('.error-message');
  console.table(errors.map(el => ({
    элемент: el.closest('[data-testid]')?.dataset.testid || 'неизвестно',
    сообщение: el.textContent.trim(),
    видимый: window.getComputedStyle(el).display !== 'none'
  })));
})();

// Сниппет: Протестировать данные формы
(function getFormData() {
  const form = $('form');
  const formData = new FormData(form);
  const data = {};
  for (let [key, value] of formData.entries()) {
    data[key] = value;
  }
  console.log('Данные формы:', data);
  copy(JSON.stringify(data, null, 2));
  console.log('Скопировано в буфер обмена!');
})();

// Сниппет: Найти потерянные test ID
(function findOrphanedTestIds() {
  const elements = $$('[data-testid]');
  const testIds = elements.map(el => ({
    id: el.dataset.testid,
    тег: el.tagName,
    текст: el.textContent.trim().substring(0, 50)
  }));
  
  console.table(testIds);
  console.log(`Всего: ${testIds.length} элементов с test ID`);
})();

3. Панель Network

Анализ API-запросов для тестирования:

Фильтрация запросов:

Фильтр по типу: XHR, Fetch, JS, CSS, Img
Фильтр по домену: domain:api.example.com
Фильтр по статусу: status-code:404
Фильтр по методу: method:POST
Комбинировать: method:POST domain:api status-code:200

Анализ запроса:

  • Headers: Проверить токены авторизации, типы контента
  • Payload: Проверить формат тела запроса
  • Preview: Просмотр структуры данных ответа
  • Response: Сырые данные ответа
  • Timing: Анализ длительности запроса

Копировать запрос как код: Правый клик на запросе → Copy → Copy as cURL / Copy as fetch / Copy as PowerShell

# Пример cURL для тестовой автоматизации
curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGc...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"username":"testuser"}' \
  --compressed

Экспорт HAR-файла для отчетов о багах:

  1. Правый клик в панели Network
  2. Сохранить все как HAR
  3. Прикрепить к отчету о баге для полного сетевого трейса

Троттлинг для тестирования производительности:

Панель Network > Выпадающий список Throttling:
- Fast 3G (1.6 Mbps)
- Slow 3G (400 Kbps)
- Offline
- Пользовательские профили

4. Панель Sources для отладки

Отладка JavaScript для тестировщиков:

Типы точек останова:

  1. Line Breakpoints: Клик на номере строки
  2. Conditional Breakpoints: Правый клик на строке → Add conditional breakpoint
    userId === 123 && response.status !== 200
  3. DOM Breakpoints: Правый клик на элементе в панели Elements
    • Break on subtree modifications
    • Break on attribute modifications
    • Break on node removal
  4. Event Listener Breakpoints: Sources > Event Listener Breakpoints
    • Mouse > click
    • Keyboard > keydown
    • Form > submit
    • XHR > XMLHttpRequest sent
  5. XHR/Fetch Breakpoints: Sources > XHR/fetch Breakpoints
    • Добавить паттерн URL: api/users

Local Overrides для тестирования:

1. Sources > Overrides > Enable Local Overrides
2. Выбрать папку для переопределений
3. Редактировать ответ в панели Sources
4. Сохранить (Ctrl+S)
5. Перезагрузить страницу для тестирования измененного ответа

Сценарии использования:

  • Тестировать обработку ошибок без изменений бэкенда
  • Изменять API-ответы для граничных случаев
  • Тестировать различные сценарии данных
  • Симулировать медленные/неудачные ответы

Blackboxing сторонних скриптов:

Settings > Blackboxing > Add pattern
Паттерн: node_modules/

Улучшает отладку, пропуская код библиотек.

5. Панель Performance

Запись производительности для анализа тестов:

1. Клик на Record
2. Выполнить действия
3. Остановить запись
4. Анализировать:
   - FPS: Кадров в секунду (плавно = 60 FPS)
   - CPU: Время выполнения JavaScript
   - Network: Водопад запросов
   - Screenshots: Визуальная временная шкала

Ключевые метрики для тестировщиков:

  • FCP (First Contentful Paint): Когда появляется первый контент
  • LCP (Largest Contentful Paint): Когда загружен основной контент
  • TTI (Time to Interactive): Когда страница становится интерактивной
  • TBT (Total Blocking Time): Время блокировки главного потока
  • CLS (Cumulative Layout Shift): Визуальная стабильность

Скрипт тестирования производительности:

// Записать метрики производительности
const perfData = performance.getEntriesByType('navigation')[0];
console.table({
  'DNS Lookup': perfData.domainLookupEnd - perfData.domainLookupStart,
  'TCP соединение': perfData.connectEnd - perfData.connectStart,
  'Время запроса': perfData.responseStart - perfData.requestStart,
  'Время ответа': perfData.responseEnd - perfData.responseStart,
  'Обработка DOM': perfData.domInteractive - perfData.responseEnd,
  'Общее время загрузки': perfData.loadEventEnd - perfData.navigationStart
});

// Получить Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.value}`);
  }
});
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });

6. Панель Application

Инспекция хранилища для тестирования:

Local Storage / Session Storage:

// Просмотр в Console
console.table(Object.entries(localStorage))

// Манипуляция тестовыми данными
localStorage.setItem('authToken', 'test-token-123')
localStorage.removeItem('userId')
localStorage.clear()

// Тест для автоматизации
expect(localStorage.getItem('theme')).toBe('dark')

Cookies:

  • Просмотр всех cookies домена
  • Редактирование значений cookies
  • Удаление отдельных cookies
  • Очистка всех cookies

IndexedDB:

  • Инспекция структуры базы данных
  • Просмотр сохраненных записей
  • Удаление баз данных для чистого тестового состояния

Cache Storage:

  • Инспекция кешей Service Worker
  • Просмотр кешированных ответов
  • Удаление кеша для тестирования

7. Lighthouse для тестирования качества

Запуск автоматизированных аудитов:

1. Открыть панель Lighthouse
2. Выбрать категории:
   - Performance
   - Accessibility
   - Best Practices
   - SEO
   - Progressive Web App
3. Выбрать устройство (Mobile/Desktop)
4. Кликнуть "Generate report"

Lighthouse из командной строки:

npm install -g lighthouse

# Запустить аудит
lighthouse https://example.com --output html --output-path ./report.html

# С пользовательской конфигурацией
lighthouse https://example.com \
  --throttling.cpuSlowdownMultiplier=4 \
  --only-categories=performance,accessibility \
  --chrome-flags="--headless"

Firefox Developer Tools

Уникальные функции для тестировщиков:

Инспектор CSS Grid/Flexbox:

  • Визуальное наложение для Grid/Flexbox макетов
  • Лучше чем Chrome для CSS отладки

Accessibility Inspector:

Tools > Browser Tools > Accessibility
- Просмотр дерева доступности
- Проверка ARIA атрибутов
- Симуляция дальтонизма
- Проверка коэффициентов контраста

Команда Screenshot:

Открыть Developer Tools > Settings (F1) > Available Toolbox Buttons > Enable "Take a screenshot"

Или использовать Console:
:screenshot --fullpage
:screenshot --selector ".main-content"

Блокировка сетевых запросов:

Панель Network > Правый клик на запросе > Block URL

Тестировать обработку ошибок без изменений бэкенда.

Proxy-инструменты: Charles и Fiddler

Proxy-инструменты перехватывают HTTP/HTTPS трафик между клиентом и сервером, позволяя тестировщикам инспектировать, изменять и имитировать API-ответы. Необходимы для мобильного тестирования, тестирования API и тестирования безопасности.

Charles Proxy

Charles - это кроссплатформенный HTTP-прокси / HTTP-монитор / Обратный прокси, который позволяет разработчикам и тестировщикам просматривать весь HTTP/HTTPS трафик.

Установка и настройка

# macOS
brew install --cask charles

# Windows: Скачать с charlesproxy.com
# Лицензия: ~$50 (доступна бесплатная пробная версия)

Начальная конфигурация:

  1. Proxy > Proxy Settings
    • Порт: 8888 (по умолчанию)
    • Enable transparent HTTP proxying: ✓
  2. Proxy > macOS Proxy (для установки системного прокси)

Установка SSL-сертификата (для расшифровки HTTPS):

macOS:

1. Help > SSL Proxying > Install Charles Root Certificate
2. Открыть Keychain Access
3. Найти сертификат "Charles Proxy"
4. Двойной клик > Trust > Always Trust

Windows:

1. Help > SSL Proxying > Install Charles Root Certificate
2. Сертификат будет добавлен в Windows Certificate Store

Мобильное устройство (iOS/Android):

1. Подключить устройство к той же WiFi, что и компьютер
2. Настройки WiFi устройства > Настроить Прокси > Вручную
   - Сервер: [IP компьютера]
   - Порт: 8888
3. Открыть браузер на устройстве: chls.pro/ssl
4. Установить сертификат
5. iOS: Settings > General > About > Certificate Trust Settings > Enable

Настройки SSL Proxying

Включить SSL proxying для конкретных хостов:

Proxy > SSL Proxying Settings > Add

Location:
  Host: *.example.com
  Port: 443

Или для всех хостов:
  Host: *
  Port: 443

Запись и анализ трафика

Вид Structure:

  • Иерархический вид хостов и путей
  • Разворачивать для просмотра всех запросов к конкретной конечной точке
  • Правый клик > Clear для удаления шума

Вид Sequence:

  • Хронологический список всех запросов
  • Лучше для понимания потока запросов
  • Показывает точное время запросов

Инспектор Request/Response:

Вкладки:

  • Overview: Метод, статус, время, размер
  • Headers: Заголовки запроса/ответа
  • Text: Ответ в виде обычного текста
  • JSON: Форматированный JSON с древовидным представлением
  • XML: Форматированный XML
  • Raw: Полный сырой запрос/ответ

Фильтрация трафика

Фокус на конкретном хосте:

Правый клик на хосте > Focus
Теперь показывает только трафик для этого хоста

Recording Settings:

Proxy > Recording Settings > Include

Add:
  Protocol: HTTP+HTTPS
  Host: api.example.com
  Port: 443
  Path: /api/*

Фильтр по типу контента:

View > Filter Settings

Show only:
☑ JSON
☑ XML
☐ HTML
☐ Images
☐ CSS/JavaScript

Манипуляция запросами

Breakpoints для модификации запроса/ответа:

1. Proxy > Breakpoint Settings > Enable Breakpoints
2. Добавить breakpoint:
   - Host: api.example.com
   - Path: /api/users
   - Request: ✓
   - Response: ✓

Когда запрос/ответ достигает breakpoint:

  • Вкладка Edit JSON Request: Изменить тело запроса
  • Вкладка Edit Response: Изменить ответ
  • Кликнуть Execute для продолжения

Сценарии использования:

  • Тестировать обработку ошибок, изменяя коды статуса
  • Изменять данные ответа для граничных случаев
  • Изменять параметры запроса
  • Тестировать сценарии таймаута (добавить задержку)

Map Local и Map Remote

Map Local (Заменить удаленный ответ локальным файлом):

Tools > Map Local Settings > Add

Map From:
  Protocol: HTTPS
  Host: api.example.com
  Path: /api/users
  
Map To:
  Local Path: /Users/test/mock-responses/users.json

Файл mock-ответа (users.json):

{
  "users": [
    {
      "id": 1,
      "name": "Тестовый пользователь",
      "email": "test@example.com",
      "role": "admin"
    }
  ],
  "total": 1
}

Map Remote (Перенаправить запросы на другой сервер):

Tools > Map Remote Settings > Add

Map From:
  Protocol: HTTPS
  Host: api-prod.example.com
  Path: /api/v2/users

Map To:
  Protocol: HTTPS
  Host: api-staging.example.com
  Path: /api/v2/users

Сценарии использования:

  • Тестировать против staging, используя production frontend
  • Тестировать новую версию API
  • Тестировать поведение балансировщика нагрузки

Инструмент Rewrite

Изменение запросов/ответов правилами:

Tools > Rewrite Settings > Add

Name: Добавить CORS заголовки
Apply to: api.example.com

Add Rule:
  Type: Add Header
  Where: Response
  Name: Access-Control-Allow-Origin
  Value: *

Add Rule:
  Type: Modify Status
  Where: Response
  Status: 200
  (Изменить 4xx/5xx на 200 для тестирования)

Add Rule:
  Type: Body Replacement
  Where: Response
  Match: "status":"active"
  Replace: "status":"inactive"

Throttling (ограничение сети)

Proxy > Throttle Settings > Enable Throttling

Preset: 3G (780 kbps down, 330 kbps up)
Или Custom:
  Bandwidth: 512 kbps
  Utilisation: 80%
  Round-trip latency: 300ms
  MTU: 1500 bytes

Apply to: Only selected hosts
Add: api.example.com

Сценарии использования:

  • Тестировать поведение приложения в медленных сетях
  • Тестировать таймауты
  • Тестировать состояния загрузки
  • Тестировать прогрессивное улучшение

Повтор запросов

Тестирование повторов:

Правый клик на запросе > Repeat
Правый клик на запросе > Repeat Advanced
  - Count: 10
  - Concurrency: 5
  - Delay: 1000ms

Использовать для:

  • Нагрузочного тестирования (базового)
  • Тестирования race conditions
  • Тестирования rate limiting
  • Воспроизведения периодических проблем

Экспорт и отчетность

Экспортировать сессию:

File > Export Session
Форматы:
  - Charles Session (.chls)
  - HAR (HTTP Archive)
  - CSV
  - JSON

Создать отчет:

File > Export Report
  - HTML Report
  - Include request/response bodies
  - Include timing information

Прикрепить к отчетам о багах для полного контекста.

Fiddler Classic / Fiddler Everywhere

Fiddler - это еще один мощный веб-отладочный прокси, популярный на Windows. Fiddler Everywhere - кроссплатформенная версия.

Установка

# Windows (Fiddler Classic - Бесплатно)
winget install Fiddler.Fiddler

# Кроссплатформенный (Fiddler Everywhere - Подписка)
# Скачать с telerik.com/fiddler

Ключевые возможности

Composers: Создание пользовательских запросов:

Composer > Parsed

Request:
  Method: POST
  URL: https://api.example.com/users
  Headers:
    Content-Type: application/json
    Authorization: Bearer {token}
  Body:
    {
      "username": "testuser",
      "email": "test@example.com"
    }

Execute > Просмотр ответа

AutoResponder (Похож на Charles Map Local):

Rules > Add Rule

If request matches:
  EXACT: https://api.example.com/users
Then respond with:
  File: C:\mocks\users.json
  Or: *404
  Or: *delay:5000 (задержка 5 секунд)
  Or: *bpu (break on request)

FiddlerScript (Скриптинг на C#):

// Авто-изменение запросов
static function OnBeforeRequest(oSession: Session) {
    // Добавить заголовок ко всем API запросам
    if (oSession.uriContains("/api/")) {
        oSession.oRequest["X-Test-Mode"] = "true";
    }
    
    // Блокировать аналитику
    if (oSession.uriContains("analytics.google.com")) {
        oSession.oRequest.FailSession(404, "Заблокировано", "");
    }
}

// Авто-изменение ответов
static function OnBeforeResponse(oSession: Session) {
    // Принудительный CORS
    if (oSession.uriContains("/api/")) {
        oSession.oResponse["Access-Control-Allow-Origin"] = "*";
    }
    
    // Лог медленных ответов
    if (oSession.Timers.ClientDoneResponse.Subtract(oSession.Timers.ClientBeginRequest).TotalMilliseconds > 2000) {
        FiddlerObject.log("Медленный запрос: " + oSession.fullUrl);
    }
}

Фильтры:

Вкладка Filters:

Hosts:
  Show only: api.example.com
  Hide: cdn.example.com

Client Process:
  Show only: chrome.exe

Breakpoints:
  Break request on POST
  Break response on status 500

Request Builder: Более продвинутый, чем Composer:

Request Builder > New Request

Templates:
  - REST API GET
  - REST API POST with JSON
  - SOAP Request
  - GraphQL Query

Сохранить как коллекцию для повторного использования

Сравнение Charles vs Fiddler

ФункцияCharlesFiddler ClassicFiddler Everywhere
ПлатформаMac, Windows, LinuxТолько WindowsMac, Windows, Linux
Цена$50 (бессрочная)Бесплатно$150/год подписка
UIНативный (Java Swing)Нативный (WinForms)Electron (современный)
Кривая обученияСредняяСредняяЛегкая
ПроизводительностьХорошаяОтличнаяХорошая
СкриптингОграниченныйC# (мощный)JavaScript
Настройка SSLЛегкоЛегкоОчень легко
Мобильное тестированиеОтличноОтличноОтлично
Мокинг запросовMap Local/RemoteAutoResponderMock Server
Троттлинг сетиДаДаДа
API тестированиеБазовоеComposerПродвинутое (коллекции)
Лучше дляMac пользователи, простотаWindows power usersКоманды, кроссплатформа

Рабочий процесс мобильного тестирования

Полная настройка мобильного тестирования:

  1. Настроить прокси на устройстве:
iOS:
  Settings > Wi-Fi > [Сеть] > Configure Proxy
  Manual: [IP компьютера]:8888

Android:
  Settings > Wi-Fi > [Сеть] > Advanced
  Proxy: Manual
  Hostname: [IP компьютера]
  Port: 8888

  1. Установить SSL сертификат (см. настройку Charles выше)

  2. Включить SSL Proxying для доменов приложения

  3. Распространенные сценарии мобильного тестирования:

Тестировать обработку ошибок API:

  • Использовать Breakpoints для изменения статуса ответа на 500
  • Проверить, что приложение показывает соответствующее сообщение об ошибке
  • Проверить работает ли механизм повторных попыток

Тестировать офлайн режим:

  • Использовать Map Local для возврата кешированных ответов
  • Блокировать конкретные запросы
  • Проверить офлайн функциональность

Тестировать разные версии API:

  • Использовать Map Remote для указания на разные версии API
  • Тестировать обратную совместимость
  • Тестировать сценарии миграции

Тестировать медленные сети:

  • Применить throttling (настройки 3G)
  • Проверить состояния загрузки
  • Проверить обработку таймаутов
  • Тестировать прогрессивную загрузку изображений

Захват для отчетов о багах:

  • Записать полную сессию
  • Экспортировать HAR файл
  • Включить в отчет о баге с шагами для воспроизведения

Выбор правильных инструментов

Матрица выбора IDE

Сценарий использованияVS CodeIntelliJ IDEA
Тесты JavaScript/TypeScript✓✓✓ Отлично✓✓ Хорошо
Java тестовая автоматизация✓ Базово✓✓✓ Отлично
Python тестирование✓✓✓ Отлично (с расширениями)✓✓ Хорошо (PyCharm лучше)
Мультиязычные проекты✓✓✓ Отлично✓✓ Хорошо
Легковесность/Быстрый старт✓✓✓ Отлично✓ Медленнее
Встроенные функции✓ Нужны расширения✓✓✓ Отлично
Бесплатно/Open source✓✓✓ Бесплатно✓ Community Edition
API тестирование✓✓ Хорошо (расширения)✓✓✓ Встроенное

Рекомендуемые комбинации инструментов

Автоматизация фронтенд-тестов:

  • IDE: VS Code
  • Расширения: Playwright, Jest, ESLint
  • Браузер: Chrome DevTools
  • Прокси: Charles

Тестирование Backend API:

  • IDE: IntelliJ IDEA / VS Code
  • Инструменты: REST Client, Postman
  • Прокси: Charles / Fiddler
  • База данных: DBeaver / IntelliJ Database Tools

Мобильное тестирование:

  • IDE: VS Code / Android Studio
  • Прокси: Charles (лучшая мобильная поддержка)
  • Device Mirroring: scrcpy
  • Производительность: Chrome DevTools (удаленная отладка)

Full Stack тестирование:

  • IDE: VS Code (multi-root workspace)
  • Браузер: Chrome DevTools
  • API: IntelliJ HTTP Client / Thunder Client
  • Прокси: Charles

Путь обучения

Неделя 1-2: Основы IDE

  • Настроить VS Code или IntelliJ IDEA
  • Установить основные расширения/плагины
  • Выучить горячие клавиши
  • Настроить отладку
  • Создать пользовательские сниппеты

Неделя 3-4: Browser DevTools

  • Освоить панели Elements и Console
  • Изучить анализ Network
  • Практиковать отладку JavaScript
  • Создать переиспользуемые сниппеты
  • Запустить аудиты Lighthouse

Неделя 5-6: Proxy инструменты

  • Установить и настроить Charles/Fiddler
  • Настроить SSL proxying
  • Практиковать модификацию запросов
  • Создать mock-ответы с Map Local
  • Тестировать мобильные приложения

Неделя 7-8: Продвинутые техники

  • Комбинировать инструменты в рабочем процессе тестирования
  • Создать автоматизированные тестовые помощники
  • Построить пользовательские скрипты отладки
  • Документировать лучшие практики команды
  • Обучить других членов команды

Советы по продуктивности

1. Горячие клавиши Выучите эти в первую очередь:

  • VS Code: Cmd/Ctrl + P (быстрое открытие), Cmd/Ctrl + Shift + P (палитра команд)
  • DevTools: Cmd/Ctrl + Shift + C (инспектировать элемент), Cmd + K (очистить консоль)
  • Charles: Cmd/Ctrl + K (очистить сессию), Cmd/Ctrl + R (старт/стоп записи)

2. Пользовательские сниппеты Создайте сниппеты для:

  • Общих паттернов тестов
  • Шаблонов API запросов
  • Скриптов отладки в консоли
  • Генераторов mock-данных

3. Организация workspace

  • Используйте multi-root workspaces для сложных проектов
  • Создайте .vscode/tasks.json для общих операций
  • Сохраняйте конфигурации отладки
  • Организуйте прокси-сессии по функциям

4. Документация Документируйте в вики команды:

  • Инструкции по настройке IDE
  • Требуемые расширения/плагины
  • Конфигурации отладки
  • Настройка прокси для проектов
  • Общие шаги по устранению неполадок

5. Автоматизация Автоматизируйте повторяющиеся задачи:

  • Скрипты выполнения тестов
  • Генерация отчетов о покрытии
  • Скрипты анализа HAR файлов
  • Мониторинг производительности сети

Заключение

Освоение правильных инструментов преобразует эффективность тестирования. VS Code и IntelliJ IDEA предоставляют мощные среды для разработки тестов с правильными расширениями и конфигурациями. Browser DevTools предлагают непревзойденное понимание поведения приложения. Proxy-инструменты типа Charles и Fiddler обеспечивают глубокую инспекцию и манипуляцию API.

Ключ не в том, чтобы изучить каждую функцию каждого инструмента, а в том, чтобы:

  1. Выбрать инструменты, подходящие вашему технологическому стеку
  2. Освоить функции, которые вы используете ежедневно (правило 80/20)
  3. Автоматизировать повторяющиеся задачи с помощью сниппетов и скриптов
  4. Документировать вашу настройку для согласованности команды
  5. Непрерывно учиться по мере развития инструментов

Начните с одного инструмента из каждой категории (IDE, DevTools, Прокси), развивайте мастерство, затем расширяйте свой набор инструментов. Помните: инструменты - это усилители, но экспертиза в тестировании - это то, что имеет наибольшее значение.

Следующие шаги:

  1. Настройте свою основную IDE с необходимыми расширениями сегодня
  2. Практикуйте browser DevTools ежедневно во время тестирования
  3. Установите и настройте proxy-инструмент на этой неделе
  4. Создайте свой первый пользовательский сниппет или конфигурацию отладки
  5. Поделитесь своими знаниями с командой

Успешного тестирования!