Мониторинг сторонних ресурсов с Playwright: Как избежать «смерти от Ad Blocker» и блокировки рендеринга

Паттерны, которые ломают сайты из-за внешних ресурсов

1. Медленные и блокирующие рендеринг ресурсы

<script type="text/javascript" src="http://some-provider.js"></script>

2. Тесно связанные JavaScript-зависимости

// tracking-script.js:
window.trackThing = function() { /* report data */ }

// /script/index.js:
function init() {
  // ЭТО вызовет исключение, если `tracking-script.js` был заблокирован!
  trackThing("page loaded or something"); 
}
init();

Как тестировать и мониторить сторонние ресурсы с Playwright

Эмуляция медленных сторонних ресурсов

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

test("тест с медленными ресурсами", async ({ page }) => {
  // Перехватываем все запросы
  page.route(
    "**",
    (route) =>
      new Promise((resolve) => {
        const requestURL = route.request().url()
        // Разрешаем запросы к собственному домену мгновенно
        if (requestURL.match(/http:\/\/localhost:8080/)) {
          resolve(route.continue())
        } else {
          // Задерживаем внешние запросы на 10 секунд
          setTimeout(() => {
            console.log(`Задержка: ${requestURL}`)
            resolve(route.continue())
          }, 10000)
        }
      })
  )

  await page.goto("http://localhost:8080")

  // Оценка LCP (Largest Contentful Paint)
  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries()
        const largestPaintEntry = entries.at(-1)
        resolve(largestPaintEntry.startTime)
      }).observe({
        type: "largest-contentful-paint",
        buffered: true,
      })
    })
  })
  
  console.log(`LCP: ${parseFloat(largestContentfulPaint)}мс`)
  await expect(page).toHaveTitle(/Frontend downtime/)
})

Блокировка внешних ресурсов и отслеживание ошибок

test("тест с заблокированными сторонними ресурсами", async ({ page }) => {
  page.route("**", (route) => {
    const requestURL = route.request().url()
    // Разрешаем запросы к собственному домену
    if (requestURL.match(/http:\/\/localhost:8080/)) {
      route.continue()
    } else {
      // Блокируем все остальные (внешние)
      route.abort()
    }
  })

  // Мониторим выброшенные на странице ошибки JavaScript
  const errors = []
  page.on("pageerror", (error) => {
    errors.push(error)
  })

  await page.goto("http://localhost:8080")
  
  // Здесь мы проверяем, что в массиве ошибок нет никаких исключений
  // Иначе тест провалится!
  expect(errors.length).toBe(0) 
})

Тестирование vs. Мониторинг

Заключение