Атрибут data html: Атрибут data-* | htmlbook.ru

<div data-id="1234567890" 
       data-user="Вася Тёркин" 
       data-date-of-birth="01.07.1990">Пользователь</div>

Спецификации

Поддержка браузерами

Учебник HTML

HTML уроки: HTML Атрибуты

Настройка отслеживания значений data-атрибутов с помощью GTM

data-атрибуты хранят в себе различные данные элемента. Их может быть любое количество. Начинаются со слова data- и заканчиваться могут чем угодно, на вкус разработчика. Могут присутствовать во многих HTML-тегах: div, span, a и т.д. По спецификации, допускаются только символы нижнего регистра и тире. Например, data-id, data-name, data-item-id, data-article-title, data-product-name и т.п., как душе угодно.

В данной статье разберёмся, как отслеживать значения data-атрибутов с помощью Google Tag Manager и отправлять эти данные в виде событий в системы аналитики.

Для начала необходимо убедиться, что в исходном коде сайта присутствует код ГТМ. Иначе ничего не получится.

В этом примере будем отслеживать атрибут data-item-id, который прописан в ссылке (в теге a). Это будет id товара в интернет-магазине. При клике на кнопку Купить он будет передавать данные в Google Tag Manager.

Переходим в ГТМ в Переменные и создадим там пользовательскую переменную с именем aev — data-item-id. Выберем тип переменной — Переменная автоматического события

и зададим ей следующие параметры:

• тип переменной — Атрибут элемента
• название атрибута — data-item-id

Затем переходим в Триггеры и создадим триггер с названием click — addToCart

В настройках триггера выберем тип Клик — Все элементы

так как кнопка имеет классы addToCart, product-buy и js-add-to-cart.

После этого переходим в Теги и создадим тег с названием GA — click — addToCart. Выберем тип Google Аналитика — Universal Analytics

и в Конфигурации тега зададим ему следующие параметры:

• тип отслеживания — Событие
• категория — addToCart
• действие — click
• ярлык — product id: {{aev — data-item-id}}
• настройки Google Analytics: {{GA ID}}

и привяжем к нему триггер click — addToCart

Сохраняем и опубликовываем контейнер.

Проверяем:

Сохраняем и опубликовываем контейнер.

Как видно из скриншота выше, тег GA — click — addToCart успешно запустился и передал данные в Google Аналитику

Если необходимо отслеживать несколько data-атрибутов в одном HTML-теге, то создаём переменные аналогично с выше описанными настройками, только с разными данными, и в теге для GA пропишем эти переменные в нужных местах. Главное — чтобы они в нём присутствовали.

Поделиться ссылкой:

javascript — что такое атрибут data-реактид в html?

Пока я просматривал HTML некоторых страниц, я заметил, что некоторые из них используют этот атрибут «data-реакцииtid», например:

 <a data-reactid="......" ></a>

Что это за атрибут и какова его функция?

96

Ayman El Temsahi 11 Июл 2013 в 09:37

5 ответов

Лучший ответ

Атрибут data-reactid является настраиваемым атрибутом, который используется для того, чтобы React мог однозначно идентифицировать свои компоненты в DOM .

Это важно, поскольку приложения React могут отображаться на сервере а> как и клиент. Внутренне React создает представление ссылок на узлы DOM, которые составляют ваше приложение (упрощенная версия приведена ниже).

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

Невозможно обмениваться действительными ссылками на объекты между сервером и клиентом, и отправка сериализованной версии всего дерева компонентов является потенциально дорогостоящей. Когда приложение отображается на сервере и React загружается на клиенте, единственными данными, которые у него есть, являются атрибуты data-reactid.

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

Это должно быть в состоянии преобразовать это обратно в структуру данных выше. Это происходит с помощью уникальных атрибутов data-reactid. Это называется надувать дерево компонентов.

Вы также можете заметить, что если React отрисовывает на стороне клиента, он использует атрибут data-reactid, даже если ему не нужно терять ссылки. В некоторых браузерах он вставляет ваше приложение в DOM с помощью .innerHTML, а затем сразу же раздувает дерево компонентов, что повышает производительность.

