Angular 4 单元测试 : de. query(By.css(...)) 与 de.nativeElement.querySelector(...) 的 Native Web API

Question

使用 el = de.query(By.css('h2')).nativeElement; 有什么好处吗？通过 el = de.nativeElement.querySelector('h2'); 的原生元素 API ?它们提供相同的结果。

刚开始使用 Angular 4 单元测试，想知道是否有任何性能差异，或者因为它们完成相同的工作而使用一个而不是另一个的原因。不确定我是否理解使用 By.css(...) 的便利性，或者您可能会使用一种而不是另一种的情况/原因。

Answer 1

使用 By.css 而不是使用 querySelector 和 querySelectorAll 的原因是您的测试可能不是在完整的浏览器中运行，而是在更轻的测试环境中运行。

大型项目通常在 CI 服务器(如 TeamCity 或 Jenkins)上构建和运行测试，CI 服务器可能运行在 headless 云服务器上(即，没有真正的监视器，也没有 GUI)，因此无法运行 Chrome 或Firefox 在内部运行业力测试。

有许多替代方法可以在这样的服务器上运行测试(请参阅此处的列表 https://github.com/dhamaniasad/HeadlessBrowsers)。

虽然其中一些模拟了一个完整的 headless 浏览器(想想 PhantomJS)，但它们在 RAM 和 CPU 方面非常繁重，所以其他一些是轻量级的，但可能不支持带有所有 CSS 选择器的完整 DOM 实现。

使用 By.css，您可以确保您的测试也能在不支持完整 DOM 的平台上运行(并始终如一地运行)。