Декораторы в Playwrightт для мобильного тестирования📲

Нашел классную статью, где автор предлагает избавиться от дублирования кода и упростить поддержку тестов в Playwright. Как? С помощью декораторов TypeScript инкапсулировать платформенно-зависимую логику и создать единый тест для мобильных и настольных платформ.

Читать здесь📖

Теги: #playwright #cleanСode

Тестирование с параметром noWaitAfter в Playwright🕐

Параметр noWaitAfter в Playwright позволяет настроить, как обрабатываются действия, такие как клики по ссылкам, отправка форм или запуск сетевых запросов. Он определяет, должен ли Playwright ждать завершения вызванного события (навигации или перехода на другую страницу) перед тем, как перейти к следующему шагу.
➡️ noWaitAfter: false (по умолчанию): Playwright ждёт завершения действия перед переходом к следующему шагу.
➡️ noWaitAfter: true: Playwright немедленно переходит к следующему шагу, даже если действие ещё не завершено.

Сценарии использования:
💙 noWaitAfter: true в обработчиках локаторов
С версии Playwright 1.44 параметр noWaitAfter: true можно использовать с обработчиками локаторов. Это особенно полезно при работе с оверлеями или другими элементами, которые могут мешать выполнению действий.

test('Закрытие оверлея с noWaitAfter: true', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    // Локатор для оверлея
    const overlayLocator = page.locator('#overlay');
    
    // Добавляем обработчик локатора для закрытия оверлея
    await page.addLocatorHandler(overlayLocator, async overlay => {
        await overlay.locator('#closeButton').click(); // Закрытие оверлея
    }, { times: 3, noWaitAfter: true }); // Макс. 3 раза, без ожидания после клика
    
    // Взаимодействие с кнопкой после закрытия оверлея
    await page.click('#fetchWeatherButton');
    
    // Проверка отображения прогноза погоды
    await page.waitForSelector('#weatherDisplay:has-text("Прогноз погоды для Chennai")');
});

В этом примере обработчик кликает на кнопку закрытия оверлея, и благодаря noWaitAfter: true, тест продолжает выполнение, не дожидаясь исчезновения оверлея.

💙 noWaitAfter: false для получения данных
Когда требуется подождать завершения сетевого запроса, например, получения прогноза погоды, параметр noWaitAfter: false гарантирует, что Playwright дождётся завершения запроса.

test('Получение данных погоды с noWaitAfter: false', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Клик по кнопке "Получить прогноз погоды" и ожидание завершения запроса
  await page.click('#fetchWeatherButton', { noWaitAfter: false });
  
  // Проверка отображения данных после загрузки
  await page.waitForSelector('#weatherDisplay:has-text("Прогноз погоды для Chennai")');
  const weatherText = await page.textContent('#weatherDisplay');
  console.log(weatherText);
});

Здесь Playwright ждёт, пока данные полностью загрузятся, чтобы тест был надёжным.

💙 noWaitAfter: true для UI-манипуляций
Для операций, таких как переключение видимости элементов или обновление интерфейса, нет необходимости ждать завершения действий. Параметр noWaitAfter: true позволяет пропускать лишние ожидания.

test('UI-манипуляции с noWaitAfter: true', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Клик по кнопке без ожидания
  await page.click('#toggleButton', { noWaitAfter: true });
  await page.waitForSelector('#toggleElement.visible');
  
  // Симуляция быстрых кликов без ожидания
  await page.click('.rapidButton', { noWaitAfter: true });
  
  // Кастомное действие, активируемое таймером
  await page.click('#customActionButton', { noWaitAfter: true });
  await page.waitForSelector('#customActionResult:has-text("Действие завершено!")');
});

В этом тесте различные UI-операции выполняются без необходимости ждать завершения каждого действия, что ускоряет тест.

❓ Зачем использовать noWaitAfter?
➡️ Ускорение тестов. Пропуская ненужные ожидания, можно значительно повысить скорость выполнения тестов.
➡️ Обеспечение точности. Использование noWaitAfter: false гарантирует, что Playwright будет ждать завершения действий, требующих сетевых запросов или навигации, что снижает риск ложноположительных результатов.

⏰ Когда использовать noWaitAfter?
➡️ Используйте noWaitAfter: false для действий, связанных с навигацией или загрузкой данных.
➡️ Используйте noWaitAfter: true для манипуляций с интерфейсом и других действий, не требующих ожидания.

Теги: #playwright

😉Заключение:
Правильное использование noWaitAfter помогает создавать быстрые и надёжные тесты, оптимизируя время ожидания в зависимости от типа действия.

Источник

Было полезно? Ставьте 👍 👎

Теги: #playwright #tools #testing

Архитектура playwright🏠

Когда ты работаешь с инструментом важно исследовать его внутренности и понимать как он работает
Давайте разберем playwright

Корневая директория📝
В корневой директории мы находим следующие папки:
🌸playwright/
🌸browser_patches/
🌸docs/
🌸examples/
🌸packages/
🌸tests/
🌸utils/

А также файл package.json, который включает следующие ключи:

{
  "name": "playwright-internal",
  "private": true,
  "workspaces": ["packages/*"]
}

Файл package.json намекает, что основная функциональность находится внутри директории packages/, поскольку корневой файл помечен как private, имеет в названии "internal" и использует ключ "workspaces", который сообщает Node.js, что проект имеет несколько пакетов. Давайте быстро рассмотрим другие директории верхнего уровня перед тем, как углубиться в папку packages/👇

✳️browser_patches — эта папка содержит патчи для браузеров, добавляющие дополнительные элементы управления и функции к некоторым движкам браузеров, используемых в этом проекте. Интересно, что здесь есть патч для WebKit, позволяющий ему работать на Windows.
✳️ docs — папка docs содержит файлы Markdown, которые компилируются в документацию, представленную на сайте Playwright.
✳️ examples — здесь находятся примеры тестовых скриптов, к которым можно обратиться при начале работы с проектом Playwright.
✳️ tests — даже библиотеки для тестирования должны иметь автоматизированные тесты, которые написаны с использованием Playwright.
✳️ utils — директория utils содержит различные инструменты, используемые во время сборки, Docker-образы, функциональность для Azure, генератор файлов типов и многое другое.

Директория packages✏️
Директория packages содержит более 20 отдельных пакетов, что усложняет понимание. Мы разделим этот список на понятные категории.

Пакеты для отчётности и генерации тестов
Playwright содержит множество различных пакетов для отчётности о тестах, каждый со своим набором функций. Кратко, список пакетов в этой категории:
✳️html-reporter/
✳️recorder/
✳️trace-viewer/
✳️trace/
✳️web/

Эти пакеты содержат код, связанный с обработкой отчётов о тестах или их генерацией с помощью пакета recorder. Кроме того, есть trace и trace-viewer, которые могут записываться во время выполнения тестов Playwright. Пакет web/ предоставляет утилиты, общие для различных веб-инструментов, перечисленных здесь.

Пакеты, специализированные для браузеров
Каждый из этих пакетов просто экспортирует пакет playwright-core вместе со скриптом установки только для соответствующего браузера. Вы можете найти их на npmjs, например, playwright-chromium — это отдельный пакет, который имеет Playwright, специализированный только для автоматизации Chromium.
✳️ playwright-chromium/
✳️ playwright-firefox/
✳️ playwright-webkit/

Пакеты для установки браузеров
Эти пакеты включают только скрипты установки для каждого из браузеров. Например, playwright-browser-chromium соответствует пакету @playwright/browser-chromium на npmjs.
✳️playwright-browser-chromium/
✳️playwright-browser-firefox/
✳️playwright-browser-webkit/

Пакеты для тестирования компонентов
Эти пакеты связаны с экспериментальной системой тестирования компонентов в Playwright. Они предоставляют функциональность, аналогичную тому, как Jest может рендерить отдельные компоненты для разных библиотек.
✳️playwright-ct-core/
✳️playwright-ct-react/
✳️playwright-ct-react17/
✳️playwright-ct-solid/
✳️playwright-ct-svelte/
✳️playwright-ct-vue/
✳️playwright-ct-vue2/

Основные функциональные пакеты
Наконец, мы подходим к основным пакетам #Playwright, которые содержат всю главную функциональность проекта.
✳️playwright-core/
✳️playwright-test/
✳️playwright/
✳️protocol/

Обратите внимание, что папка playwright-test — это просто обёртка для связывания playwright-core и playwright вместе в пакете @playwright/test, устанавливаемом через npm. Если вы посмотрите в файл index.js, вы увидите только экспорт из playwright/test, который находится в пакете playwright.

Другой пакет, на который стоит обратить внимание, — это protocol, который содержит автоматически сгенерированный код через некоторые скрипты сборки в директории utils корневой директории проекта Playwright. Он содержит YAML-файл protocol.yml, который перечисляет все интерфейсы, используемые протоколом Playwright. Если вы когда-либо захотите создать драйвер для Playwright на другом языке, это один из основных файлов, к которому стоит обратиться при создании этой библиотеки.

Теперь два основных пакета всей библиотеки Playwright — это playwright и playwright-core. Первый из них является обёрткой вокруг playwright-core и отвечает за управление всей логикой тестирования. Это включает запуск рабочих процессов тестирования, выполнение тестов, отчёты о результатах, управление повторными запусками и утверждениями тестов. Хорошим ориентиром для кода, содержащегося в этом пакете, является любая конфигурационная логика, которую вы найдёте в файле playwright.config.ts, или любой связанный с запуском тестов код, например:

// my-test.spec.ts
import { test } from "@playwright/test";

В этом случае вы, вероятно, импортируете код из пакета playwright.

Другой основной пакет — playwright-core, который содержит всю функциональность автоматизации браузера. Эта функциональность разделена на два основных компонента: клиентскую библиотеку и серверную библиотеку. Серверная библиотека, находящаяся в packages/playwright-core/src/server, содержит всю логику, отвечающую за действия автоматизации браузера. Это означает, что она отправляет команды через Chrome DevTools Protocol (CDP) или аналогичные протоколы, чтобы сообщить браузеру выполнить такие действия, как "нажать кнопку входа", "ввести 'Hello' в текстовое поле" или "перейти на 'https://news.ycombinator.com'". Серверная библиотека содержит реализации для каждого из поддерживаемых браузеров и предоставляет унифицированный API через WebSocket-сервер для доступа к этой функциональности из других процессов.

С другой стороны, клиентская библиотека содержит все пользовательские API, которые вы используете при написании скриптов автоматизации браузера. Например, если у вас есть такой скрипт:

// my-automation-noscript.ts
import { chromium } from "@playwright/test";

(async function () {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://playwright.dev");
})();

Вы фактически импортируете chromium из экземпляра класса в playwright-core/client/playwright.

Затем вызовы browser.newPage и page.goto делают запросы к интерфейсам в серверной библиотеке, которая взаимодействует с браузерами через CDP или аналогичные протоколы. Это означает, что если вы когда-либо захотите написать собственный инструмент автоматизации браузера, независимый от конкретного браузера, полезной отправной точкой будет использование серверной библиотеки из пакета playwright-core, поскольку она предоставляет всесторонний и проверенный API для такой функциональности.

Такой принцип разделения ответственности работает хорошо, потому что позволяет поддерживать несколько языков, которые могут использовать API автоматизации браузера Playwright. Фактически, если вы посмотрите на другие реализации библиотеки Playwright, вы обнаружите те же шаблоны проектирования (например, ChannelOwner), что и в клиентской библиотеке, найденной в playwright-core.

Перевод

Еще интересные статьи про архитектуру playwright:
➡️https://qacomet.com/playwright/how-playwright-initializes/
➡️https://medium.com/@divyarajsinhdev/understanding-playwright-architecture-e456fcee0222

Полезно? Ставьте 👍 👎

🤓 Всем привет!
Октябрь и ноябрь выдался на события⬇️
✅ Организовали непростой митап с РТК ИТ