Другое интересное отличие заключается в том, что отрендеренные идентификаторы React на стороне клиента будут иметь инкрементный целочисленный формат (например, .0.1.4.3), тогда как для рендеринга на сервере будет добавляться случайная строка (например, .loqi70ccu80.1.4.3). Это связано с тем, что приложение может отображаться на нескольких серверах, и важно, чтобы не было коллизий. На стороне клиента существует только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.

React 15 использует вместо него document.createElement, поэтому разметка, представленная клиентом, больше не будет включать эти атрибуты.

128

Fred 18 Мар 2020 в 11:31

Это пользовательский атрибут html, но, вероятно, в этом случае он используется библиотекой Facebook React JS.

Посмотрите: http://facebook.github.io/react/

35

Samuel G. P. 14 Окт 2014 в 16:11

Атрибуты данных обычно используются для различных взаимодействий. Как правило, с помощью JavaScript. Они никак не влияют на поведение сайта и являются удобным способом передачи данных для любых целей. Вот статья, которая может прояснить ситуацию:

http://ejohn.org/blog/html-5-data-attributes/

Вы можете создать атрибут данных, добавив префикс data- к любой стандартной безопасной строке атрибута (буквенно-цифровой без пробелов или специальных символов). Например, data-id или в этом случае data-reactid

3

Kai Qing 11 Июл 2013 в 05:40

Атрибут пользовательских данных в HTML5

Хотелось бы процитировать комментарий Яна в моем ответе:

Это просто атрибут (действительный) элемента, который вы можете использовать для хранения данных / информации о нем.

Затем этот код извлекает его позже в обработчике событий и использует его для поиска целевого выходного элемента. Он эффективно хранит класс div, где его текст должен быть выведен.

reactid — это просто суффикс, здесь вы можете указать любое имя, например: data-Ayman.

Если вы хотите найти разницу, проверьте скрипты в этом ТАКОМ ответе и комментарии.

11

Community 23 Май 2017 в 12:18

Это атрибут данных HTML. Подробнее об этом см .: http://html5doctor.com/html5-custom-data-attributes/

По сути, это просто контейнер ваших пользовательских данных, в то же время делающий HTML верным. Это data- плюс некоторый уникальный идентификатор.

3

Ben Gulapa 11 Июл 2013 в 05:41

Входной и выходной HTML-код на страницах OneNote — Microsoft Graph

• 01.06.2021
• Чтение занимает 13 мин

В этой статье

HTML-код, определяющий содержимое и структуру страницы при создании или обновлении страницы OneNote, называется входным HTML-кодом.

HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом. Выходной HTML-код не совпадает со входным.

API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.

В этой статье описываются основные элементы и атрибуты входного и выходного HTML-кода. Разбираться во входном HTML-коде полезно при создании и обновлении содержимого страницы, а в выходном — при анализе возвращаемого содержимого страницы.

Элемент body

HTML-содержимое в тексте страницы представляет ее содержимое и структуру, в том числе ресурсы изображений и файлов. Входной и выходной HTML-код для элемента body может содержать перечисленные ниже атрибуты.

Входные атрибуты

Выходные атрибуты

Элементы div

Элементы div содержат текст, изображения и другой контент. Входной и выходной HTML-код для элемента div может содержать перечисленные ниже атрибуты.

Входные атрибуты

API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:

• Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.

• Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементы div, img или object без абсолютного положения. В этом случае непосредственные дочерние элементы  div, img или object без абсолютного положения помещаются в элементы div по умолчанию.

Выходные атрибуты

Вспомогательные разделители

Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель. Этот процесс показан в приведенных ниже примерах.

Входной HTML-код

Содержит вспомогательный вложенный разделитель.

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div>
            <p>Some text</p>
            <div>
                <p>More text inside a div that doesn't define page structure</p>
            </div>
        </div>
    </body>
</html>

Выходной HTML-код

Примечание. Содержимое разделителя было перемещено в родительский разделитель, а вложенные теги <div> удалены. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример: <div data-id="keep-me">).

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div data-id="_default">
            <p>Some text</p>
            <p>More text inside a nested div</p>
        </div>
    </body>
</html>

Элементы img

Для представления изображений на страницах OneNote используются элементы img. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.

Входные атрибуты

Примечание. API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном HTML-коде. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.

Выходные атрибуты

Примеры выходного HTML-кода для изображений

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

<img 
    src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-src-type="image/png"
    data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-fullres-src-type="image/png" ... />

