Conversation
shadowusr
left a comment
shadowusr
left a comment
There was a problem hiding this comment.
В целом получилось очень прикольно! 🔥
Есть замечания по ряду мелочей.
Важно — предлагаю в рамках этого PR вливать именно статью про селекторы. Про quickstart давай вынесем в отдельный PR, так будет проще работать и ревьювить.
| @@ -0,0 +1,602 @@ | |||
| # Селекторы | |||
|
|
|||
| Testplane предоставляет множество способов для поиска элементов на странице браузера с помощью селекторов. Для этого используются библиотеки `WebDriverIO` и `testing-library`. Селекторы позволяют точно идентифицировать элементы интерфейса, что необходимо для автоматизации тестирования. | |||
There was a problem hiding this comment.
Можно оставить:
Testplane предоставляет множество способов для поиска элементов на странице браузера.
Остальная часть не совсем корректная
|
|
||
| ## WebDriverIO | ||
|
|
||
| WebDriverIO — это Node.js-библиотека для автоматизации браузеров, которая реализует протокол WebDriver (W3C стандарт) В Testplane она используется для управления браузерами и взаимодействия с веб-элементами. |
There was a problem hiding this comment.
В Testplane поддержан поиск элементов, совместимый с синтаксисом WebdriverIO: по CSS селекторам, по XPath, по тексту элементов и по другим признакам, которые описаны ниже.
Текущий текст не имеет отношения к селекторам, а дает слишком общую информацию
|
|
||
| Стоит использовать, если: | ||
|
|
||
| - вы работаете с критически важными элементами (формы, модальные окна, главные контейнеры); |
There was a problem hiding this comment.
я бы убрал пункты про критически важный элемент и производительность. можно добавить опять же что это быстрый и простой способ
| - вы тестируете формы и валидацию; | ||
| - нужно работать с семантическими HTML5 типами (`email`, `tel`, `url`, `date`); | ||
| - вам нужно убедиться, что используется правильный тип поля для `accessibility`; | ||
| - вы тестируете различное поведение для разных типов полей. |
There was a problem hiding this comment.
я бы убрал:
- вы тестируете различное поведение для разных типов полей.
- вы тестируете форму и валидацию
- про accessibility
| - создаёте селекторы специально для тестирования; | ||
| - нужна стабильность селекторов независимо от изменений UI/стилей; | ||
| - работаете в команде, где дизайнеры часто меняют классы и структуру; | ||
| - хотите явно пометить элементы, доступные для тестирования; |
There was a problem hiding this comment.
я бы убрал последние два пункта
| - работаете с базовой HTML-структурой (`form`, `table`, `ul`); | ||
| - проводите accessibility-аудит (проверка всех `img` на наличие `alt`). | ||
|
|
||
| ### React селекторы |
There was a problem hiding this comment.
думаю, это тоже стоит убрать, редко используется и весьма хрупко
|
|
||
| ## Testing-library | ||
|
|
||
| Testing Library — это адаптер популярной философии Testing Library для Testplane. Она предоставляет селекторы, ориентированные на пользовательский опыт (как пользователи находят элементы). |
There was a problem hiding this comment.
Я бы написал так: Testing Library позволяет искать элементы так, как их ищут на странице пользователи — по тексту, типу элемента или другим атрибутам, не зависящим от деталей вашей верстки.
| ```javascript | ||
| import { screen } from "@testing-library/dom"; | ||
| import userEvent from "@testing-library/user-event"; | ||
|
|
||
| // Поиск кнопки | ||
| const submitButton = screen.getByRole("button", { name: /submit/i }); | ||
| await userEvent.click(submitButton); | ||
|
|
||
| // Поиск текстового поля | ||
| const emailInput = screen.getByRole("textbox", { name: /email/i }); | ||
| await userEvent.type(emailInput, "test@example.com"); | ||
|
|
||
| // Поиск чекбокса | ||
| const agreeCheckbox = screen.getByRole("checkbox", { name: /agree to terms/i }); | ||
| await userEvent.click(agreeCheckbox); | ||
| ``` |
There was a problem hiding this comment.
я бы сильно сократил тут пример, все вызовы однотипные
| await userEvent.click(agreeCheckbox); | ||
| ``` | ||
|
|
||
| Стоит использовать, если: |
There was a problem hiding this comment.
Я бы убрал секции "стоит использовать" из всех запросов testing-library, т.к. они просто дублируют описание по сути.
| # Селекторы | ||
|
|
||
| Testplane предоставляет множество способов для поиска элементов на странице браузера с помощью селекторов. Для этого используются библиотеки `WebDriverIO` и `testing-library`. Селекторы позволяют точно идентифицировать элементы интерфейса, что необходимо для автоматизации тестирования. | ||
|
|
There was a problem hiding this comment.
Думаю, стоит добавить тут раздел лучшие практики, в котором кратко или в виде таблицы написать, какие способы поиска элементов рекомендуются, а какие нет.
Можно посмотреть тут пример: https://webdriver.io/docs/selectors
Вкратце — нужно искать элементы так, как их ищет пользователь глазами. Например, css, xpath — хрупко и плохо (потому что идет завязка на детали реализации верстки), по тексту, по роли и aria — хорошо (потому что именно на них ориентируются реальные пользователи сайта).
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/writing-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx
Outdated
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx
Show resolved
Hide resolved
i18n/ru/docusaurus-plugin-content-docs/current/quickstart/running-tests.mdx
Outdated
Show resolved
Hide resolved
shadowusr
left a comment
shadowusr
left a comment
There was a problem hiding this comment.
Статья почти готова к публикации. Что осталось:
- Поправить минорные замечания
- Убрать все лишние файлы (по сути все файлы, кроме
i18n/ru/docusaurus-plugin-content-docs/current/basic-guides/selectors.mdx) - Добавить английскую версию статьи
- Поправить ошибки сборки/линтера (проверить с помощью
npm run build, реформат —npm run reformat)
|
|
||
| | Селектор / Способ выбора | Рекомендация | Примечания | | ||
| | --- | --- | --- | | ||
| | По классу (например, `.btn`) | 🚨 Никогда | Сильно завязан на стили и структуру CSS. Классы часто меняются при редизайне, что ломает тесты. Не отражает семантику элемента. | |
There was a problem hiding this comment.
Это я бы поставил в категорию "редко".
Сами категории я бы назвал "хорошо", "редко", "❌ Плохо". А то если прям "никогда" — зачем мы это пишем =)
| | По ID (например, `#main`) | ⚠️ Редко | ID стабильнее классов, но все равно может зависеть от JS‑логики или изменений в разметке. Используйте, только если ID гарантированно устойчив. | | ||
| | По типу атрибута (например, `input[type="text"]`) | ⚠️ Редко | Работает, если тип атрибута семантически значим и стабилен. Но может быть слишком общим (много элементов одного типа). | | ||
| | CSS‑селекторы по атрибуту `data-testid` (например, `[data-testid="submit"]`) | ✅ Всегда | Лучший выбор для тестов. Атрибут `data-testid` создан специально для автоматизации: не влияет на стили/доступность, стабилен, явно обозначает цель элемента. | | ||
| | По тексту элемента (например, `:text("Отправить")`) | ✅ Хорошо | Отражает пользовательское взаимодействие. Но требует внимания к переводам и динамическому контенту. Используйте файлы локалей, чтобы тесты не ломались при смене текста. | |
There was a problem hiding this comment.
Селектора :text нет. Тут надо указать либо webdriverio-стиль, а это *=Отправить, либо testing-library getByText('Отправить')
| | Селектор / Способ выбора | Рекомендация | Примечания | | ||
| | --- | --- | --- | | ||
| | По классу (например, `.btn`) | 🚨 Никогда | Сильно завязан на стили и структуру CSS. Классы часто меняются при редизайне, что ломает тесты. Не отражает семантику элемента. | | ||
| | По ID (например, `#main`) | ⚠️ Редко | ID стабильнее классов, но все равно может зависеть от JS‑логики или изменений в разметке. Используйте, только если ID гарантированно устойчив. | |
There was a problem hiding this comment.
В примечании я бы написал "Не связан с поведением пользователя и не отражает семантику, но чаще всего стабилен."
3 participants
No description provided.