✅ Побывал на гейзенбаге в новой для себя роли — в качестве эксперта, выступил на открытом микрофоне.
Прямо на конференции получил новость о том, что мою должность сокращают😑 Теперь я в активном поиске 🐆🐆

✅ Выступил с докладом на SQA Days про то, как меняется код QA-инженера в зависимости от грейда

✅ Организовали MoscowQA с VK Tech


Планы на оставшийся ноябрь также грандиозные:
📌 еду на любимую фронтовую конференцию HolyJs, если успею подготовить доклад, выступлю на открытом микрофоне.

📌 после Holy выступаю с докладом на митапе Qaчественое общение про репортеры в playwright

📌 на следующей неделе в книжном клубе сообщества MoscowQA будем обсуждать книгу «Принципы юнит-тестирования». Подробности на канале сообщества. Подписывайтесь, если хотите участвовать в мероприятиях и митапах MoscowQA😎

📌 в ближайшее время планирую запустить свой подкаст. И даже записал первый выпуск🤓 Но чтобы анонсировать, хочу иметь в запасе 4 выпуска🤠
Какие темы было бы интересно поднять?❓

#breakingnews

Ох, раньше я обожал собеседования…🗣

Но после того, как за последний месяц прошел их столько, что уже голова кругом, чувствую, что хватит. Поэтому решил: будет много разборов вопросов с собеседований, но не в формате «вопрос-ответ». Я готовлю небольшие статьи, где в одном тексте отвечаю сразу на 2-3 популярных вопроса.

Например:
✅ Что такое браузерный движок и зачем он нужен?
✅ Какие браузерные движки существуют?
✅ Основные этапы рендеринга страницы?
✅ Как работает JavaScript в браузере?
✅ Какие движки JavaScript существуют?
✅ В чем разница между браузерным движком и JavaScript движком?

В браузере есть два ключевых компонента:
❗️Браузерный движок (Rendering Engine)
❗️Движок JavaScript (JavaScript Engine)

🌐Браузерный движок
«Мозг» браузера, который превращает HTML и CSS в красивую картинку на экране.
Его этапы работы:
🟡Парсинг HTML и CSS (dom и cssom)
🟡Создание рендер-дерева
🟡Компоновка (layout)
🟡Отрисовка (painting)
🟡Выделение слоев (compositing)

Примеры движков:
🟡Blink (Chrome, Edge, Opera, Яндекс.Браузер)
🟡Gecko (Firefox)


📶Движок JavaScript
Отвечает за выполнение JS-кода, включая парсинг и оптимизацию.

Примеры движков:
🔵V8 (Google Chrome, Microsoft Edge)
🔵SpiderMonkey (Mozilla Firefox)
🔵JavaScriptCore (Nitro) (Safari)

Основные этапы работы (на примере V8):
1️⃣ Парсинг: создание AST (Abstract Syntax Tree).
2️⃣ Генерация байт-кода: промежуточное представление, которое проще
интерпретировать.
3️⃣Интерпретация: выполнение байт-кода.
4️⃣ JIT-компиляция: профилирование и компиляция часто вызываемого кода в машинный.

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

Подробнее о том как работает v8 смотрите ➡️ на Хабре.

Фремворк vs библиотека 🙌

В чем разница между библиотекой и фреймворком?👀

Если коротко и просто👇

📌 Библиотека — это набор инструментов, функций или классов, которые вы сами подключаете и вызываете в своём коде, когда это нужно. Вы полностью управляете процессом и решаете, как именно эти инструменты использовать.

📌 Фреймворк — это уже целая структура, которая задаёт правила и порядок работы. Вы добавляете свой код внутрь этой структуры, но основная логика и жизненный цикл уже управляются фреймворком.


Представьте стройку 🔨
🛠 Библиотека — это как набор инструментов: молоток, пила, шуруповёрт. Вы решаете, какие из них и когда использовать.

🏠 Фреймворк — это как готовый каркас дома. Вам остаётся добавить окна, двери и мебель, но основные правила и процесс строительства уже заданы.


