Мы собираемся использовать специальный тег data-test для целей интеграционного тестирования, особенно в бизнес-целях.

Что это за тег?

Давайте посмотрим на примере:

<button data-test="logout">Logout<button>

Использование довольно простое, просто примените тег data-test к любому элементу DOM, который вы хотите.

Зачем нам еще один тег? У нас есть id, class, role и другие?

Бизнес-семантика

Наш инженер по тестированию сказал мне, что тег введен для семантической цели, однако в конце разговора я почти уверен, что его семантика не совсем соответствует тому, что я понимаю под семантикой DOM. Выслушаем его версию.

Пока на экране есть кнопка выхода, добавление ключа logout должно дать нам возможность постоянно находить ее. Более того, если разработчик решит использовать вместо него div:

<div data-test="logout">Logout</div>

Мы все еще должны быть в состоянии найти его, так как тест был закодирован тегом data-test вместо типа элемента. Конечно, этот тег data-test согласован командой; потому что мы также можем использовать id или class для этого примера.

Можем ли мы однозначно определить элемент с помощью data-test? Ответ - нет. Не только не можем, но и не в этом цель. Давайте взглянем на таблицу, чтобы лучше понять этот тег:

<table data-test="personList">
  <tr data-test="person">
    <td data-test="firstName">
    ...
    </td>
  </tr>
</table>

Чтобы найти имя первого человека в таблице, мы найдем «personList», а затем посмотрим на первого «человека», а затем первый столбец «firstName» — это тот, который мы ищем.

Обратите внимание, что в предложении нет слов-элементов, таких как table`, tr и td; и не включает семантические слова таблицы, такие как row и column ; вместо этого использовались person и firstName, а также personList.

Найдите список людей, найдите первого человека и найдите его имя.

Теперь совершенно очевидно, что data-test создано не для уникальности, а больше похоже на то, что такое role.

Теперь о преимуществах, если мы изменим реализацию таблицы на список:

<ul data-test="personList">
  <li data-test="item">
    <span data-test="firstName">
    ...
    </span>
  </li>
</li>

Тест может работать без особых изменений, если таковые имеются. Потому что мы все еще хотим «найти личный список, получить первого человека и найти его имя». Думаю, я могу заключить, что это то, что он имел в виду под бизнес-семантикой.

Краткое содержание

Тег data-test введен для тестирования бизнес-семантики. Это потенциально может сделать тестирование более продуктивным, особенно когда проект становится больше.