В приведенных ниже примерах показаны сведения, которые может содержать элемент img в выходном HTML-коде.

Изображение с ресурсами высокого разрешения для Интернета

<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    [data-render-original-src="{original-source-url-or-named-part}"]
    [data-id="{image-id}"]
    [alt="supplied alt text"]
    [width="345"] [height="180"]
    [style="..."] />

Изображение, созданное с использованием атрибута

<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    data-render-original-src="{original-source-url-or-named-part}"
    [data-id="{image-id}"]
    [data-index="{index-of-split-image}"]
    [data-options="{printout-or-splitimage}"]
    [alt="supplied alt text"]
    [width="1024"] [height="1900"]
    [style="..."] />

Разделенные изображения

Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки. Всем компонентам изображения назначается одно и то же значение data-id. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.

Разделенное изображение с тремя компонентами

<div data-id="multi-component-image">
    <img
        src="{image-resource0-url}/$value"
        data-src-type="image/{type}"
        data-fullres-src="{image-resource0-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="0" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource1-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource1-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="1" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource2-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource2-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="2" 
        data-render-original-src=""{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
</div>

Так как пользователи могут перемещать изображения на странице, индексы могут возвращаться в измененном порядке. Сортировка должна выполняться сверху вниз, а затем слева направо (если возникнут конфликты при вертикальной сортировке).

Элементы iframe

Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.

Примечание. Вы также можете вложить видеофайл с помощью элемента object.

Входные атрибуты

Выходные атрибуты

Пример выходного HTML-кода для видео

Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже.

<iframe 
    
    data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" 
    src="https://www.youtube.com/embed/3Ztr44aKmQ8?feature=oembed&autoplay=true" />

Элементы object

Страницы OneNote могут содержать вложения, представленные элементами object. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.

Примечание. API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src. Пример: <img data-render-src="name:part-name" ... />

Входные атрибуты

Выходные атрибуты

Пример выходных данных HTML для объектов

Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.

<object
    data="https://graph.microsoft.com/v1.0/me/onenote/resources/{file-id}/$value"
    data-attachment="fileName.pdf" 
    type="application/pdf" 
    [style="..."] />

Абзацы и заголовки

Входной и выходной HTML-код для абзацев, заголовков и других текстовых контейнеров может содержать перечисленные ниже атрибуты.

Входные атрибуты

Выходные атрибуты

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей в текстовых контейнерах, и возвращаемый выходной HTML-код.

Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.

<h2>Heading <i>One</i> text</h2>
<p>Some text</p>
<p>Some <span >more</span> text</p>

Выходной HTML-код со стилем знака

<h2>Heading <span>One</span> text</h2>
<p><span>Some text</span></p>
<p>Some <span>more</span> text</p>

Списки

Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li.

Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.

Входные атрибуты

Выходные атрибуты

Стили списков

API OneNote в Microsoft Graph поддерживают следующие стили списков:

Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li.

Однородный стиль списка

В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.

<ol>
    <li>Jacksonville</li>
    <li>Orlando</li>
    <li>Naples</li>
</ol>

Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.

<ol>
    <li><span>Jacksonville</span></li>
    <li><span>Orlando</span></li>
    <li><span>Naples</span></li>
</ol>

Переменные стили списков

В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li.

<ul>
    <li>square style</li>
    <li>circle style</li>
    <li>disc style (default)</li>
</ul>

Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.

<ul>
    <li><span>square style</span></li>
    <li><span>circle style</span></li>
    <li><span>disc style (default)</span></li>
</ul>

таблицы;

Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы.

Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты. API OneNote не поддерживают атрибуты rowspan и colspan.

Входные атрибуты

Примечание: Использование свойства граница в стиле атрибута таблицы не поддерживается в ввода html.

Выходные атрибуты

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей для таблиц, и возвращаемый выходной HTML-код.

Входной HTML-код с необязательными параметрами на разных уровнях.

<table border="1";; bgcolor = "green">
    <tr> 
        <td>Cell 1</td> 
        <td>Cell 2</td> 
        <td>Cell 3</td> 
    </tr> 
    <tr> 
        <td>Left</td> 
        <td>Middle</td> 
        <td>Right</td> 
    </tr> 
</table>

Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Left</td>
        <td>Middle</td>
        <td>Right</td>
    </tr>
</table>

Стили

API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span.

Кроме того, поддерживаются следующие встроенные стили знаков:

Пример входного и выходного HTML-кода

На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph.

Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.

<html lang="en-US">
    <head>
        <title>Sample Study Notes</title>
        <meta name="created" content="2015-01-01T01:01"/>
    </head>
    <body>
        <h2>Aurora Borealis</h2>
        <p>Dancing lights in the sky. Also called <i>Northern Lights</i>. Caused by solar radiation.</p>
        <br />
        <p><b>Intersting facts</b></p>
        <table>
            <tr>
                <td>Neil Armstrong</td>
                <td>Commander</td>
            </tr>
            <tr>
                <td>Buzz Aldrin</td>
                <td>LM Pilot</td>
            </tr>
            <tr>
                <td>Michael Collins</td>
                <td>Command Module Pilot</td>
            </tr>
        </table>
        <img alt="Apollo 11 commemorative stamp." src="https://upload.wikimedia.org/wikipedia/commons/a/a4/First_Man_on_Moon_1969_Issue-10c.jpg" />
        <p>References:</p>
        <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
        <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
    </body>
</html>

Ниже показан выходной HTML-код, который Microsoft Graph возвращает при получении содержимого страницы.

Примечание. При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Sample Study Notes</title>
    </head>
    <body data-absolute-enabled="true">
        <div data-id="_default">
            <h2>American History 101: Moon Landing</h2>
            <p>First moon landing - July 20, 1969 with Apollo 11 (Eagle)</p>
            <br />
            <p><span>Apollo 11 Astronauts</span></p>
            <table>
                <tr>
                    <td>Neil Armstrong</td>
                    <td>Commander</td>
                </tr>
                <tr>
                    <td>Buzz Aldrin</td>
                    <td>LM Pilot</td>
                </tr>
                <tr>
                    <td>Michael Collins</td>
                    <td>Command Module Pilot</td>
                </tr>
            </table>
            <br />
            <img alt="Apollo 11 commemorative stamp." src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value"
                 data-src-type="image/jpeg" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-fullres-src-type="image/jpeg" />
            <p>References:</p>
            <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
            <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
        </div>
    </body>
</html>

См. также

Noveo Блог • DATA-QA. Удобные селекторы для автоматизации UI-тестов

Test Engineer Noveo Юлия рассказывает об удобном и достаточно новом способе идентифицировать элементы на веб-странице при тестировании UI, а именно — об атрибуте data-qa.

Каждый, кто интересуется или непосредственно занимается автоматизацией тестирования UI, знает о том, как порой сложно выбрать подходящий селектор.

Идентификаторы («id»-атрибуты элементов) не всегда присутствуют в коде страницы, а порой бывают сложночитаемыми (т.е. написанными не на «человечески понятном» языке), или даже динамическими, и не пригодными к использованию в качестве селекторов.

Xpath и CSS селекторы используются достаточно часто, но в этом случае при изменении структуры документа или таблицы стилей селектор может стать устаревшим и, соответственно, неработающим. Также такие селекторы порой получаются достаточно длинными, а оптимизировать их длину не всегда возможно.

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

В HTML5 появилась новая возможность: data-* атрибуты. Это универсальный атрибут, который можно добавить для любого элемента (тега) на странице. Он позволяет создавать кастомные атрибуты для хранения каких-либо значений. Главные правила: название атрибута всегда должно начинаться с «data-», а также могут использоваться только латинские буквы, дефис, двоеточие и подчеркивание.

Если такой атрибут используется для автоматизации тестирования, самыми логичными вариантами выглядят «data-qa» или «data-test», но можно использовать любые другие наименования. В тексте этой статьи атрибут носит название «data-qa», но на практике оно может быть любым другим по усмотрению.

Data-qa-атрибут можно впоследствии использовать в качестве селектора. Для этого нужно, чтобы в коде страницы для каждого элемента/тега, который будет или с большой вероятностью может быть использован в автотестах, был добавлен этот атрибут.

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

Кроме того, атрибут data-qa присваивается элементу один раз и обычно не нуждается в каких-либо модификациях и изменениях. Соответственно, пока элемент находится на веб-странице, атрибут data-qa этого элемента всегда будет присутствовать в коде страницы, неизменный, а значит, ссылка на элемент тоже будет постоянной. Стабильность!

Безусловно, составление списка этих атрибутов, определение, каким элементам он должен быть присвоен, фиксирование всего в документации — это задача специалиста по тестированию. А добавление этого атрибута в код для всех нужных элементов — задача разработчика. Соответственно, это дополнительная нагрузка для обоих. Поэтому нужно учитывать, насколько широко автоматизация тестирования UI будет использоваться на проекте и будет ли это целесообразно в плане трудозатрат.

Если принято решение внедрить использование атрибутов data-qa на проекте, то это, конечно, лучше делать как можно раньше. Хороший воркфлоу можно описать таким образом:

1. Тестирование документации, исправление ошибок;
2. Тестирование файлов дизайна (мокапов), исправление ошибок;
3. Определение элементов, которые будут использоваться для последующей автоматизации тестирования;
4. Определение наименований атрибутов data-qa для этих элементов, фиксирование в документации;
5. Разработка задачи и добавление атрибутов data-qa для элементов в коде страницы;
6. Тестирование задачи, тестирование наличия атрибутов data-qa.

Теперь посмотрим, как могут выглядеть сами атрибуты data-qa.

На мой взгляд, имеет смысл ввести два базовых правила:

• все атрибуты должны иметь схожую структуру;
• если элементы имеют какие-то общие признаки (например, расположены на одной странице или являются элементами одного типа, как «поле ввода» или «кнопка»), эти признаки должны быть отражены в тексте атрибута data-qa.

Например, в общем виде атрибут может выглядеть как:

<название страницы>_<название элемента>

Например:

HOME_TITLE

Где HOME — название страницы («главная страница»), TITLE — заголовок страницы. Или

SETTINGS_PASSWORD_CHANGE_INPUT

Где SETTINGS — название страницы («настройки»), PASSWORD_CHANGE — форма смены пароля, INPUT — указание на поле ввода

Теперь на примере нескольких страниц абстрактного веб-проекта посмотрим, как это будет выглядеть.

Начнем с самого первого и базового, что обычно тестируется, — страницы авторизации.

Здесь:

[0] = LOGIN_FORM_PAGE — сама страница авторизации (LOGIN_FORM) и указание на то, что это целая веб-страница (PAGE).

[1] = LOGIN_FORM_TITLE — заголовок, наследует название страницы, на которой расположен (LOGIN_FORM), и т.к. заголовок на странице один, имеет универсальное обозначение (TITLE).

[2] = LOGIN_FORM_LOGIN_INPUT — текстовое поле ввода логина (LOGIN_INPUT).

[3] = LOGIN_FORM_PASSWORD_INPUT — текстовое поле ввода пароля (PASSWORD_INPUT).

[4] = LOGIN_FORM_LOGIN_INPUT_ALERT_MESSAGE  — информационное сообщение (ALERT_MESSAGE), которое содержит информацию о поле ввода логина (LOGIN_INPUT).

[5] = LOGIN_FORM_PASSWORD_INPUT_ALERT_MESSAGE — информационное сообщение (ALERT_MESSAGE), которое содержит информацию о поле ввода логина (LOGIN_PASSWORD).

[6] = LOGIN_FORM_SUBMIT — кнопка подтверждения входа (SUBMIT).

[7] = LOGIN_FORM_BADGE_SCAN_GOTO — переход на страницу сканирования бейджа (BADGE_SCAN). Т.к. после нажатия этой кнопки пользователь попадает на другую страницу/форму, атрибут имеет обозначение GOTO.

Теперь рассмотрим абстрактную страницу корзины интернет-магазина.

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

Data-qa можно разместить следующим образом:

[0] = BASKET_PAGE — непосредственно страница (PAGE) корзины (BASKET).

[1] = BASKET_RETURN_BACK — кнопка возвращения на предыдущую страницу. Так как предыдущая страница может быть не всегда одной и той же, обозначить эту кнопку имеет смысл просто как RETURN_BACK.

[2] = BASKET_IN_STOCK_GOTO — переход на вкладку (GOTO) с товарами в наличии (IN_STOCK).

[3] = BASKET_OUT_STOCK_GOTO — переход на вкладку (GOTO) с товарами не в наличии (OUT_STOCK).

[4] = BASKET_SEARCH_INPUT — текстовое поле (INPUT) для ввода поискового запроса (SEARCH).

[5] = BASKET_SEARCH_CLEAR_INPUT — кнопка очистки (CLEAR_INPUT) текстового поля поиска (SEARCH).

[6] = BASKET_QUANTITY_TITLE — заголовок (TITLE) столбца, в котором отображается количество товаров одного типа (QUANTITY).

[7] = BASKET_NAME_TITLE — заголовок столбца, в котором отображается название товара (NAME).

[8] = BASKET_DESCRIPTION_TITLE — заголовок столбца, в котором отображается краткое описание товара (DESCRIPTION).

[9] = BASKET_UNIT_PRICE_TITLE — заголовок столбца, в котором отображается цена за единицу товара (UNIT_PRICE).

[10] = BASKET_TOTAL_PRICE_TITLE — заголовок столбца, в котором отображается цена за все товары одного типа (TOTAL_PRICE).

[11] = BASKET_NO_RESULTS_ALERT_MESSAGE — предупреждающее сообщение (ALERT_MESSAGE), содержащее информацию об отсутствии соответствующих поисковому запросу товаров.

[12] = BASKET_TOTAL_PRICE — нередактируемое текстовое поле с общей стоимостью (TOTAL_PRICE) всего заказа.

[13] = BASKET_ORDER_DELETE_SUBMIT — кнопка подтверждения (SUBMIT) удаления заказа (ORDER_DELETE).

[14] = BASKET_ORDER_PAY_SUBMIT — кнопка подтверждения (SUBMIT) оплаты заказа (ORDER_PAY).

И, наконец, рассмотрим ту же страницу, только с пустой поисковой строкой и одним товаром в корзине.

В данном случае многие элементы точно те же, что и на предыдущем изображении, поэтому заново их можно не размечать, data-qa будут такими же.

Здесь:

[1] = BASKET_PRODUCT_DECREASE_QUANTITY_{ID} — кнопка уменьшения (DECREASE) количества (QUANTITY) конкретного товара (PRODUCT). Идентификатор ID нужен для указания на конкретную строку таблицы (конкретный товар).

[2] = BASKET_PRODUCT_QUANTITY_{ID} — нередактируемое текстовое поле для отображения количества (QUANTITY) конкретного товара (PRODUCT).

[3] = BASKET_PRODUCT_INCREASE_QUANTITY_{ID} — кнопка увеличения (INCREASE) количества конкретного товара.

[4] = BASKET_PRODUCT_NAME_{ID} — нередактируемое текстовое поле для отображения названия товара (NAME).

[5] = BASKET_PRODUCT_DESCRIPTION_{ID} — нередактируемое текстовое поле для отображения краткого описания товара (DESCRIPTION).

[6] = BASKET_PRODUCT_UNIT_PRICE_{ID} — нередактируемое текстовое поле для отображения цены за единицу товара (UNIT_PRICE).

[7] = BASKET_PRODUCT_TOTAL_PRICE_{ID} — нередактируемое текстовое поле для отображения цены за все товары одного типа (TOTAL_PRICE).

[8] = BASKET_PRODUCT_DELETE_{ID} — кнопка удаления товара из корзины (DELETE).

[9] = BASKET_PRODUCT_{ID} — строка товара целиком без указания на конкретный столбец.

Как можно хранить документацию для атрибутов data-qa? В любом удобном виде. В качестве примера приведем таблицу:

На этом всё. Надеемся, что эта информация окажется полезной. Спасибо за прочтение!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Использование атрибутов данных — Изучение веб-разработки

HTML5 разработан с учетом возможности расширения для данных, которые должны быть связаны с конкретным элементом, но не должны иметь какое-либо определенное значение. Атрибуты data- * позволяют нам хранить дополнительную информацию о стандартных, семантических элементах HTML без других взломов, таких как нестандартные атрибуты или дополнительные свойства в DOM.

Синтаксис простой. Любой атрибут любого элемента, имя атрибута которого начинается с data- , является атрибутом данных.Допустим, у вас есть статья, и вы хотите сохранить дополнительную информацию, не имеющую визуального представления. Просто используйте для этого атрибутов данных :

  <статья
 
  столбцы данных = "3"
  номер-индекса-данных = "12314"
  data-parent = "cars">
...