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

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

✅ Выступил с докладом на 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

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

Привет всем! 🤚
По голосованию видно, что не все знают, что такое vibe coding.

Что это такое❓
Новый подход к программированию, где код пишет ИИ. 🙃🙃 Ты просто говоришь на обычном языке (например, «сделай сайт с кнопкой»), а ИИ (типа ChatGPT или Cursor) генерирует готовый код. Это реально работает и уже меняет подход к разработке.


Что это значит для QA?🤔
Для тестировщиков это одновременно и упрощение, и усложнение.

➕Плюсы:
Код появляется быстрее. Например, я написал сайт с фронтом и бэком за 2 вечера (без ИИ месяц бы разбирался).

➖Минусы:
ИИ часто выдаёт код с кучей ошибок и неочевидных косяков. QA приходится вылавливать то, что раньше было на разработчике.

Какие неудобства появляются?
➡Качество кода: ИИ может сгенерить неоптимизированный или уязвимый код — нагрузка на тестирование растёт.
➡Отладка: Баги находить сложнее, потому что логика ИИ не всегда очевидна.
➡Зависимость от ИИ: Если инструмент глючит или недоступен, всё стопорится.
➡Контроль: QA теперь проверяет не только функционал, но и безопасность и архитектуру — задачи, которые раньше были на разработчиках.

Каким будет инженер будущего? ❓
🔵 «Vibe coding» ведёт к тому, что один человек сможет стать экспертом сразу в нескольких областях. Представь: ты «программируешь» через ИИ, тестируешь, придумываешь дизайн и даже бизнес-логику. Границы между фронтендом, бэкендом и QA размываются.
🔵 Один специалист сможет заменить целую команду — так же, как раньше веб-разработчик был одновременно дизайнером, кодером и SEO-шником.
🔵 Но есть нюанс: обычный человек дорастёт до какого-то уровня и упрётся в потолок, а инженер будущего сможет стать экспертом во всём, если освоит работу с ИИ.👩‍🍳


Что нас ждёт?🤔
Скоро появится много новых стартапов. Нас ждёт взрыв идей и проектов!

В следующем посте поговорим о том какие для этого есть инструменты

А вы что думаете по этому поводу? Поделитесь мнением в комментариях 😉

💻 Хотите попробовать вайб “кодить с ИИ”?

1⃣ Инструменты авто-дополнения
🟡GitHub Copilot
🟡Amazon CodeWhisperer
🇷🇺 РФ-аналоги (по ощущениям отстают на 2+ года):
🟡gigacode
🟡Yandex Assistant

2⃣ Чаты боты
🟡ChatGPT
🟡Grok (от X)
🟡Claude
🟡Gemini
🟡Perplexity
🟡DeepSeek

3⃣ Агенты / ассистенты
Работают за тебя 🧠

🧪 Пробовал сам:
🟡Cursor — противоречивые впечатления, от безумно круто, до а не все так просто
🧩 Другие (пока не пробовал, привел для примера):
🟡Cody
🟡Aider

Вместо вывода:
✍️ Хочешь сам писать код? — бери инструменты автодополнения
❓ Хочешь понять / объяснить / спросить? — бери тут чат боты в помощь
🏗 Хочешь отключить мозг и нажимать кнопку принять, то что написал ИИ за тебя? — пробуй Cursor

Скоро сделаю практические посты о том как я применял ИИ в тестирование на практике!


Если интересна тема вайб кодинга и применения его в QA поставь 🔥или 👍

#automation #tools #ai #trends

Тестировщики, общий сбор!

Мы часто видим исследования про разработчиков, продактов, аналитиков… А про QA? Почти ничего.

Пора это исправить.

Мы запускаем исследование сообщества QA, чтобы разобраться:
— что нас радует и раздражает,
— какие инструменты и практики мы выбираем,
— как меняется наша роль и работа.

Присоединяйся! Это важно и интересно 🔥

Пройти опрос → https://qa-25.testograf.ru

В анкете 45 вопросов, потребуется 15–20 минут времени.