chore: write article about vscode extension

Author: DudaGod

blog/vscode-extension.mdx

@@ -0,0 +1,131 @@
+---
+title: Расширение для VS Code
+slug: vscode-extension
+hide_table_of_contents: false
+date: 2024-09-25T22:00
+---
+
+import Admonition from "@theme/Admonition";
+
+Для Testplane реализовали расширение для [VS Code][vscode] с помощью которого можно запускать тесты, собирать проект с нуля и удобно работать с <a href="/ru/docs/v8/command-line/#testplane-repl">REPL режимом</a>.
+
+<!-- truncate -->
+
+### Установка
+
+Установите расширение со страницы [VS Code Marketplace][vscode-testplane-marketplace] или на вкладке расширений в VS Code IDE.
+
+![Расширение в VS Code IDE](/img/blog/vscode-extension/testplane-in-extensions-panel.png)
+
+После установки откройте vscode в чистом проекте и в панеле управления введите:
+
+```
+Install Testplane
+```
+
+![Установка Testplane](/img/blog/vscode-extension/testplane-install.png)
+
+### Запуск тестов
+
+#### Из сайдбара в панеле для тестирования
+
+Панель для тестирования можно открыть кликнув на значок тестирования в панели действий.
+
+![Открытие панели для тестирования](/img/blog/vscode-extension/testing-sidebar.png)
+
+В левой части экрана отображается сайдбар с деревом всех прочитанных тестов. В дереве сверху вниз отображаются:
+
+-   название папки;
+-   название файла;
+-   название сьюта (`describe` при использовании [bdd интерфейса][mocha-bdd-interface]);
+-   название теста (`it` при использовании [bdd интерфейса][mocha-bdd-interface]);
+-   название браузера.
+
+У каждого из элементов дерева отображается кнопка `Run Test` с помощью которой можно запустить тесты. Если нажать на `Run Test` у элемента:
+
+-   папки, файла или сьюта, то запустятся все дочерние тесты во всех браузерах;
+-   теста, то запустится выбранный тест во всех браузерах;
+-   браузера, то запустится один тест в одном браузере.
+
+Пример запуска тестов из сайдбара:
+
+<video width="400" height="300" controls="controls">
+    <source
+        src="video/blog/vscode-extension/run-tests-from-sidebar.mp4"
+        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
+    />
+    Тег video не поддерживается вашим браузером.
+    <a href="video/blog/vscode-extension/run-tests-from-sidebar.mp4">Скачайте видео</a>.
+</video>
+
+Так же можно выполнить запуск всех тестов с помощью кнопки `Run Tests`.
+
+#### Из текстового редактора
+
+Если в текстовом редакторе открыть Testplane тест, то рядом с каждым сьютом (`describe`) и тестом (`it`) будет отображаться зеленый треугольник для запуска сьюта/теста. Если нажать левой кнопкой мыши, то запустится тест во всех браузерах и после его выполнения отобразится результат в виде иконки.
+Если нажать на зеленый треугольник правой клавишей мыши, то можно запустить тест в одном из браузеров.
+
+Пример запуска тестов из текстового редактора:
+
+<video width="400" height="300" controls="controls">
+    <source
+        src="video/blog/vscode-extension/run-tests-from-editor.mp4"
+        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
+    />
+    Тег video не поддерживается вашим браузером.
+    <a href="video/blog/vscode-extension/run-tests-from-editor.mp4">Скачайте видео</a>.
+</video>
+
+#### С настройкой `devtools`
+
+В сайдбаре в панели для тестирования так же отображается секция с названием Testplane в которой отображаются настройки, которые можно включить и выключить. При клике в чекбокс `Enable devtools` и последующем запуске тестов, браузеры будут подниматься с использованием CDP протокола (вне зависимости, что указано в конфиге). Подробнее про этот режим можно прочитать <a href="/ru/docs/v8/guides/how-to-use-cdp/">тут</a>.
+
+![Включение опции devtools](/img/blog/vscode-extension/enable-devtools.png)
+
+#### С настройкой `REPL`
+
+ри клике в чекбокс `Enable REPL` и последующем запуске теста (в REPL режиме можно одновременно запустить только один тест), он будет запущен в специальном REPL режиме . Подробнее про этот режим можно прочитать <a href="/ru/docs/v8/command-line/#testplane-repl">тут</a>.
+
+![Включение опции REPL](/img/blog/vscode-extension/enable-repl.png)
+
+### Фильтрация тестов в сайдбаре панели тестирования
+
+Чтобы в дереве отобразить только тесты в определенном браузере необходимо ввести тег `@testplane:browser:your_browser_name` в инпут фильтрации. Чтобы появился саджест можно просто написать `@browser`. Там же можно использовать несколько тегов.
+
+![Фильтр дерева тестов по указанном браузеру](/img/blog/vscode-extension/filter_sidebar_by_browser.png)
+
+Так же в инпуте с фильтрацией можно использовать следующие значения:
+
+-   строка с названием элемента дерева (папка/файл/сьют/тест/браузер);
+-   тег `@doc` - для отображения тестов из активного файла в текстовом редакторе;
+-   тег `@openedFiles` - для отображения тестов во всех открытых файлах в текстовом редакторе;
+-   тег `@executed` - для отображения выполняющихся тестов;
+-   тег `@failed` - для отображения упавших тестов.
+
+### Перезапуск Testplane
+
+С помощью кнопки `Refresh Tests` в сайдбаре можно перезапустить Testplane. В этом случае перечитается конфиг и тесты. Пригодится в случае если вы добавили новый тест в файл (вотчинг тестовых файлов пока не поддерживается) или произошла какая-то критическая ошибка.
+Так же обновление дерева тестов выполняется автоматически при изменении конфига.
+
+![Обновление дерева тестов](/img/blog/vscode-extension/refresh-tests.png)
+
+### Текущие ограничения
+
+-   версия testplane должна быть 8.20.0 и старше (с версиями ниже запуск тестов работать не будет);
+-   не поддержаны debug и continuous (auto-run) режимы;
+-   нет вотчинга добавления/удаления тестов и файлов;
+-   использование кастомных интерфейсов mocha может приводить к некорректному отображению иконок с зеленой стрелкой для запуска тестов из текстового редактора.
+
+### Заключение
+
+Данная функциональность предоставляет нашим пользователям новые возможности:
+
+-   возможность запуска тестов прямо из IDE и просмотр результата выполнения;
+-   возможность переопределить опции `devtools` и `repl` в UI VS Code без изменения конфига;
+-   автоматически подхватывать изменения внесенные в конфиг Testplane.
+
+Устанавливайте расширение Testplane для VS Code и приходите с фидбеком. В случае обнаружения проблем, приходите в [issue github](https://github.com/gemini-testing/testplane/issues) — мы вам обязательно поможем!
+
+[vscode]: https://code.visualstudio.com/
+[vscode-testplane-marketplace]: https://marketplace.visualstudio.com/items?itemName=gemini-testing.vscode-testplane
+[mocha-bdd-interface]: https://mochajs.org/#bdd

i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx

@@ -0,0 +1 @@
+VS Code extension