Playwright как пример:
Playwright сам по себе — это библиотека. Он предоставляет API для управления браузерами (запуск, навигация по страницам, работа с элементами). Вы решаете, как и где его использовать, а сам Playwright не навязывает структуру.

Playwright Test — это уже фреймворк. Он добавляет тестовый раннер, готовый жизненный цикл тестов, параллельный запуск, ассерты и отчёты. С ним вам не нужно думать о базовой организации тестов — фреймворк берёт это на себя.


Ключевое различие👇
В библиотеке вы управляете всем сами. В фреймворке — вы следуете его правилам и структуре.

Какие еще примеры библиотеки/фреймворка знаете?🤔

Всем привет!🤓

Как вы знаете, у меня было много постов про js/ts. Так получилось, что теперь я буду писать на котлине, и, пока жду выхода, уже начал читать книгу о котлине. Для лучшего изучения и бОльшей практики, начал делать бэкенд для сайта MoscowQA, используя чат гпт (куда без него?)

Если вы знаете котлин, напишите мне в лс, я бы хотел получить код ревью или найти себе наставника🧐

Будет некоторые посты про котлин и мои открытия с ним в формате «о, прикинь, на котлине можно вот так»😲

Спасибо всем кто поддержал меня, кто-то рекомендовал на разные вакансии, вы лучшие!

Из первых открытий, kotlin можно компилить в js, и вот так писать на реакте в котлине

import react.*
import react.dom.*

external interface AppProps : Props {
    var name: String
}

val App = FC<AppProps> { props ->
    div {
        h1 { +"Hello, ${props.name}!" }
        p { +"This is a React component written in Kotlin!" }
    }
}

А вы на чём пишите?✏️👀

by lazy🤔
Как я писал ранее, сейчас я изучаю Kotlin, и для меня было много интересных открытий с этим языком.

Например, когда работаешь с тестами, нужно инициализировать большие наборы данных, к примеру, тестовых пользователей, сложные конфигурации страниц, загружаемые данные из базы и многое другое. Это может замедлить выполнение тестов.

📝Решение в Kotlin: by lazy
Этот подход позволяет откладывать создание объектов и данных до тех пор, пока они действительно не понадобятся.
Пример:

open class BaseTest {
    // Ленивое создание страницы логина
    protected val loginPage: LoginPage by lazy {
        println("Инициализация страницы логина")
        LoginPage(browser)
    }

    // Ленивое создание данных тестового пользователя
    protected val testUser: User by lazy {
        // Большой объект пользователя
        User()
    }

    // Ленивое создание страницы дэшборда
    protected val dashboardPage: DashboardPage by lazy {
        DashboardPage(page)
    }
}

❓Сравнение с TypeScript
TypeScript не имеет встроенного механизма для ленивой инициализации, но её можно реализовать вручную. Один из способов — использование геттеров (get).
Пример на TypeScript:

class LazyExample {
    private _lazyValue?: string;

    get lazyValue(): string {
        if (!this._lazyValue) {
            console.log("Инициализация свойства");
            this._lazyValue = "Hello, TypeScript!";
        }
        return this._lazyValue;
    }
}

const example = new LazyExample();
console.log("До первого доступа");
console.log(example.lazyValue); // Выполнится инициализация
console.log(example.lazyValue); // Значение берётся из кеша

😉Итог
✔️Если вы используете Kotlin, by lazy — это мощный инструмент, который делает код лаконичным и удобным для тестирования.
✔️В TypeScript вам нужно вручную управлять ленивой инициализацией через геттеры или функции. Это требует больше усилий, но предоставляет больше гибкости.

P.S. Если вы думаете, что я буду говорить только о преимуществах Kotlin, то нет. Меня уже знатно пригорело от него, особенно от пакетных менеджеров Kotlin/Java😅

Полезно? Ставьте 👍 👎

Plumber🧐

Если вам нужно тестировать разные системы очередей, такие как Kafka, RabbitMQ и другие, и вы любите делать это прямо в консоли, то Plumber — это инструмент, который вас приятно удивит.

