Трафарет js E2E Тестирование: как найти ребенка от ребенка в Доме Теней - PullRequest
Новая
       18

Трафарет js E2E Тестирование: как найти ребенка от ребенка в Доме Теней

1 голос
/ 22 марта 2020

У меня есть компоненты, расположенные так: 

app-home
  shadow-root
    component1
      shadow-root
        div id=div1

Другими словами, у моего app-home и component1 есть теневые doms.

Я легко могу найти component1 в Stencil js E2E Тесты примерно так: 

const page = await newE2EPage();
await page.setContent('<app-home></app-home>');
const component1 = await page.find('app-home >>> component1');

Но, что бы я ни пытался, я не могу получить # div1 внутри component1. Важно, чтобы я вернул элемент E2EE, чтобы я мог использовать его методы, такие как щелчок, который вызывает изменения на странице.

Вот что я пробовал:

  1. page .find ('app-home >>> component1 >>> # div1')

    Возвращает ноль

  2. component1.find (': host >>> # div1 ') или component1.find (': root >>> # div1 '), или component1.find (' >>> # div1 '), или component1.find (' # div1 '), или component1.find (' component1> >> # div1 ')

    Возвращает ноль

  3. component1.shadow Root .querySelector (' # div1 ')

    Этот метод получает элемент, но нажатие на него или отправка события на него не влияет на приложение- root или component1 на странице.

Любые предложения о том, как найти ребенка от ребенка когда у обоих элементов есть тени?

1 Ответ

1 голос
/ 23 марта 2020

Примечание. Я предполагаю, что component1 на самом деле является действительным именем тега пользовательского элемента (содержащим da sh). 

page.find('app-home >>> component1 >>> #div1')

Использование >>> несколько раз в настоящее время невозможно (см. source ). >>> не является официальным селектором CSS, поэтому его реализация полностью зависит от трафарета. js. 

component1.find(':host >>> #div1')

Этот или ваши аналогичные подходы также невозможны, так как вызов .find в E2EElement можно найти только элементы, являющиеся дочерними элементами этого элемента, но не сам элемент хоста.

Одно из решений - полностью перейти в контекст браузера: 

await page.evaluate(() => {
  // this function will run in the browser context, not
  // in the Node.js context that the test is executed in.
  const appHome = document.querySelector('app-home');
  const comp1 = appHome.shadowRoot.querySelector('component1');
  const div1 = comp1.shadowRoot.querySelector('#div1');

  div1.click();
});

await page.waitForChanges();

Вы можете преобразовать это в помощника, однако я согласен, что было бы хорошо, если бы Stencil. js предоставил для этого надлежащий API. Разрешить многократное использование селектора >>> было бы неплохо. Я предлагаю вам открыть запрос функции в репозитории Stencil. js.

...