Присвоение идентификатора всем элементам страницы в угловом режиме автоматически - PullRequest
Новая
       6

Присвоение идентификатора всем элементам страницы в угловом режиме автоматически

0 голосов
/ 12 июня 2018

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

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

Согласно следующему вопросу, селектор типа body div:nth-of-type(4) ul li:nth-child(5) a для проверки определенной ссылки не только явно уродлив, но и склоненк изменениям в разметке.Небольшое изменение может сломать половину вашего тестового набора. Добавление атрибута ID ко всем элементам HTML веб-приложения?

Мы используем: Angular v6 / Material v2 / Транспортир / Жасмин

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Мы работали над проектом React, для которого мы проводим e2e-тестирование с использованием Mocha-Nightwatch.Как тестер автоматизации пользовательского интерфейса мне нужно было что-то для доступа к элементам, у меня были следующие опции:

1) Использование " CSS-селектора ", что уродливои долго, как вы упомянули.

2) Использование « X-path » элемента, что опять-таки длинный и намного более запутанный

3) Лучшее из всех « Id's » для элементов [потому что они уникальны во всем приложении].Но проблема заключалась в том, что когда мы указали id элемента, веб-пакет React будет добавлять числовую строку альфа к идентификатору каждый раз, когда вы создаете приложение, каждый раз создавая уникальный идентификатор.Итак, снова в этом сценарии произошел сбой идентификатора.

4) Мы остановились на « классах » для элементов, к которым мы хотели получить доступ при тестировании.

Что касается идентификатора или имени класса, для этого существует ярлык no .Вам нужно дать осмысленные имена для идентификаторов / имен классов, какой-то инструмент [который может существовать или не существовать] добавит некоторый случайный идентификатор ко всем элементам, который вообще не нужен, и просто увеличивает пространственную сложность вашего приложения.

Лучшее решение - взять модуль за модулем и добавить имена классов или идентификаторов [id, они не делаются динамическими с помощью Webpack в вашем случае] самостоятельно.

Подход, который мы использовали, мы учили автоматизациипроверено, как добавлять имена классов или идентификаторы, и как проверять в инструментах разработчика Chrome, действительно ли идентификаторы / классы существуют или нет.Но ограничением этого является то, что тестер может добавить некоторые классы или идентификатор, которые могут конфликтовать с вашей функциональностью.Чтобы решить эту проблему, вы можете использовать правильное соглашение об именах, например, мы используем .test-что-то или # test-что-somethig в качестве нашего соглашения для именования идентификаторов и классов тестов.

Вот пример изВаш файл селекторов: 

  usernameInput: '.test--auth-username > input',
  passwordInput: '.test--auth-password > input',
  loginButton: '.test--auth-submit > button',
  loginError: '.test--auth-error',
  inputError: '.test--inputField-errorText',

Надеюсь, это поможет, ура

0 голосов
/ 12 июня 2018

Я не рекомендую присваивать идентификатор каждому элементу на странице.Для автоматизации мы можем использовать CSS Selector и XPath, чтобы найти элемент со страницы, поиск элемента по идентификатору - не единственный способ.

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

Я рекомендую добавить идентификатор ключевого элемента на всей странице, например,у нас есть одна страница, и мы разделяем страницу на 4 области: заголовок, левая боковая панель, стол ученика, нижний колонтитул.Мы можем добавить только идентификатор для элемента контейнера из 4 областей, поэтому нам нужно добавить только 4 идентификатора, а не все элементы.И добавьте атрибут css class name in class для подэлементов.

При вышеупомянутом подходе сценарий автоматизации может использовать цепочку findElement, как показано ниже: 

// find the container element of area firstly
WebElement headArea = driver.findElement(<By.id('id of head area')>);

// find sub element within container element
headArea.findElement(<By.css('css selector of sub element')>);
0 голосов
/ 12 июня 2018

Просто небольшой комментарий, возможно, было бы разумно использовать data-test-id (пользовательский элемент данных) в пользу использования «обычного» html5 ID.это позволяет вам воспользоваться такими плагинами, как: https://github.com/mukeshsoni/babel-plugin-remove-data-test-id-attribute,, которые, в свою очередь, очищают ваш производственный вывод.

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

...