Он позволяет⬇️
✅ Проверять сообщения в реальном времени.
✅ Отправлять сообщения в очереди.
✅ Делать подписки и отслеживать потоки данных.
✅ Легко передавать данные между системами.

https://github.com/streamdal/plumber?tab=readme-ov-file

Полезно? Ставьте 👍 👎

#tools

Websocket как устроен💡💡

Из истории про собеседование, пару раз спрашивали как устроен WebSocket

WebSocket это протокол двустороннего соединения между клиентом и сервером. В отличие от традиционного HTTP, где запросы инициируются клиентом, WebSocket позволяет обеим сторонам отправлять данные друг другу в любой момент.

💬 Этапы работы WebSocket
1️⃣ Установление соединения (Handshake).
Соединение начинается с обычного HTTP-запроса. Клиент отправляет запрос на сервер с просьбой перейти на протокол WebSocket. Запрос содержит специальные заголовки, включая Upgrade и Connection, которые указывают, что клиент хочет использовать WebSocket.

Пример HTTP-запроса от клиента:

GET /socket HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade

Если сервер поддерживает WebSocket, он ответит (101 Switching Protocols) и подтверждает переход на WebSocket-протокол.

Пример ответа сервера:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

2️⃣ После успешного хендшейка соединение переключается с HTTP на WebSocket и соединение становится постоянным.
3️⃣ Клиент и сервер могут отправлять сообщения друг другу в обоих направлениях без необходимости повторного запроса или ожидания ответа.

🤔Для чего использовать?
Низкая задержка, что позволяет не устанавливать соединение для каждого сообщения.
Сообщения отправляются без дополнительного HTTP-заголовка, что делает их лёгкими.
Мгновенная передача данных.

В основном используется для онлайн-игр, финансовых бирж, систем отслеживания.

😉Как тестировать?
1️⃣ В постмане или insomnia есть поддержка websockek.
2️⃣ Мне нравится делать в devtools об это я рассказывал тут.
3️⃣ А посмотреть какие запросы отправляет приложение можно в network в фильтре ws⬇️

😈Почувствуй боль и не повторяй моих ошибок!

Делаю сайт для MoscowQA, прикручиваю админку и решаю довериться советам ChatGPT... 👹

Что из этого вышло? ⬇️

1️⃣ Прошу его выбрать подходящий инструмент
2️⃣ Устанавливаю в проект
3️⃣ Получаю ошибку 😡
4️⃣ Кидаю ошибку ИИ, он предлагает решение
5️⃣ Переделываю по его совету
6️⃣ Возвращаюсь к пункту №3 🔄

И так я промучился 6-8 раз, бегая по кругу от ошибки к ошибке!

📖🤍 Открыл документацию инструмента, и оказалось, что проблема решается абсолютно по-другому, а не так, как советовал ChatGPT.

🪟 Вывод простой:
Используя новый инструмент, сначала проверь официальную доку, а не слепо доверяйся ИИ!

Не повторяйте моих ошибок, друзья! 😳

❓ Как выбрать тест-раннер для юнит-тестов?

При написании юнит-тестов на фронтенд одна из главных задач разработчика или QA — подобрать правильный тест-раннер

➡ Что делает тест-раннер?
🌸 запускает тесты и управляет их выполнением
🌸собирает результаты и генерирует отчёты об успехах и ошибках
🌸поддерживает дополнительные возможности (mocking, snapshots, анализ покрытия кода)

➡ Основные библиотеки
🟣 Ava — выделяется скоростью, так как запускает тесты параллельно в отдельных процессах.
🟣 Jest — славится универсальностью, простотой настройки, встроенными возможностями (скорее всего ваша команда его использует)
🟣 Vitest — сочетает совместимый с Jest API и мощь инфраструктуры Vite, что обеспечивает отличную производительность и нативную поддержку ESM/TypeScript.


Моя рекомендация — Vitest! Он объединил удобство Jest и современные технологии Vite, что делает лучшим выбором для новых проектов.

А какой тест-раннер используете у вас на проекте и почему?

#automation #tools

🧑‍💻 Больше проо фронтенд тестирования и не только