diff --git a/docs/quickstart/running-tests.mdx b/docs/quickstart/running-tests.mdx index 81a4364..c0372d6 100644 --- a/docs/quickstart/running-tests.mdx +++ b/docs/quickstart/running-tests.mdx @@ -18,7 +18,7 @@ You can also run tests in `gui` mode. To do this, execute the command: npx testplane gui ``` -### Running a specific test +### Running a specific test {#the_grep_option} Consider the following set of tests: @@ -96,7 +96,7 @@ describe("Browser specific tests", () => { }); ``` -### Running a test from a specific file +### Running a test from a specific file {#running_a_specific_file} To run tests from a specific file, execute the command: diff --git a/docs/quickstart/usage-in-ci.mdx b/docs/quickstart/usage-in-ci.mdx index 0c89c4b..7443cac 100644 --- a/docs/quickstart/usage-in-ci.mdx +++ b/docs/quickstart/usage-in-ci.mdx @@ -1,6 +1,53 @@ --- sidebar_position: 4 -draft: true --- # Usage in CI + +Testplane can be easily integrated into any CI system. For GitHub Actions, we recommend using the official action [gemini-testing/gh-actions-testplane](https://github.com/gemini-testing/gh-actions-testplane), which automatically caches browsers and generates reports. + +## GitHub Actions Setup + +Create a `.github/workflows/testplane.yml` file in your repository root: + +```yaml title=".github/workflows/testplane.yml" +name: Testplane Tests + +on: + push: + branches: [main, master] + pull_request: + branches: [main, master] + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "npm" + + - run: npm ci + + - uses: gemini-testing/gh-actions-testplane@v1 + with: + browser: "chrome,firefox" # Optional: list of browsers +``` + +## Additional Features + +The action supports additional configuration parameters: + +- `config-path` — path to config file (default: `testplane.config.ts`) +- `set` — run specific test sets +- `grep` — filter tests by pattern +- `storybook` — integration with [@testplane/storybook](https://github.com/gemini-testing/testplane-storybook) + +For more details on parameters and advanced usage scenarios, see the [GitHub Actions setup guide](../guides/how-to-run-on-github.mdx). + +## Other CI Systems + +For more details on configuring Testplane for other CI systems, refer to the [configuration documentation](../reference/config/main.mdx). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/index.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/index.mdx index 4611679..5822935 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/index.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/index.mdx @@ -4,23 +4,22 @@ sidebar_position: 1 import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -import Admonition from "@theme/Admonition"; # Установка и настройка ## Системные требования -Чтобы начать работу с testplane, установите `Node.js` версии 18.0 и выше. +Чтобы начать работу с Testplane, установите `Node.js` версии 18.0 и выше. ## Установка {#install} -Для запуска установщика testplane с помощью `npm` выполните следующую команду: +Для запуска установщика Testplane с помощью `npm` выполните следующую команду: ```bash npm init testplane@latest YOUR_PROJECT_PATH ``` -Чтобы настроить проект, а не использовать дефолты при его инициализации, укажите опцию `-v`. +Чтобы настроить проект в интерактивном режиме с дополнительными параметрами (выбор пакетного менеджера, установка плагинов), укажите опцию `-v`. После выполнения команды установки в директории проекта появится следующий набор файлов и папок: @@ -38,25 +37,23 @@ testplane.config.ts В файле `testplane.config.ts` содержится базовый набор настроек для запуска тестов: -```typescript +```typescript title="testplane.config.ts" +import { setupBrowser } from "@testplane/testing-library"; +import type { WdioBrowser } from "testplane"; + export default { gridUrl: "local", baseUrl: "http://localhost", - pageLoadTimeout: 0, - httpTimeout: 60000, + pageLoadTimeout: 20000, + httpTimeout: 20000, testTimeout: 90000, resetCursor: false, - - // В параметре sets содержится информация о директории, в которой находятся тесты - // и перечень браузеров, в которых они будут запускаться: sets: { desktop: { files: ["testplane-tests/**/*.testplane.(t|j)s"], browsers: ["chrome", "firefox"], }, }, - - // В поле `browsers` описана конфигурация используемых браузеров: browsers: { chrome: { headless: true, @@ -71,7 +68,9 @@ export default { }, }, }, - + prepareBrowser: (browser: WdioBrowser) => { + setupBrowser(browser); + }, plugins: { "html-reporter/testplane": { enabled: true, @@ -80,13 +79,77 @@ export default { diffMode: "3-up-scaled", }, }, -}; +} satisfies import("testplane").ConfigInput; ``` +### Основные параметры конфигурации + +- `gridUrl` — где запускать браузеры: `"local"` для локального запуска или URL для Selenium Grid или облака (например, BrowserStack, Sauce Labs). +- `sets` — группы тестов для разных браузеров (например, набор тестов для десктопных Chrome или Firefox и набор для мобильного Safari). Подробнее: [справочник по sets](https://github.com/gemini-testing/testplane-docs/pull/reference/config/sets.mdx). +- `testTimeout` — максимальное время выполнения теста в миллисекундах, после превышения тест прерывается. +- `pageLoadTimeout` — максимальное время ожидания загрузки страницы. +- `browsers` — конфигурация браузеров; `headless: true` — запуск без UI. Подробнее: [Браузеры](https://github.com/gemini-testing/testplane-docs/pull/basic-guides/managing-browsers.mdx). +- `prepareBrowser` — хук перед тестами; в конфиге выше вызывает `setupBrowser(browser)` и добавляет методы Testing Library. +- `plugins` — плагины; в конфиге выше `html-reporter` для интерактивных отчетов (скриншоты, логи, отладка). Подробнее: [HTML Reporter](https://github.com/gemini-testing/testplane-docs/pull/html-reporter/overview.mdx). + +Полный список параметров конфигурации ищите в [справочнике по конфигурации](../reference/config/main.mdx). + Чтобы загрузить браузеры, описанные в конфиге, отдельно от запуска самого Testplane, выполните команду: ```bash npx testplane install-deps ``` -Без предварительного запуска команды, недостающие браузеры будут автоматически загружены с первым запуском Testplane. +Без предварительного запуска команды недостающие браузеры будут автоматически загружены с первым запуском Testplane. + +## Первый запуск {#first-run} + +После установки и настройки запустите тестовый пример, который был создан автоматически: + +```bash +npx testplane +``` + +### Что происходит при первом запуске + +Testplane автоматически выполнит следующие действия: + +1. Загрузит браузеры: если вы не запускали `install-deps`, Testplane скачает Chrome и Firefox +2. Запустит тест: выполнит пример из `testplane-tests/example.testplane.ts` +3. Создаст отчет: сгенерирует HTML-репорт в папке `testplane-report/` + +### Просмотр результатов + +После завершения тестов откройте интерактивный отчет: + +```bash +npx testplane gui +``` + +Команда запустит локальный сервер и откроет отчет в браузере. В интерфейсе вы увидите: + +- Список пройденных тестов +- Статистику выполнения +- Скриншоты (если тест использует `assertView`) +- Логи выполнения + +### Ожидаемый результат + +Если все настроено корректно, вы увидите: + +``` +✔ test examples › docs search test [chrome] - 3.2s +✔ test examples › docs search test [firefox] - 3.5s + +Total: 2 Passed: 2 Failed: 0 Skipped: 0 Retries: 0 +``` + +Для успешного прохождения тестам нужен доступ к [testplane.io](https://testplane.io/). + +## Что дальше? + +Теперь, когда Testplane настроен и работает, вы можете: + +- [Написать свои тесты](./writing-tests.mdx): структура тестов, селекторы и основные команды +- [Запустить и отладить тесты](./running-tests.mdx): фильтрация, GUI-режим, отладка +- [Настроить CI/CD](./usage-in-ci.mdx): автозапуск тестов в GitHub Actions diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx index 094fa00..a62b886 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx @@ -2,6 +2,8 @@ sidebar_position: 3 --- +import Admonition from "@theme/Admonition"; + # Запуск и отладка ## Запуск тестов @@ -12,150 +14,223 @@ sidebar_position: 3 npx testplane ``` -Также тесты можно запускать в `gui`-режиме, для этого выполните команду: +Также тесты можно запускать в GUI-режиме с визуальным интерфейсом: ```bash npx testplane gui ``` -### Запуск конкретного теста +В GUI вы можете: + +- Наблюдать выполнение тестов в реальном времени +- Просматривать скриншоты, сравнивать и обновлять их +- Перезапускать отдельные тесты +- Видеть подробные ошибки с историей команд + +![Интерфейс Testplane GUI](/gif/docs/ui/run-debug.gif) -У вас имеется набор тестов, и вам нужно запустить только один из них. +Подробнее о GUI читайте в разделе [HTML Reporter](../html-reporter/overview.mdx). -```javascript -const assert = require("assert"); +## Фильтрация тестов при запуске -describe("tests", () => { - it("Проверка отображения главной страницы", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const title = await browser.getTitle(); - assert.ok(title.includes("Testplane")); +Предположим, у вас есть такие тесты: + +```typescript +describe("Главная страница", () => { + it("Проверка заголовка", async ({ browser }) => { + // ... }); it("Проверка наличия поля поиска", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const searchButton = await browser.$("button.DocSearch"); - const isExisting = await searchButton.isExisting(); - assert.strictEqual(isExisting, true); + // ... }); }); ``` -В таком случае выполните команду: +### По имени {#the-grep-option} + +Опция [`--grep`](../reference/cli.mdx) позволяет запускать тесты по совпадению с именем: + +```bash +npx testplane --grep "Проверка наличия поля поиска" +``` + +Поддерживаются регулярные выражения: ```bash -testplane --grep "Проверка наличия поля поиска" +npx testplane --grep "поиска|заголовка" ``` -В кавычках вам необходимо передать содержимое скобок ключевого слова `it`. +Опция `--grep` фильтрует тесты по полному имени (включая все уровни `describe` и `it`). Переданная строка интерпретируется как регулярное выражение. -### Запуск тестов в конкретных браузерах +### По тегам + +Теги помогают группировать тесты, например, отделить быстрые smoke-тесты от полных: + +```typescript +describe("Авторизация", { tag: "auth" }, () => { + it("Успешный вход", { tag: "smoke" }, async ({ browser }) => { + // ... + }); +}); +``` -По умолчанию тесты запускаются в тех браузерах, которые указаны в файле `testplane.config.ts`. +Запуск только smoke-тестов: -```javascript -browsers: ["chrome", "firefox"]; +```bash +npx testplane --tag "smoke" # только smoke-тесты +npx testplane --tag "auth&smoke" # тесты с обоими тегами ``` -При выполнении команды `npx testplane` тесты запустятся в браузерах Google Chrome и Mozilla Firefox. +### По браузеру + +По умолчанию тесты запускаются во всех браузерах из конфига. Чтобы запустить только в одном: ```bash -# Запуск во всех браузерах (по умолчанию) -testplane +npx testplane --browser chrome ``` -Чтобы выполнить тесты в конкретном браузере, используйте команду: +Опцию `--browser` можно указывать несколько раз для запуска в нескольких браузерах: ```bash -# Запуск только в Chrome -testplane --browser chrome +npx testplane -b chrome -b firefox ``` -Также вы можете указать конкретный браузер для работы в теле теста. +Также вы можете указать конкретный браузер в коде теста: -```javascript -// tests/browser-specific.test.js -describe("Browser specific tests", () => { - it("should work in all browsers", async ({ browser }) => { - await browser.url("https://example.com"); +```typescript +describe("Запуск тестов в разных браузерах", () => { + it("Работает во всех браузерах", async ({ browser }) => { + await browser.url("https://testplane.io/"); }); // Пропустить тест в Safari testplane.skip.in("safari", "Feature not supported in Safari"); - it("should work only in Chrome and Firefox", async ({ browser }) => { - await browser.url("https://example.com"); - // ... тело теста + it("Работает только в Chrome и Firefox", async ({ browser }) => { + await browser.url("https://testplane.io/"); + // ... }); // Запустить только в Chrome testplane.only.in("chrome"); - it("should work only in Chrome", async ({ browser }) => { - await browser.url("https://example.com"); - // ... тело теста + it("Работает только в Chrome", async ({ browser }) => { + await browser.url("https://testplane.io/"); + // ... }); }); ``` -### Запуск теста из конкретного файла +### По файлу {#running_a_specific_file} -Чтобы запустить тесты из конкретного файла, выполните команду: +Чтобы запустить тесты из конкретного файла: ```bash -# Запуск конкретного файла -testplane ../testplane-tests/example.testplane.ts +npx testplane tests/login.testplane.ts ``` -Где `../testplane-tests/example.testplane.ts` — это путь к файлу с тестами. - -### Режим пользовательского интерфейса +### Быстрый запуск одного теста -В Testplane вы можете работать с тестами в UI-формате с помощью Testplane UI. +Во время разработки удобно использовать `.only()`: -![](/img/docs/html-reporter/html-reporter-demo.png) +```typescript +it.only("Проверка поля поиска", async ({ browser }) => { + // Запустится только этот тест +}); +``` -О процессах установки и настройки Testplane UI вы можете прочитать в разделе [UI.](..//html-reporter//overview.mdx) +Уберите `.only()` перед коммитом, иначе в CI запустится только один тест! ## Отладка -### Отладка в gui-формате +### GUI-режим -Отслеживать процесс выполнения тестов очень легко, если запустить их в `gui`-режиме. В подобном формате работы html-reporter продемонстрирует, какие тесты были успешно выполнены, а в каких присутствуют ошибки, а также укажет характер этих ошибок. +Самый простой способ отладки — запустить тесты в GUI: -![Интерфейс Testplane GUI](/img/docs/guides/testplane-gui.png) +```bash +npx testplane gui +``` -### Browser.debug() +В GUI вы увидите выполнение тестов в реальном времени, скриншоты и ошибки. Можно перезапускать отдельные тесты и наблюдать за их выполнением. -В Testplane имеется встроенный инструмент для отладки — `browser.debug`. +### Локальный браузер с DevTools -```javascript -it("отладка с паузой", async ({ browser }) => { - // Открываем тестируемую страницу - await browser.url("/page"); +Для отладки можно открыть видимое окно браузера с DevTools: - // browser.debug() останавливает выполнение теста - // и открывает интерактивную консоль (REPL — Read-Eval-Print Loop) - await browser.debug(); +```bash +npx testplane --local --devtools --headless false --grep "Название теста" +``` - // После вызова debug() тест приостанавливается - // В консоли можно вводить команды WebdriverIO в реальном времени: +Что произойдет: - // Примеры команд, которые можно вводить в REPL: - // > await browser.$('.button').click() - кликнуть по кнопке - // > await browser.getTitle() - получить заголовок страницы - // > await browser.$$('.items') - найти все элементы - // > .exit - выйти из режима отладки +1. Откроется видимое окно браузера +2. Автоматически откроются Chrome DevTools +3. Вы сможете наблюдать за выполнением теста - // Этот код выполнится только после выхода из debug() - await browser.$(".button").click(); -}); +В браузере Firefox нет поддержки DevTools. + +### REPL-режим + +REPL (Read-Eval-Print Loop) — интерактивная консоль для выполнения команд браузера во время теста. Есть несколько способов войти в REPL: + +1. Опции командной строки: + + - `--repl` — включает REPL-режим. Для входа в консоль вызовите [`browser.switchToRepl()`](../commands/browser/switchToRepl.mdx) в коде теста + - `--repl-before-test` — автоматически открывает REPL перед запуском теста + - `--repl-on-fail` — автоматически открывает REPL при падении теста + + ```bash + # Открыть REPL при падении теста + npx testplane --repl-on-fail --grep "Название теста" --browser chrome + + # Открыть REPL перед запуском теста + npx testplane --repl-before-test --grep "Название теста" --browser chrome + ``` + +2. Команда `browser.switchToRepl()` в коде: + + ```typescript + it("Отладка", async ({ browser }) => { + await browser.url("/page"); + await browser.switchToRepl(); // Тест остановится здесь + + // В консоли можно выполнять команды: + // > await browser.$(".button").click() + // > await browser.getTitle() + // > Cmd+D или Ctrl+D — выйти из REPL и продолжить тест + + await browser.$(".button").click(); + }); + ``` + +### Сохранение браузера после теста + +По умолчанию браузер закрывается сразу после теста. Чтобы изучить финальное состояние страницы: + +```bash +npx testplane --keep-browser --grep "Название теста" +npx testplane --keep-browser-on-fail # только при падении ``` -### Отладка через Testplane UI +Полезно для проверки DOM, cookies или localStorage после выполнения теста, а также в связке с [MCP](../testplane-mcp.mdx), чтобы AI-агент подключился к уже подготовленному браузеру. -Наиболее удобным способом для работы с отладкой тестов является UI-режим, в нем вы можете в реальном времени наблюдать выполнение тестов. +## Полезные команды -![](/gif/docs/ui/run-debug.gif) +```bash +# Запуск всех тестов +npx testplane -И находить нестабильные, медленные тесты или другие проблемы с помощью опций «сортировка» и «группировка». +# Запуск в GUI с визуальным интерфейсом +npx testplane gui + +# Запуск конкретного теста +npx testplane --grep "название теста" + +# Запуск только в одном браузере +npx testplane --browser chrome -![](/gif/docs/ui/analytics.gif) +# Отладка с Chrome DevTools Protocol +npx testplane --devtools --grep "название теста" + +# Интерактивная отладка при падении +npx testplane --repl-on-fail --grep "название теста" +``` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/usage-in-ci.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/usage-in-ci.mdx index 8e8caa3..cd1d58a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/usage-in-ci.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/usage-in-ci.mdx @@ -1,6 +1,49 @@ --- sidebar_position: 4 -draft: true --- # Использование в CI + +Testplane можно легко интегрировать в любую CI-систему. Для GitHub Actions рекомендуем использовать официальный action [gemini-testing/gh-actions-testplane](https://github.com/gemini-testing/gh-actions-testplane), который автоматически кэширует браузеры и формирует отчеты. + +## Настройка GitHub Actions + +Создайте файл `.github/workflows/testplane.yml` в корне вашего репозитория: + +```yaml title=".github/workflows/testplane.yml" +name: Testplane Tests + +on: + push: + branches: [main, master] + pull_request: + branches: [main, master] + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "npm" + + - run: npm ci + + - uses: gemini-testing/gh-actions-testplane@v1 + with: + browser: "chrome,firefox" # Опционально: список браузеров +``` + +## Дополнительные возможности + +Action поддерживает дополнительные параметры для настройки: + +- `config-path` — путь к файлу конфигурации (по умолчанию `testplane.config.ts`) +- `set` — запуск конкретных наборов тестов +- `grep` — фильтрация тестов по паттерну +- `storybook` — интеграция с [@testplane/storybook](https://github.com/gemini-testing/testplane-storybook) + +Подробнее о параметрах и расширенных сценариях использования читайте в [руководстве по настройке GitHub Actions](../guides/how-to-run-on-github.mdx), а о настройке Testplane для других CI-систем — в [документации по конфигурации](../reference/config/main.mdx). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx index 4e0927e..e30eb53 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx @@ -2,434 +2,324 @@ sidebar_position: 2 --- +import Admonition from "@theme/Admonition"; + # Написание тестов ## Структура теста -Блок `describe` предназначен для группировки связанных тестов. - -```javascript +```typescript describe("Название группы тестов", () => { - it("описание того, что должно произойти", async ({ browser }) => { + it("Описание того, что должно произойти", async ({ browser }) => { // Тело теста }); }); ``` -В блоке `it` описываются тестовые сценарии. +- `describe` группирует связанные тесты +- `it` описывает конкретный тестовый сценарий +- `browser` — объект браузера для взаимодействия со страницей -```javascript -it("описание того, что должно произойти", async ({ browser }) => { - // Тело теста -}); -``` +После установки Testplane можно ознакомиться с примером теста в файле `testplane-tests/example.testplane.ts`. -После установки testplane вы можете ознакомиться с примером теста, для этого перейдите в папку `testplane-tests` и откройте файл `example.testplane.ts`. +
-```javascript -describe("test examples", () => { - it("docs search test", async ({ browser }) => { - await browser.openAndWait("https://testplane.io/"); + Пример теста - // Find by tag name - const navBar = await browser.$("nav"); + ```typescript title="example.testplane.ts" - // Find by aria-label - await navBar.$("aria/Search").click(); + describe("test examples", () => { + it("docs search test", async ({browser}) => { + await browser.openAndWait("https://testplane.io/"); - // Find by placeholder - const fileSearchInput = await browser.findByPlaceholderText("Search docs"); - await fileSearchInput.waitForDisplayed(); - await fileSearchInput.setValue("config"); + // Find by tag name + const navBar = await browser.$("nav"); - // Find by id - const fileSearchResults = await browser.$("#docsearch-list"); + // Find by aria-label + await navBar.$("aria/Search").click(); - // Find by role - const fileSearchResultsItems = await fileSearchResults.findAllByRole("option"); + // Find by placeholder + const fileSearchInput = await browser.findByPlaceholderText("Search docs"); + await fileSearchInput.waitForDisplayed(); + await fileSearchInput.setValue("config"); - await expect(fileSearchResultsItems.length).toBeGreaterThan(1); - }); -}); -``` + // Find by id + const fileSearchResults = await browser.$("#docsearch-list"); -## Базовый синтаксис + // Find by role + const fileSearchResultsItems = await fileSearchResults.findAllByRole("option"); -### Навигация + await expect(fileSearchResultsItems.length).toBeGreaterThan(1); + }); + }); -Для перемещения по страницам используйте метод: + ``` -```javascript -await browser.url("https://testplane.io/ru/"); -``` +
-Если на странице имеются элементы, которые отображаются с задержкой, для корректного выполнения тестов укажите явное ожидание: +## Базовый синтаксис -```javascript -await browser.url("https://testplane.io/ru/"); -await browser.$("h1").waitForExist({ timeout: 5000 }); -const title = await browser.$("h1").getText(); -``` +### Навигация -Либо используйте команду: +Для перемещения по страницам используйте метод [`browser.url()`](../commands/browser/url.mdx): -```javascript -await browser.openAndWait("https://testplane.io/ru/"); +```typescript +await browser.url("https://testplane.io/"); ``` -Команда `await browser.openAndWait()` по умолчанию дожидается загрузки всех необходимых элементов на странице. +Для перехода на страницу можно также использовать команду [`browser.openAndWait()`](../commands/browser/openAndWait.mdx), которая поддерживает больше настроек, связанных с загрузкой статики на странице. ### Селекторы -Testplane поддерживает различные стратегии поиска элементов: `CSS`-селекторы (самые распространенные), текстовые селекторы (по содержимому), `XPath` для сложных запросов. Метод `$()` возвращает первый найденный элемент, а `$$()` — массив всех подходящих элементов: +Testplane поддерживает различные стратегии поиска элементов: CSS-селекторы (самые распространенные), текстовые селекторы (по содержимому), XPath для сложных запросов. Метод [`$()`](../commands/browser/$.mdx) возвращает первый найденный элемент, а [`$$()`](../commands/browser/$$.mdx) — массив всех подходящих. -```javascript -const assert = require("assert"); +Testplane интегрирована с Testing Library, это позволяет писать более читаемые тесты, ориентированные на пользовательское поведение. Пакет устанавливается автоматически при инициализации через `npm init testplane`. -describe("tests", () => { - it("Проверка отображения главной страницы", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const title = await browser.getTitle(); - assert.ok(title.includes("Testplane")); +```typescript +describe("Примеры селекторов", () => { + it("Первый найденный элемент", async ({ browser }) => { + await browser.url("https://testplane-bookstore.website.yandexcloud.net/"); + + const heading = await browser.$("h1"); + const input = await browser.$('[data-testid="search-input"]'); + const inputTL = await browser.findByTestId("search-input"); }); - it("Проверка наличия логотипа на главной странице", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const logo = await browser.$("a.navbar__brand"); - const isDisplayed = await logo.isDisplayed(); - assert.strictEqual(isDisplayed, true); + it("Поиск нескольких элементов", async ({ browser }) => { + await browser.url("https://testplane.io/"); + + const links = await browser.$$("a"); + expect(links.length).toBeGreaterThan(0); }); +}); +``` - it("Проверка навигационного меню", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const menuItems = await browser.$$("nav.navbar a.navbar__item"); - assert.ok(menuItems.length > 0); +#### Типы селекторов + +```typescript +describe("Типы селекторов", () => { + it("CSS-селекторы", async ({ browser }) => { + await browser.url("https://testplane-bookstore.website.yandexcloud.net/"); + + // data-атрибуты + const input = await browser.$('[data-testid="search-input"]'); + const inputTL = await browser.findByTestId("search-input"); + + // CSS-классы и теги + const navbar = await browser.$(".navbar"); + const heading = await browser.$("h1"); }); - it("Проверка наличия поля поиска", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - const searchButton = await browser.$("button.DocSearch"); - const isExisting = await searchButton.isExisting(); - assert.strictEqual(isExisting, true); + it("Текстовые селекторы", async ({ browser }) => { + await browser.url("https://testplane.io/"); + + // Поиск по точному тексту + const match = await browser.$("=Docs"); + + // Поиск по частичному совпадению + const partial = await browser.$("*=Doc"); + }); + + it("XPath", async ({ browser }) => { + await browser.url("https://testplane.io/"); + + // Поиск по тексту внутри элемента + const link = await browser.$('//a[text()="Docs"]'); }); }); ``` -### Взаимодействия с элементами +Подробнее про селекторы читайте в [этой статье](../basic-guides/selectors.mdx). -После знакомства с селекторами и поиска элемента можно выполнить различные действия: клик, ввод текста, двойной клик. +### Взаимодействие с элементами -Для клика по элементу используйте метод `element.click()`. +#### Клик -```javascript +```typescript const assert = require("assert"); -describe("Тест клика", () => { - it("Пример клика — открытие поиска", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); +describe("Клик", () => { + it("Клик: открытие поиска", async ({ browser }) => { + await browser.url("https://testplane.io/"); // Клик по кнопке поиска const searchButton = await browser.$("button.DocSearch"); await searchButton.waitForClickable({ timeout: 5000 }); await searchButton.click(); - // Проверяем, что модальное окно поиска появилось + // Проверка const searchModal = await browser.$(".DocSearch-Modal"); + await searchModal.waitForDisplayed({ timeout: 5000 }); const isDisplayed = await searchModal.isDisplayed(); assert.strictEqual(isDisplayed, true); }); + + it("Двойной клик: выделение текста заголовка", async ({ browser }) => { + await browser.url("https://testplane.io/ru/"); + + // Поиск заголовка на главной странице + const heading = await browser.$("h1"); + await heading.waitForDisplayed({ timeout: 5000 }); + await heading.scrollIntoView(); + + // Двойной клик по заголовку + await heading.doubleClick(); + + // Проверка + const isDisplayed = await heading.isDisplayed(); + assert.strictEqual(isDisplayed, true); + }); }); ``` -Чтобы заполнить поле для ввода текста используйте метод `element.setValue("text")`. +#### Ввод текста -```javascript +```typescript const assert = require("assert"); -describe("Тест ввода текста", () => { - it("Пример ввода текста — поиск по документации", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); +describe("Ввод текста", () => { + it("Ввод текста в поле поиска", async ({ browser }) => { + await browser.url("https://testplane.io/"); - // Открываем поиск + // Клик по кнопке поиска const searchButton = await browser.$("button.DocSearch"); await searchButton.waitForClickable({ timeout: 5000 }); await searchButton.click(); - // Вводим текст в поле поиска + // Ввод текста в поле поиска const searchInput = await browser.$("input.DocSearch-Input"); await searchInput.waitForDisplayed({ timeout: 5000 }); await searchInput.setValue("browser"); - // Проверяем, что текст введен + // Проверка const inputValue = await searchInput.getValue(); assert.strictEqual(inputValue, "browser"); }); }); ``` -Для двойного клика по элементу используйте метод `element.doubleClick()`. - -```javascript -const assert = require("assert"); - -describe("Тест двойного клика", () => { - it("Пример двойного клика — выделение текста заголовка", async ({ browser }) => { - await browser.url("https://testplane.io/ru/"); - - // Находим заголовок на главной странице - const heading = await browser.$("h1"); - await heading.waitForDisplayed({ timeout: 5000 }); - await heading.scrollIntoView(); - - // Двойной клик по заголовку - await heading.doubleClick(); - - // Проверяем, что элемент существует и отображается - const isDisplayed = await heading.isDisplayed(); - assert.strictEqual(isDisplayed, true); - }); -}); -``` - -Testplane предоставляет специальные методы для работы с различными элементами форм. Например, чекбоксы и радиокнопки управляются через клик. +#### Взаимодействие с формами -```javascript +```typescript const assert = require("assert"); describe("Взаимодействие с формами", () => { - it("Работа с чекбоксами через клик", async ({ browser }) => { - // Для демонстрации используем страницу с формой - await browser.url("https://the-internet.herokuapp.com/checkboxes"); + it("Чекбокс", async ({ browser }) => { + await browser.url("https://testplane-bookstore.website.yandexcloud.net/login"); - const checkbox1 = await browser.$("#checkboxes input:nth-child(1)"); - await checkbox1.waitForDisplayed({ timeout: 5000 }); + const checkbox = await browser.$('[data-testid="remember-checkbox"]'); + await checkbox.waitForDisplayed({ timeout: 5000 }); - // Проверяем начальное состояние - let isSelected = await checkbox1.isSelected(); + // Проверка начального состояния + let isSelected = await checkbox.isSelected(); assert.strictEqual(isSelected, false); - // Кликаем для выбора - await checkbox1.click(); - isSelected = await checkbox1.isSelected(); + // Выбор + await checkbox.click(); + isSelected = await checkbox.isSelected(); assert.strictEqual(isSelected, true); - // Кликаем еще раз для снятия выбора - await checkbox1.click(); - isSelected = await checkbox1.isSelected(); + // Снятие выбора + await checkbox.click(); + isSelected = await checkbox.isSelected(); assert.strictEqual(isSelected, false); }); - it("Работа с радиокнопками через клик", async ({ browser }) => { - await browser.url("https://the-internet.herokuapp.com/"); - - // Переходим на страницу с примерами - const link = await browser.$("a[href='/forgot_password']"); - await link.click(); - - // Работа с полем email (как пример радиокнопок) - const emailInput = await browser.$("#email"); - await emailInput.waitForDisplayed({ timeout: 5000 }); - await emailInput.setValue("test@example.com"); - - const value = await emailInput.getValue(); - assert.ok(value.includes("test@example.com")); - }); -}); -``` - -Для выпадающих списков `(