Conversation
- Add links to reference sections for methods (browser.url, browser.openAndWait, $) - Add examples of different selector types (CSS, text, XPath) with recommendations - Expand --grep section with regex examples and .only() alternative - Add tips on selector priority and best practices
✅ Successfully deployed static |
shadowusr
left a comment
shadowusr
left a comment
There was a problem hiding this comment.
В целом все супер. Статья почти готова к влитию. Можно пофиксить минорные замечания ниже и вливать. Я ок поставил
| }, | ||
| }, | ||
|
|
||
| prepareBrowser: (browser: WdioBrowser) => { |
There was a problem hiding this comment.
Функция setupBrowser нигде не объявлена и не понятно, что она делает, если не прочесть описание ниже.
Если она у нас включается в проекте по умолчанию, надо оставить импорт. Если в шаблонном проекте ее нет, можно и тут не указывать
| - `pageLoadTimeout` — максимальное время ожидания загрузки страницы. | ||
| - `browsers` — конфигурация для каждого браузера. Параметр `headless: true` запускает браузер в фоновом режиме без графического интерфейса. Подробнее в разделе [Браузеры](../basic-guides/managing-browsers.mdx). | ||
| - `prepareBrowser` — хук для настройки браузера перед запуском тестов. В конфиге по умолчанию вызывает `setupBrowser(browser)`, который добавляет методы Testing Library к объекту браузера и элементам, позволяя сразу использовать семантические запросы в тестах. | ||
| - `plugins` — подключаемые модули. `html-reporter` — инструмент для просмотра результатов тестов в браузере. Предоставляет интерактивные отчеты со скриншотами, логами и возможностями отладки. Подробнее в разделе [HTML Reporter](../html-reporter/overview.mdx). |
There was a problem hiding this comment.
Можно чууууточку более кратко =)
gridUrl— где запускать браузеры: "local" для локального запуска или URL Selenium Grid / облака (например, BrowserStack, Sauce Labs).sets— группы тестов для разных браузеров (например, пак для десктоп Chrome/Firefox и пак для мобильного Safari). Подробнее: справочник по sets.testTimeout— максимальное время выполнения теста (мс), после превышения тест прерывается.pageLoadTimeout— максимальное время ожидания загрузки страницы.browsers— конфигурация браузеров;headless: true— запуск без UI. Подробнее: Браузеры.prepareBrowser— хук перед тестами; в конфиге выше — вызываетsetupBrowser(browser)и добавляет методы Testing Library.plugins— плагины; в конфиге выше — html-reporter для интерактивных отчетов (скриншоты, логи, отладка). Подробнее: HTML Reporter.
Markdown
- `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).| Total: 2 Passed: 2 Failed: 0 Skipped: 0 Retries: 0 | ||
| ``` | ||
|
|
||
| ### Возможные проблемы |
There was a problem hiding this comment.
Я бы не делал этот блок. Можно супер кратко в разделе ожидаемого результата написать, что тестам нужен доступ к testplane.io для успешного прохождения.
| ``` | ||
|
|
||
| Команда `await browser.openAndWait()` по умолчанию дожидается загрузки всех необходимых элементов на странице. | ||
| Для ожидания загрузки страницы используйте [`browser.openAndWait()`](../commands/browser/openAndWait.mdx): |
There was a problem hiding this comment.
Давай, наверное, тут оставим пример только с url. А openAndWait упомянем просто кратко текстом — "Для перехода на страницу можно также использовать команду openAndWait, которая поддерживает больше настроек, связанных с загрузкой статики на странице."
А то новому пользователю даем 2 почти одинаковых способа, любой запутается. В будущем думаю мы смержим эти команды в 1.
|
|
||
| ```javascript | ||
| const assert = require("assert"); | ||
| 1. Data-атрибуты (`[data-testid="..."]`) — самый надежный способ |
There was a problem hiding this comment.
Тут потерялся способ поиска по тексту элемента и другим user-facing штукам, которые мы рекомендуем в статье про селекторы
Вообще, я бы вернул краткую формулировку, что есть такие-то способы поиска элементов и сослался на статью про селекторы, где есть прям почти такой же раздел с рекомендациями и приоритетами использования, а то получается дублирование
| // Этот код выполнится только после выхода из debug() | ||
| await browser.$(".button").click(); | ||
| }); | ||
| ``` |
There was a problem hiding this comment.
Это команда browser.debug(), но вообще под REPL мы традиционно понимаем еще --repl-before-test и связанные опции, а также команда browser.switchToRepl(). Думаю, стоит их тут упомянуть
|
|
||
| Полезно для проверки DOM, cookies или localStorage после выполнения теста. | ||
|
|
||
| ## Что делать, если тест упал |
There was a problem hiding this comment.
Имхо, слишком общие рекомендации... тест упал в CI => увеличиваем тайм-ауты вообще плохой совет.
Я бы наверное убрал эту секцию. Мы рассказали про инструменты отладки, дальше уже если тест упал надо ими просто пользоваться =)
| npx testplane --keep-browser-on-fail # только при падении | ||
| ``` | ||
|
|
||
| Полезно для проверки DOM, cookies или localStorage после выполнения теста. |
There was a problem hiding this comment.
Тут еще можно подсветить хороший кейс использования — в связке с MCP, чтобы AI-агент подключился к уже подготовленному браузеру (например, после залогина средствами testplane).
|
|
||
| Подробнее о GUI читайте в разделе [HTML Reporter](../html-reporter/overview.mdx). | ||
|
|
||
| ### Фильтрация тестов |
There was a problem hiding this comment.
Давай унесем это на уровень выше чтобы было:
## Фильтрация тестов при запуске
### По имени
Мотивация: чтобы подразделы появились в структуре статьи справа (там отображаются только заголовки до 3 уровня)
|
|
||
| ```javascript | ||
| const assert = require("assert"); | ||
|  |
There was a problem hiding this comment.
Давай тут поставим посимпатичнее картинку, которая сейчас тут лежит — https://testplane.io/ru/docs/v8/quickstart/running-tests/#%D1%80%D0%B5%D0%B6%D0%B8%D0%BC-%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%BE%D0%B3%D0%BE-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%B0
|
|
||
| У вас имеется набор тестов, и вам нужно запустить только один из них. | ||
| - Наблюдать выполнение тестов в реальном времени | ||
| - Просматривать скриншоты и сравнивать их |
There was a problem hiding this comment.
еще из отчета можно обновлять скриншоты
|
|
||
| ### Запуск тестов в конкретных браузерах | ||
| ```bash | ||
| npx testplane --grep "поиск|навигация" |
There was a problem hiding this comment.
я не совсем понял здесь слово "навигация", которое не матчится ни на один из тестов в примере. Я бы здесь ожидал увидеть "поиска|заголовка", что покажет как можно сматчиться сразу на 2 теста
| # Запуск во всех браузерах (по умолчанию) | ||
| testplane | ||
| npx testplane --tag "smoke" # только smoke-тесты | ||
| npx testplane --tag "auth & smoke" # тесты с обоими тегами |
There was a problem hiding this comment.
правильно писать слитно auth&smoke
| ``` | ||
|
|
||
| Чтобы выполнить тесты в конкретном браузере, используйте команду: | ||
| #### По браузеру |
There was a problem hiding this comment.
здесь можно добавить, что опцию можно указывать несколько раз для запуска в нескольких браузерах. Например, npx testplane -b chrome -b firefox
|
|
||
| ## Отладка | ||
| ```bash | ||
| npx testplane --local --devtools --grep "Название теста" |
There was a problem hiding this comment.
в этом примере нет ничего про headless. Для отключения headless-режима нужно или в конфиге браузера указать headless: true, или запустить тест с такой же cli-опцией npx testplane --headless false (или --browsers-chrome-headless false, если эта опция уазана на уровне браузера). Опция --local здесь включает именно использование локального браузера, а devtools указывает на протокол взаимодействия с браузером. Но за отображение браузера отвечает только опция headless
ps: если пользователь попробует выполнить эту команду на нашем тестовом проекте, то он вообще получит ошибку для браузера Firefox, т.к. в этом браузере нет поддержки devtools. Т.е. тест сможет выполниться (всё еще в headless-режиме) только в Chrome
| ### Локальный браузер с DevTools | ||
|
|
||
| О процессах установки и настройки Testplane UI вы можете прочитать в разделе [UI.](..//html-reporter//overview.mdx) | ||
| По умолчанию Testplane запускает браузер в headless-режиме (без окна). Для отладки можно открыть видимое окно браузера с DevTools: |
There was a problem hiding this comment.
По умолчанию Testplane запускает браузер в headless-режиме (без окна)
только при условии, если проект был настроен через наш визард npm init testplane@latest, т.к. мы там явно в конфиге выставляем эту опцию:
browsers: {
chrome: {
headless: true,
desiredCapabilities: {
browserName: "chrome"
}
},
firefox: {
headless: true,
desiredCapabilities: {
browserName: "firefox"
}
}
},
если пользователь будет вручную настраивать проект, то такой опции там не будет
| npx testplane --browser chrome | ||
|
|
||
| # Отладка с DevTools | ||
| npx testplane --local --devtools --grep "название теста" |
There was a problem hiding this comment.
--local указывать не обязательно
| # Запуск только в одном браузере | ||
| npx testplane --browser chrome | ||
|
|
||
| # Отладка с DevTools |
There was a problem hiding this comment.
тут важно подчеркнуть, что это именно протокол devtools (чтобы не путали с интерфейсом дебага в хроме)
| const menuItems = await browser.$$("nav.navbar a.navbar__item"); | ||
| assert.ok(menuItems.length > 0); | ||
| }); | ||
| // CSS-селекторы (рекомендуется) |
There was a problem hiding this comment.
почему здесь рекомендуется именно css-селектор?
| describe("Типы селекторов", () => { | ||
| it("CSS-селекторы", async ({ browser }) => { | ||
| // Рекомендуется: data-атрибуты (стабильны, не зависят от верстки) | ||
| const button = await browser.$('[data-testid="submit-button"]'); |
There was a problem hiding this comment.
я бы тут (и в остальных местах) показывал сразу 2 варианта поиска — текущий и browser.findByTestId()
3 participants
No description provided.