Conversation
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 — хорошо (потому что именно на них ориентируются реальные пользователи сайта).
No description provided.