Найти сфокусированный элемент в сквозном тесте для компонента Stencil
Как я могу проверить, какой элемент имеет фокус в тесте трафарета? Я не могу использовать document.activeElement как я обычно делаю, как всегда возвращается undefined...
3 ответа
Я столкнулся с той же проблемой и согласен с Гилом Финком, что, похоже, она отсутствует в абстракции Stencil Puppeteer.
Я работал над этим, проверяя, что идентификатор активного элемента теневого корня моих компонентов совпадает с идентификатором элемента, который я ожидаю получить в фокусе. Я получил идентификатор активного элемента с помощью Puppetteerspage.$eval(...), например:
const activeElementId = await page.$eval('my-component', (el) => el.shadowRoot.activeElement.id);
const elementThatShouldBeActive = await page.find('my-component >>> #some-id');
expect(activeElementId).toEqual(elementThatShouldBeActive.id);
Это работает для моего контекста, надеюсь, это будет полезно и для вас.
Компоненты трафарета используют Shadow DOM по умолчанию, и это означает, что если какой-то элемент в Shadow DOM находится в фокусе, вы не сможете получить его через обычный document.activeElement имущество. С другой стороны, хост-элемент Shadow DOM включает в себя activeElement свойство (элемент хоста обрабатывается как другой документ). Вы можете использовать хост activeElement свойство в ваших тестах, которое должно содержать сфокусированный элемент внутри Shadow DOM. Вы можете прочитать об этой собственности в MDN. В некоторых из моих проектов, когда элемент получает фокус, я добавляю к нему класс, который помогает мне запрашивать его позже и добавлять стили фокусировки. Это еще один способ найти элементы, которые находятся в фокусе (запрос для класса).
В итоге я сделал:
const activeElId = await page.evaluate(() => document.activeElement!.id);