Skip to content

docs: selectors#113

Open
Nikolaengel wants to merge 14 commits intogemini-testing:masterfrom
Nikolaengel:testplane-newdocs
Open

docs: selectors#113
Nikolaengel wants to merge 14 commits intogemini-testing:masterfrom
Nikolaengel:testplane-newdocs

Conversation

@Nikolaengel
Copy link

No description provided.

Copy link
Author

@Nikolaengel Nikolaengel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs: quickstart-fix

Copy link
Author

@Nikolaengel Nikolaengel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs: writingtests-fix

Copy link
Member

@shadowusr shadowusr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В целом получилось очень прикольно! 🔥
Есть замечания по ряду мелочей.

Важно — предлагаю в рамках этого PR вливать именно статью про селекторы. Про quickstart давай вынесем в отдельный PR, так будет проще работать и ревьювить.

@@ -0,0 +1,602 @@
# Селекторы

Testplane предоставляет множество способов для поиска элементов на странице браузера с помощью селекторов. Для этого используются библиотеки `WebDriverIO` и `testing-library`. Селекторы позволяют точно идентифицировать элементы интерфейса, что необходимо для автоматизации тестирования.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно оставить:

Testplane предоставляет множество способов для поиска элементов на странице браузера.

Остальная часть не совсем корректная


## WebDriverIO

WebDriverIO — это Node.js-библиотека для автоматизации браузеров, которая реализует протокол WebDriver (W3C стандарт) В Testplane она используется для управления браузерами и взаимодействия с веб-элементами.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В Testplane поддержан поиск элементов, совместимый с синтаксисом WebdriverIO: по CSS селекторам, по XPath, по тексту элементов и по другим признакам, которые описаны ниже.

Текущий текст не имеет отношения к селекторам, а дает слишком общую информацию


Стоит использовать, если:

- вы работаете с критически важными элементами (формы, модальные окна, главные контейнеры);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

я бы убрал пункты про критически важный элемент и производительность. можно добавить опять же что это быстрый и простой способ

- вы тестируете формы и валидацию;
- нужно работать с семантическими HTML5 типами (`email`, `tel`, `url`, `date`);
- вам нужно убедиться, что используется правильный тип поля для `accessibility`;
- вы тестируете различное поведение для разных типов полей.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

я бы убрал:

  • вы тестируете различное поведение для разных типов полей.
  • вы тестируете форму и валидацию
  • про accessibility

- создаёте селекторы специально для тестирования;
- нужна стабильность селекторов независимо от изменений UI/стилей;
- работаете в команде, где дизайнеры часто меняют классы и структуру;
- хотите явно пометить элементы, доступные для тестирования;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

я бы убрал последние два пункта

- работаете с базовой HTML-структурой (`form`, `table`, `ul`);
- проводите accessibility-аудит (проверка всех `img` на наличие `alt`).

### React селекторы
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

думаю, это тоже стоит убрать, редко используется и весьма хрупко


## Testing-library

Testing Library — это адаптер популярной философии Testing Library для Testplane. Она предоставляет селекторы, ориентированные на пользовательский опыт (как пользователи находят элементы).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я бы написал так: Testing Library позволяет искать элементы так, как их ищут на странице пользователи — по тексту, типу элемента или другим атрибутам, не зависящим от деталей вашей верстки.

Comment on lines +435 to +450
```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);
```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

я бы сильно сократил тут пример, все вызовы однотипные

await userEvent.click(agreeCheckbox);
```

Стоит использовать, если:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я бы убрал секции "стоит использовать" из всех запросов testing-library, т.к. они просто дублируют описание по сути.

# Селекторы

Testplane предоставляет множество способов для поиска элементов на странице браузера с помощью селекторов. Для этого используются библиотеки `WebDriverIO` и `testing-library`. Селекторы позволяют точно идентифицировать элементы интерфейса, что необходимо для автоматизации тестирования.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Думаю, стоит добавить тут раздел лучшие практики, в котором кратко или в виде таблицы написать, какие способы поиска элементов рекомендуются, а какие нет.

Можно посмотреть тут пример: https://webdriver.io/docs/selectors

Вкратце — нужно искать элементы так, как их ищет пользователь глазами. Например, css, xpath — хрупко и плохо (потому что идет завязка на детали реализации верстки), по тексту, по роли и aria — хорошо (потому что именно на них ориентируются реальные пользователи сайта).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants