Как мы обсуждали в предыдущей статье, Benchmark.js — это полезная библиотека для тестирования производительности вашего кода JavaScript. Однако, поскольку JavaScript является интерпретируемым языком, производительность при выполнении вашего кода зависит от того, какой механизм JavaScript используется. Разные браузеры используют разные движки JavaScript:
- V8 от Google — наиболее часто используемый движок JavaScript, используемый в браузерах на базе Chromium, таких как Google Chrome и Microsoft Edge, а также в средах выполнения Node.js и Deno.
- SpiderMonkey разработан Mozilla для использования в Firefox и других проектах.
- JavaScriptCore — это предложение Apple, используемое в браузерах на основе WebKit, таких как Safari.
При внесении изменений важно проверять их влияние на производительность этих движков; мы можем легко оказать положительное влияние на одни браузеры и отрицательно повлиять на другие, и часто нам может потребоваться принимать прагматичные решения о том, какой код использовать, исходя из браузеров, наиболее часто используемых нашими пользователями.
Playwright быстро набирает обороты в качестве удобного инструмента автоматизации браузера, предлагая возможность запускать тесты для Chromium, Firefox и WebKit. Поэтому мы можем использовать Playwright для выполнения тестов Benchmark.js для всех упомянутых выше движков JavaScript.
Мы начнем с примера набора тестов, над которым мы работали ранее. Сначала нам нужно установить средство запуска тестов Playwright и поддерживаемые браузеры (использование этого подхода позволит Playwright поддерживать для вас необходимые браузерные движки, но вы можете использовать существующие установки, если хотите).
npm i -D @playwright/test npx playwright install
Примечание: на момент написания статьи, если вы используете MacOS Monterey, вам следует вместо этого вызывать
npm i -D @playwright/test@next, так как в последней стабильной версии есть проблема с тестами WebKit.
Далее нам нужно создать спецификационный файл для выполнения Playwright. По умолчанию предполагается, что тесты находятся в папке tests, поэтому давайте создадим новый файл в папке tests/bench.spec.js со следующим содержимым:
const { test } = require('@playwright/test');
test('Run benchmarks', async ({ page }) => {
await page.goto(`file://${process.cwd()}/bench.html`);
});
Теперь мы можем запустить тест, выполнив следующее:
npx playwright test
И мы получим следующий вывод:
Running 1 test using 1 worker ✓ tests/bench.spec.js:3:1 › Run benchmarks (728ms) 1 passed (1s)
Таким образом, страница успешно загрузилась, но мы не можем видеть, каковы были результаты тестов, что не так уж и много полезного! К счастью, мы можем захватить и отобразить вывод консоли, который мы использовали, чтобы увидеть результаты тестов раньше, прослушивая события console от Playwright.
Мы также можем опубликовать известное сообщение, когда набор тестов завершится из события Benchmark.js complete:
suite.on('complete', () => console.log('Benchmark suite complete.'))
И дождитесь этого известного сообщения, чтобы убедиться, что тесты завершены, прежде чем позволить тесту Playwright завершиться:
let benchmarkPromise = new Promise(resolve => {
page.on('console', async message => {
if (message.text() === 'Benchmark suite complete.') {
// if the suite has finished, we're done
resolve();
} else {
// pipe through any other console output
console[message.type()](message);
}
});
});
Примечание: как хорошие разработчики, мы, очевидно, должны преобразовать любые волшебные строки в общие константы, но мы не делаем этого здесь только для того, чтобы упростить пример!
Теперь мы можем await выполнить это обещание в тесте Playwright, и когда мы снова запустим тестовый раннер, мы увидим результаты теста на консоли:
Running 1 test using 1 worker ✓ tests/bench.spec.js:3:1 › Run benchmarks (13s) Array.prototype.some x 133 ops/sec ±0.89% (56 runs sampled) for loop x 1,724 ops/sec ±0.62% (60 runs sampled) 1 passed (13s)
Успех! 🎉 По умолчанию Playwright запускает тесты с использованием движка Chromium, поэтому для их запуска во всех браузерах нам нужно использовать следующее:
npx playwright test --browser=all --workers=1
Параметр browser определяет, в каких браузерах запускать тесты, а all будет использовать все браузеры, доступные Playwright. Мы также включили --workers=1, потому что Playwright по умолчанию запускает тесты параллельно, но это, очевидно, повлияет на наши тесты производительности, поэтому этот параметр позволяет только одному работнику принудительно запускать тесты последовательно. Наш вывод теперь выглядит так:
Running 3 tests using 1 worker ✓ [chromium] › tests/bench.spec.js:3:1 › Run benchmarks (13s) Array.prototype.some x 140 ops/sec ±1.14% (56 runs sampled) for loop x 1,793 ops/sec ±0.99% (61 runs sampled) ✓ [firefox] › tests/bench.spec.js:3:1 › Run benchmarks (14s) Array.prototype.some x 224 ops/sec ±0.53% (60 runs sampled) for loop x 242 ops/sec ±1.10% (59 runs sampled) ✓ [webkit] › tests/bench.spec.js:3:1 › Run benchmarks (12s) Array.prototype.some x 757 ops/sec ±22.39% (54 runs sampled) for loop x 1,756 ops/sec ±1.27% (60 runs sampled) 3 passed (40s)
Теперь мы можем увидеть результаты наших тестов для всех трех браузерных движков. Как видно из этого примера, различия могут быть существенными, доказывая, насколько полезным может быть запуск этих тестов!
Здесь мы можем сделать гораздо больше, но это введение закладывает основу для координации тестов в разных браузерах с помощью Playwright. Вот окончательная версия различных файлов для справки:
Дополнительные материалы на plainenglish.io
