Vaadin TestBench поиск многослойных теневых элементов

Question

У меня вопрос по Vaadin TestBench. Поскольку наш интерфейс написан на Vaadin, мы решили использовать Testbench для тестов пользовательского интерфейса. Мы решили использовать объектную модель страницы для веб-элементов, однако я столкнулся с проблемой, поскольку в проекте присутствуют теневые корневые элементы. На первом слое теневого элемента нет проблем с поиском элемента, однако на нескольких слоях я не могу так легко найти элементы. FE: чтобы найти элемент DOM, мне пришлось использовать JS-скрипт.

      js.executeScript("document.querySelector('#overlay')" +
                ".shadowRoot.querySelector('#content')" +
                ".shadowRoot.querySelector('#confirm')" +
                ".shadowRoot.querySelector('#button')" +
                ".click()");

Поиск таких элементов будет действительно раздражающим, поскольку в DOM есть элементы, которые находятся даже на нескольких слоях. Есть ли хороший способ найти теневые элементы DOM в TestBench? Я ожидал, что TestBench окажется проще, поскольку это инструмент тестирования, разработанный Vaadin.

Answer 1

Допустим, вы ищете сообщение об ошибке проверки Vaadin TextField. Вы можете найти его в теневой DOM vaadin-text-field в части "error-message". Например, учитывая следующий HTML:

      <vaadin-text-field id="fedex" tabindex="2" required="" has-label="" invalid="" has-error-message=""></vaadin-text-field>
  [Shadow Content (open)]
    <div class="vaadin-text-field-container" style="">
      <label part="label" style="" id="vaadin-text-field-label-1">Fedex Tracking #</label>
      <div part="input-field" style="" id="vaadin-text-field-input-1">...</div>
      <div part="helper-text" style="" id="vaadin-text-field-helper-1">...</div>
      <div part="error-message" aria-live="assertive" aria-hidden="false" style="" id="vaadin-text-field-error-1">
        FedEx shipment tracking id is Required
      </div>
    </div>
</vaadin-text-field>

чтобы получить доступ к части "сообщение об ошибке", сначала запросите TextField, а затем запросите его часть "сообщение об ошибке" следующим образом:

      $(TextFieldElement.class).id("fedex")
  .$(DivElement.class)
    .attribute("part", "error-message")
    .first()
    .getText();

Если вам нужно начать запрос исходного элемента в теле страницы, не забудьте использовать «.onPage ()».