Блог

Главная - Вопросы по программированию - Локатор транспортира для элементов одного класса

Локатор транспортира для элементов одного класса

#html #css #typescript #protractor

#HTML #css #typescript #транспортир

Вопрос:

Я новичок в тестировании Protractor и E2E и хочу определить, верен ли мой подход к локаторам CSS для идентичных элементов одного класса.

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

 <!DOCTYPE html>
<html>
<body>
  <div>
    <button class="btn1" tooltip="Color">
              <span class="color-indicator" style="background-color: rgb(0, 0, 0);">
    </button>
    <button class="btn1" tooltip="Background Color">
              <span class="color-indicator" style="background-color: rgb(50, 50, 50);">
    </button>
  </div>
  <div>
    <button class="btn1" tooltip="Color">
              <span class="color-indicator" style="background-color: rgb(0, 0, 0);">
    </button>
    <button class="btn1" tooltip="Background Color">
              <span class="color-indicator" style="background-color: rgb(50, 50, 50);">
    </button>
  </div>
</body>
</html>

Мне нужно щелкнуть по каждому элементу button в каждом div . Доступ к кнопкам можно получить с помощью локатора элементов (by.css()), используя их CSS-селекторы (например, «body > div:nth-child(1) > button:nth-child(1)»), но есть ли лучший способ доступа к этим элементам?

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

Спасибо 🙂

Ответ №1:

Если вы знаете точное количество кнопок с одним и тем же классом, вы можете найти их с помощью css selector; в данном случае их 4, так что это будет выглядеть следующим образом:: 

 element.all(by.css('.btn1')).get(0);
element.all(by.css('.btn1')).get(1);
element.all(by.css('.btn1')).get(2);
element.all(by.css('.btn1')).get(3);

Дайте мне знать, если это помогло!

Комментарии:

1. Это кажется более чистым. Спасибо!