diff --git a/blog/vscode-extension.mdx b/blog/vscode-extension.mdx new file mode 100644 index 0000000..f51868a --- /dev/null +++ b/blog/vscode-extension.mdx @@ -0,0 +1,130 @@ +--- +title: Расширение для VS Code +slug: vscode-extension +hide_table_of_contents: false +date: 2024-09-26T19:00 +--- + +import Admonition from "@theme/Admonition"; +import runTestsFromSidebarVideoUrl from "/video/blog/vscode-extension/run-tests-from-sidebar.mp4"; +import runTestsFromEditorVideoUrl from "/video/blog/vscode-extension/run-tests-from-editor.mp4"; + +Для Testplane реализовали расширение для [VS Code][vscode], с помощью которого можно настраивать Testplane с нуля, запускать тесты и удобно работать с REPL режимом. + + + +### Установка + +Установите расширение со страницы [VS Code Marketplace][vscode-testplane-marketplace] или на вкладке расширений в VS Code IDE. + +![Расширение в VS Code IDE](/img/blog/vscode-extension/testplane-in-extensions-panel.png) + +После установки откройте VS Code в пустом проекте и в панеле управления введите: + +``` +Install Testplane +``` + +![Установка Testplane](/img/blog/vscode-extension/testplane-install.png) + +### Запуск тестов + +#### Из сайдбара в панеле для тестирования + +Панель для тестирования можно открыть, кликнув на значок тестирования в панели действий. + +![Открытие панели для тестирования](/img/blog/vscode-extension/testing-sidebar.png) + +В левой части экрана отображается сайдбар с деревом всех прочитанных тестов. В дереве сверху вниз отображаются: + +- название директории с тестами (`testplane-tests`); +- название файла теста (`example.testplane.ts`); +- название сьюта (`test`). В примере используется `describe` из [Mocha BDD интерфейса][mocha-bdd-interface]; +- название теста (`example`). В примере использует `it` из [Mocha BDD интерфейса][mocha-bdd-interface]; +- название браузера в котором тест будет запущен (`chrome`). + +У каждого из элементов дерева отображается кнопка `Run Test`. Если нажать на `Run Test` у элемента: + +- директории, файла или сьюта, то запустятся все дочерние тесты во всех браузерах; +- теста, то запустится выбранный тест во всех браузерах; +- браузера, то запустится один тест в одном браузере. + +Пример запуска тестов из сайдбара: + + + +Также можно выполнить запуск всех тестов с помощью кнопки `Run Tests`. + +![Запуск всех тестов](/img/blog/vscode-extension/run-all-tests-from-sidebar.png) + +#### Из текстового редактора + +Если в текстовом редакторе открыть Testplane тест, то рядом с каждым сьютом (`describe`) и тестом (`it`) будет отображаться зеленая кнопка play для их запуска. Если нажать левой кнопкой мыши, то запустится тест во всех браузерах, и после его выполнения отобразится результат в виде иконки статуса прохождения теста. +Если нажать на кнопку play правой клавишей мыши, то можно запустить тест в одном из браузеров. + +Пример запуска тестов из текстового редактора: + + + +#### С настройкой `devtools` + +В сайдбаре в панели для тестирования так же отображается секция с названием Testplane. В ней можно управлять настройками в рантайме. При клике в чекбокс `Enable devtools` и последующем запуске тестов браузеры будут подниматься с использованием CDP протокола (вне зависимости от того что указано в конфиге). Подробнее про этот режим можно прочитать тут. + +![Включение опции devtools](/img/blog/vscode-extension/enable-devtools.png) + +#### С настройкой `REPL` + +При клике в чекбокс `Enable REPL` и последующем запуске теста (в REPL режиме можно одновременно запустить только один тест) он будет запущен в специальном REPL режиме. Подробнее про этот режим можно прочитать тут. + +![Включение опции 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 может приводить к некорректному отображению иконок с кнопкой play для запуска тестов из текстового редактора. + +### Заключение + +Данная функциональность предоставляет нашим пользователям новые возможности: + +- возможность запуска тестов прямо из IDE и просмотр результата выполнения; +- возможность максимально быстро переключится в режим `devtools` и `repl`; +- автоматически подхватывать изменения, внесенные в конфиг 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 diff --git a/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx b/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx new file mode 100644 index 0000000..d93eb71 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx @@ -0,0 +1,129 @@ +--- +title: Extension for VS Code +slug: vscode-extension +hide_table_of_contents: false +date: 2024-09-26T19:00 +--- + +import Admonition from "@theme/Admonition"; +import runTestsFromSidebarVideoUrl from "/video/blog/vscode-extension/run-tests-from-sidebar.mp4"; +import runTestsFromEditorVideoUrl from "/video/blog/vscode-extension/run-tests-from-editor.mp4"; + +We have implemented an extension for [VS Code][vscode] for Testplane, which allows you to configure Testplane from scratch, run tests, and conveniently work with the REPL mode. + + + +### Installation + +Install the extension from the [VS Code Marketplace][vscode-testplane-marketplace] or from the extensions tab in the VS Code IDE. + +![Extension in VS Code IDE](/img/blog/vscode-extension/testplane-in-extensions-panel.png) + +After installation, open VS Code in an empty project and enter in the command panel: + +``` +Install Testplane +``` + +![Install Testplane](/img/blog/vscode-extension/testplane-install.png) + +### Running tests + +#### From the sidebar in the testing panel + +The testing panel can be opened by clicking on the testing icon in the activity bar. + +![Opening testing panel in activity bar](/img/blog/vscode-extension/testing-sidebar.png) + +On the left side of the screen, a sidebar displays a tree of all read tests. The tree displays from top to bottom: + +- the name of the directory with tests (`testplane-tests`); +- the name of the test file (`example.testplane.ts`); +- the name of the suite (`test`). In the example, `describe` from the [Mocha BDD interface][mocha-bdd-interface] is used; +- the name of the test (`example`). In the example, `it` from the [Mocha BDD interface][mocha-bdd-interface] is used; +- the name of the browser in which the test will be run (`chrome`). + +Each element in the tree has a `Run Test` button. If you click on it at the element: + +- for a directory, file, or suite, all child tests will run in all browsers; +- for a test, the selected test will run in all browsers; +- for a browser, one test will run in one browser. + +Example of running tests from the sidebar: + + + +You can also run all tests using the `Run Tests` button. + +![Running all tests](/img/blog/vscode-extension/run-all-tests-from-sidebar.png) + +#### From a text editor + +If you open a Testplane test in the text editor, a green play button will be displayed next to each suite (`describe`) and test (`it`) for launching them. If you click the left mouse button, the test will run in all browsers, and after execution, the result will be displayed as a status icon for the test's pass/fail status. +If you right-click the play button, you can run the test in one of the browsers. + +Example of running tests from a text editor: + + + +#### With the `devtools` settings + +In the sidebar of the testing panel, there is also a section titled Testplane. Here you can manage settings at runtime. By clicking the `Enable devtools` checkbox and subsequently running tests, browsers will launch using the CDP protocol (regardless of what is specified in the config). You can read more about this mode here.. + +![Enabling devtools option](/img/blog/vscode-extension/enable-devtools.png) + +#### With the `REPL` settings + +When you click the checkbox `Enable REPL` and subsequently run a test (only one test can be run simultaneously in REPL mode), it will be launched in a special REPL mode. You can read more about this mode here. + +![Enabling the REPL option](/img/blog/vscode-extension/enable-repl.png) + +### Filtering tests in the sidebar of the testing panel + +To display only tests in a specific browser in the tree, you need to enter the tag `@testplane:browser:your_browser_name` in the filtering input. To get a suggestion, you can simply type `@browser`. You can also use multiple tags there. + +![Filter by specified browser](/img/blog/vscode-extension/filter_sidebar_by_browser.png) + +You can also use the following values in the filter input: + +- a string with the name of the tree element (directory/file/suite/test/browser); +- tag @doc - to display tests from the active file in the text editor; +- tag @openedFiles - to display tests in all open files in the text editor; +- tag @executed - to display only running tests; +- tag @failed - to display only failed tests. + +### Restarting the Testplane Environment + +You can restart Testplane using the `Refresh Tests` button in the sidebar. In this case, the config and tests will be re-read. This will be useful if you have added a new test to a file (watching test files is not yet supported) or if a critical error has occurred. The test tree is automatically updated when the config changes. + +![Updating the test tree](/img/blog/vscode-extension/refresh-tests.png) + +### Requirements + +- the Testplane version must be 8.20.0 or higher (tests will not run with lower versions). + +### Current Limitations + +- debug and continuous (auto-run) modes are not supported; +- there is no watching for adding/removing tests and files; +- using custom Mocha interfaces may lead to incorrect display of icons with the play button for running tests from the text editor. + +### Conclusion + +This functionality provides our users with new opportunities: + +- the ability to run tests directly from the IDE and view the execution results; +- the ability to quickly switch to devtools and REPL mode; +- automatically pick up changes made to the Testplane config. + +Install the Testplane extension for VS Code and provide us with feedback. If you encounter any issues, please visit the [GitHub issue](https://github.com/gemini-testing/testplane/issues) — we will definitely help you! + +[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 diff --git a/static/img/blog/vscode-extension/enable-devtools.png b/static/img/blog/vscode-extension/enable-devtools.png new file mode 100644 index 0000000..efeecde Binary files /dev/null and b/static/img/blog/vscode-extension/enable-devtools.png differ diff --git a/static/img/blog/vscode-extension/enable-repl.png b/static/img/blog/vscode-extension/enable-repl.png new file mode 100644 index 0000000..a32664b Binary files /dev/null and b/static/img/blog/vscode-extension/enable-repl.png differ diff --git a/static/img/blog/vscode-extension/filter_sidebar_by_browser.png b/static/img/blog/vscode-extension/filter_sidebar_by_browser.png new file mode 100644 index 0000000..1a52857 Binary files /dev/null and b/static/img/blog/vscode-extension/filter_sidebar_by_browser.png differ diff --git a/static/img/blog/vscode-extension/refresh-tests.png b/static/img/blog/vscode-extension/refresh-tests.png new file mode 100644 index 0000000..566c356 Binary files /dev/null and b/static/img/blog/vscode-extension/refresh-tests.png differ diff --git a/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png b/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png new file mode 100644 index 0000000..b3e997c Binary files /dev/null and b/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png differ diff --git a/static/img/blog/vscode-extension/testing-sidebar.png b/static/img/blog/vscode-extension/testing-sidebar.png new file mode 100644 index 0000000..9021131 Binary files /dev/null and b/static/img/blog/vscode-extension/testing-sidebar.png differ diff --git a/static/img/blog/vscode-extension/testplane-in-extensions-panel.png b/static/img/blog/vscode-extension/testplane-in-extensions-panel.png new file mode 100644 index 0000000..6c554cf Binary files /dev/null and b/static/img/blog/vscode-extension/testplane-in-extensions-panel.png differ diff --git a/static/img/blog/vscode-extension/testplane-install.png b/static/img/blog/vscode-extension/testplane-install.png new file mode 100644 index 0000000..8077e7d Binary files /dev/null and b/static/img/blog/vscode-extension/testplane-install.png differ diff --git a/static/video/blog/vscode-extension/run-tests-from-editor.mp4 b/static/video/blog/vscode-extension/run-tests-from-editor.mp4 new file mode 100644 index 0000000..1d311f4 Binary files /dev/null and b/static/video/blog/vscode-extension/run-tests-from-editor.mp4 differ diff --git a/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 b/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 new file mode 100644 index 0000000..7e40387 Binary files /dev/null and b/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 differ