Автоматизоване тестування є природним для розробників — воно забезпечує надійність, безпеку та узгодженість наших додатків в процесі їх еволюції. Але що стосується SEO? Оптимізація для пошукових систем є критично важливою для видимості вебсайту, безпосередньо впливаючи на трафік, конверсії та загальний успіх. Традиційно аудит SEO був ручним процесом, але автоматизація змінює цю гру.
З правильними інструментами, ми можемо використовувати кінцеве тестування (E2E) для аудиту ключових факторів SEO, забезпечуючи, що наші вебдодатки відповідають найкращим практикам без постійних ручних перевірок. У цій статті ми розглянемо, як за допомогою Playwright, Puppeteer і Vitest інтегрувати аудит SEO в набір тестів, роблячи оптимізацію для пошукових систем безперешкодною частиною вашого робочого процесу розробки.
Що таке SEO?
SEO, скорочено від search engine optimization (оптимізація для пошукових систем), це практика покращення видимості вашого сайту в пошукових системах. Вона допомагає пошуковим системам зрозуміти ваш контент і забезпечує, щоб користувачі могли знайти ваш сайт, вирішити, чи відвідати його, і мати зручний досвід, коли вони це роблять.
Безголові браузери
Безголові браузери — браузери без графічного інтерфейсу користувача — широко використовуються в автоматизації. Багато з них, наприклад, безголовий режим Chrome, включають вбудовані інструменти для оцінки SEO, доступності та продуктивності. Один з найвідоміших інструментів для цього — Lighthouse, який надає автоматизовані звіти про SEO-проблеми та метрики веб-продуктивності.
Вибір фреймворка для тестування SEO-аудитів
У світі розробки програмного забезпечення є багато інструментів для тестування. У цій статті ми розглянемо два з них: Vitest і Microsoft Playwright.
Vitest
Vitest — це фреймворк тестування для JavaScript нового покоління, що працює на Vite. Це чудова альтернатива Jest, що пропонує підтримку TypeScript, швидку налаштування та хорошу продуктивність. Однак, хоча у нього є експериментальний безголовий браузер, він не підходить для складних сценаріїв, таких як запуск SEO-аудитів у CI/CD пайплайнах. Натомість ми можемо поєднати Vitest з Puppeteer, більш зрілим інструментом для автоматизації безголового браузера.
Playwright
Playwright — це потужний фреймворк, побудований спеціально для кінцевого тестування. На відміну від Vitest, він був розроблений для обробки реальних взаємодій з браузером, що робить його ідеальним для SEO-аудитів. Він підтримує Chromium, WebKit і Firefox, працює на Windows, macOS та Linux і може виконувати тести як в безголовому, так і в звичайному режимах. Playwright навіть включає нативну емуляцію мобільних пристроїв для тестування того, як сторінки відображаються на мобільних пристроях.
Lighthouse: Потужний інструмент для тестування SEO
Lighthouse — це відкритий автоматизований інструмент для покращення якості вебсторінок. Його можна запускати на будь-яких публічних вебсторінках або на сторінках, що вимагають аутентифікації. Він пропонує аудити для продуктивності, доступності, прогресивних вебдодатків, SEO та інших аспектів.
Практичний приклад: Запуск SEO-аудиту за допомогою Playwright
Щоб перейти від теорії до практики, ми навчимося налаштовувати Playwright для виконання автоматизованих SEO-аудитів на вебсайті. Наприкінці ви побачите, як легко інтегрувати SEO-тестування у ваш робочий процес розробки — виявляючи проблеми до того, як вони вплинуть на ваші пошукові позиції.
Необхідні вимоги:
Файл конфігурації Playwright
Playwright надає широкі можливості для налаштування виконання тестів. Файл конфігурації дозволяє налаштувати паралелізацію тестів, вказати директорію тестів, визначити базову URL для сторінки, використовувати метод page.goto(...) і налаштувати кілька проектів.
Playwright надає великі можливості для налаштування, дозволяючи розробникам кастомізувати виконання тестів. Файл конфігурації дозволяє:
✅ Налаштувати паралелізацію тестів.
✅ Вказати директорію тестів.
✅ Визначити базову URL для page.goto(…).
✅ Налаштувати кілька проектів.
У розділі projects ми можемо визначити які браузери використовувати, такі як Chromium, Firefox і Safari, а також налаштування для конкретних пристроїв. Це забезпечує правильну конфігурацію для тестування як настільних, так і мобільних версій.
📌 Приклад: Налаштування файлу конфігурації Playwright
Написання тестів, орієнтованих на SEO, за допомогою Playwright
Початок роботи з Playwright
Створення тестів у Playwright дуже просте — це схоже на Jest. Просто створіть файл .ts у папці tests, імпортуйте test та expect з @playwright/test. Playwright надає об'єкт сторінки, який дозволяє взаємодіяти з вебсторінкою, як справжній користувач.
📌 Приклад: Використання об'єкта сторінки в Playwright
Однією з найпотужніших функцій Playwright є локатори, які допомагають знаходити елементи, взаємодіяти з ними (клікати, вводити текст тощо) та робити твердження.
Основні методи локаторів включають:
page.getByRole(): Знаходить елементи за атрибутами доступностіpage.getByText(): Локалізує елементи за текстовим вмістомpage.getByLabel(): Ідентифікує форми за допомогою пов'язаних мітокpage.getByPlaceholder(): Локалізує елементи за текстом у підказціpage.getByAltText(): Знаходить зображення за альтернативним текстомpage.getByTestId(): Локалізує елементи за допомогою спеціального атрибута тесту
Потрібен точніший контроль над тим, який браузер чи рушій рендерингу використовувати для конкретних тестів? Playwright робить це легким. Просто імпортуйте необхідні конфігурації з @playwright/test.
📌 Приклад: Запуск тестів на конкретних браузерах
Написання SEO тестів в Playwright
Налаштування базової URL
Щоб спростити навігацію, ми можемо визначити Базову URL у файлі playwright.config.ts.
Це дозволяє використовувати відносні шляхи замість вказівки повних URL у кожному тесті.
📌 Приклад: Налаштування базової URL у playwright.config.ts
SEO-специфічні тести
Давайте розглянемо деякі основні SEO перевірки, які можна автоматизувати за допомогою Playwright.
1️⃣ Сторінка повинна мати favicon.
2️⃣ Robots.txt має бути дійсним.
3️⃣ Sitemap має бути дійсним.
Примітка: Деякі веб-сервери можуть повертати стиснутий файл gz з XML (як на сайті Planet Argon), тому ми тестуємо обидва варіанти.
4️⃣ Сторінка повинна мати дійсну мета-опис.
5️⃣ Сторінка повинна мати дійсну назву.
6️⃣ Сторінка повинна мати дійсну мета-тег для viewport.
7️⃣ HTML тег повинен містити атрибут lang.
Запуск Lighthouse тестів з Playwright
Щоб інтегрувати аудити Lighthouse з Playwright, встановіть playwright-lighthouse.
Порогові тести
Lighthouse дозволяє нам визначати пороги для основних категорій продуктивності:
✅ Продуктивність
✅ Доступність
✅ SEO
✅ PWA
✅ Кращі практики
Якщо ми нічого не передамо в конфігурацію, всі категорії будуть протестовані, і всі бали будуть 100 (значення за замовчуванням).
Перед написанням Lighthouse тестів ми повинні налаштувати деякі конфігурації у файлі playwright.config.ts і створити новий проект, специфічний для Lighthouse.
Це необхідно для того, щоб тести Lighthouse виконувалися з одним робітником (встановлюючи кількість робітників на 1), що допомагає уникнути можливих проблем з паралельністю. Крім того, нам потрібно налаштувати браузер Chromium для Playwright, щоб він запускався з відкритим портом 9222, дозволяючи Lighthouse взаємодіяти з ним під час аудиту.
Lighthouse Тест: Доступність та Продуктивність
Оцінка доступності повинна бути вище 90, а продуктивність — вище 70.
Чудово! Усі ваші тести пройшли!!
Підсумки
Інтегруючи SEO тести кінцевих точок (E2E) з Playwright та Lighthouse, ви можете проактивно виявляти проблеми з SEO, перш ніж вони вплинуть на ваші позиції в пошукових системах. Автоматизація цих тестів у вашому CI/CD пайплайні забезпечує те, що SEO залишається постійною і безперервною частиною розробки, допомагаючи поліпшити рейтинг сайту в пошукових системах та загальну продуктивність.
Джерела
1 — SEO Starter Guide
2 — Lighthouse Overview
3 — Vitest Guide
4 — Playwright Intro
5 — Abhinaba Ghosh/Playwright/Lighthouse
Цей пост був написаний Евальдо Клоком і спочатку опублікований на блозі Planet Argon.
Перекладено з: End-to-End SEO Testing with Playwright and Lighthouse