jestjs - 在 Stencil 组件的端到端测试中找到焦点元素

Question

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

Answer 1

Stencil 组件默认使用 Shadow DOM，这意味着如果 Shadow DOM 中的某些元素处于焦点位置，则无法通过正常document.activeElement属性获取它。另一方面，Shadow DOM 宿主元素activeElement也包含一个属性（宿主元素作为不同的文档处理）。您可以在测试中使用主机的activeElement属性，它应该将焦点元素保存在 Shadow DOM 中。您可以在MDN中阅读有关该属性的信息。在我的一些项目中，当一个元素获得焦点时，我会向它添加一个类，以帮助我稍后查询它并添加焦点样式。这是另一种查找焦点元素的方法（查询类）。

Answer 2

我遇到了同样的问题并同意 Gil Fink 的观点，即 Stencil Puppeteer 抽象似乎缺少它。

我通过检查我的组件阴影根的活动元素的 id 是否与我希望获得焦点的元素的 id 相同来解决它。我使用Puppetteerspage.$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);