Question

如何在模板测试中检查哪个元素具有焦点？我不能像平常那样使用document.activeElement，因为它总是返回undefined ...

Answer 1

模板组件默认情况下使用Shadow DOM，这意味着如果Shadow DOM中的某些元素成为焦点，则无法通过常规的document.activeElement属性来获取它。另一方面，Shadow DOM主机元素也包含activeElement属性（该主机元素作为不同的文档处理）。您可以在测试中使用主机的activeElement属性，该属性应将焦点元素保存在Shadow DOM中。您可以在MDN中了解该属性。在我的一些项目中，当某个元素获得焦点时，我向该元素添加了一个类，该类可帮助我以后查询它并添加焦点样式。这是查找焦点元素的另一种方法（查询类）。

Answer 2

我遇到了同样的问题，并同意吉尔·芬克（Gil Fink）的观点，似乎在模板还原木偶的抽象中就没有了。

我已经通过检查active element of my components shadow root的id是否与我希望重点关注的元素的id相同来解决此问题。我使用Puppetteers page.$eval(...)检索了活动元素的ID，例如：

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);

这适用于我的情况，希望对您也有帮助。

Answer 3

我最终做了：

const activeElId = await page.evaluate(() => document.activeElement!.id);

在Stencil组件的端到端测试中找到关注的元素

3 个答案: