Выходите за рамки функционального тестирования: как использовать драматург для первых показателей производительности
11 июля 2025 г.Когда мы думаем о тестировании производительности, мы обычно представляем большие инструменты с большими числами - Jmeter, Gatling, Locust или Google Maythouse - забивая серверы бэкэнд с виртуальными пользователями или анализируя статические оценки аудита. Эти инструменты отличные, без сомнения. Но вот в чем поворот: что, если бы вы могли оценить эффективность вашего приложениякак настоящий пользователь испытал бы это?
Вот где вступает драматург-и нет, это не только для сквозного тестирования.
Дражатель для тестирования на производительность?
Да, это верно. Вы, наверное, уже знаетеДраматургв качестве структуры автоматизации Microsoft Slick Browser для тестирования пользовательских интерфейсов. Он работает на хроме, Firefox и Webkit - без головы или головы - и делает функциональное тестирование в браузерах.
Но вот классная часть: драматург также может выступить как ваше окно в мировом мире переднего дня. Он запускает реальные браузеры, выполняет реальные потоки пользователей и позволяет измерять время загрузки, отзывчивость и использование ресурсов.
Давайте погрузимся в то, как вы можете превратить драматург в легкую лабораторию производительности для вашего приложения.
Драматург для тестирования на производительность?
Производительность оКак быстроиКак гладкоВаше приложение чувствует - не только то, как быстро реагирует ваш сервер. Playwright помогает вам запечатлеть это «ощущение» благодаря нескольким ключевым суперспособным:
Настоящие браузеры, настоящий опыт
Драматург не подделывает его. Он раскрывает фактические экземпляры браузера, загружает ваш сайт, запускает сценарии, получает ресурсы и взаимодействует с пользовательским интерфейсом - как и ваши пользователи.
Это означает, что вы можете:
- Загрузка страницы и сроки ресурсов
- Измерить, насколько отзывчив ваш пользовательский интерфейс для кликов и ввода
- Моделируйте плохие условия сети или устройства, чтобы увидеть, как ваше приложение работает в дикой природе
Покрытие кросс-браузера
Тестирование только хрома? Этого недостаточно. Playwright позволяет сравнивать производительность через Chromium, Firefox и Webkit, которые могут выявить специфичные для браузера замедление или проблемы с рендерингом.
Дросселя сети и процессора
Хотите знать, как ваше приложение работает на 3G-соединении или устройстве среднего уровня? Поддерживает драматург:
- Сетевая эмуляция(например, медленный 3G, офлайн)
- ЦП дросселя(на хром) для моделирования более медленных процессоров
Слияние функциональных + тестов производительности
Это секретный соус. Вы можете расширить свои существующие функциональные тесты, чтобы включить метрики производительности - без поддержания отдельного набора тестов или изучения нового инструмента.
Прежде чем мы будем слишком взволнованы, давайте проясним, какой драматургнеделать:
Нагрузочное тестирование в масштабе- Он запускает один браузер за тест. Вы не будете моделировать 1000 пользователей, которые забивают ваш сервер.
Метрики Бэкэнд-Нет серверного процессора, памяти или датчиков.
Причудливые мониторные панели- Вам нужно будет бросить свои собственные отчеты или экспортировать на внешние инструменты.
Тем не менее, драматург не пытается заменить jmeter или маяк. Это дополнительный инструмент - и он сияет при использовании правильно.
Измерить время загрузки страницы
Вот быстрый способ рассчитать, сколько времени требует вашей страницы для полной загрузки:
tsCopyEditimport { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance.timing)));
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`Page load time: ${loadTime} ms`);
await browser.close();
})();
Или использовать современныйPerformanceNavigationTimingAPI:
tsCopyEditconst navTiming = await page.evaluate(() => {
const [entry] = performance.getEntriesByType('navigation');
return {
domContentLoaded: entry.domContentLoadedEventEnd,
loadEvent: entry.loadEventEnd,
};
});
Измерить время загрузки ресурсов
Отслеживать медленные изображения, сценарии или стили:
tsCopyEditconst resources = await page.evaluate(() =>
performance.getEntriesByType('resource').map(r => ({
name: r.name,
type: r.initiatorType,
duration: r.duration,
size: r.transferSize,
}))
);
console.table(resources);
Это помогает вам точно определить раздутые активы, перетаскивая ваш UX.
Измерить взаимодействие с пользователем
Хотите узнать, как быстро реагирует пользовательский интерфейс после нажатия кнопки?
tsCopyEditconst start = Date.now();
await page.click('#submitBtn');
await page.waitForSelector('.result');
const duration = Date.now() - start;
console.log(`UI response time: ${duration} ms`);
Отлично подходит для измерения запросов AJAX или спа -переходов.
Имитировать реальные условия
Дроссельная заслока сеть так же, как и 2010:
tsCopyEditconst context = await browser.newContext();
const client = await context.newCDPSession(page);
await client.send('Network.emulateNetworkConditions', {
offline: false,
downloadThroughput: 400 * 1024 / 8,
uploadThroughput: 400 * 1024 / 8,
latency: 400,
});
Замедлить процессор для реализма:
tsCopyEditawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 }); // 4x slower
Скриншоты и отслеживание
Запишите визуальную обратную связь при тестировании:
tsCopyEditawait page.screenshot({ path: 'before.png' });
await context.tracing.start({ screenshots: true });
await page.goto('https://example.com');
await context.tracing.stop({ path: 'trace.zip' });
Проанализируйте это с помощью просмотра Trace Playwright.
Подключите его к конвейеру CI/CD
Вот как испечь проверки производительности в действиях GitHub:
yamlCopyEditjobs:
performance_test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install
- run: node performance-test.js
Вы даже можете установить пороговые значения и сбои, если ваше приложение начнет замедляться.
Лучшие практики для тестирования производительности с драматургом
- ПробежатьБезголовный режимЧтобы ускорить тесты
- Сеть дроссельной заслонки и процессоротражать реальных пользователей
- Измерьте несколько рази средние результаты
- Метрики магазина иСледите за тенденциями с течением времени
- Интегрируйтесь в вашCI/CD Pipeline
- Используйте с маяком или K6 для полного покрытия
Заключение
Playwright - это не серебряная пуля - она не заменит ваши бэкэнд -стресс -тесты или мониторные панели производительности. Но этоделаетДайте вам мощный, гибкий способ измерения того, как реальные пользователи испытывают ваше приложение - и это бесценно.
Являетесь ли вы инженером QA, который хотите повысить уровень своих тестов, или разработчик, который заботится о производительности, так же, как функции, добавление драматурга в ваш инструментарий приближает вас на шаг ближе к быстрому, отзывчивому и восхитительному пользовательскому опыту.
Оригинал