Web 组件测试器：访问 DOM答案

【问题标题】：Web Component Tester: Accessing the DOMWeb 组件测试器：访问 DOM
【发布时间】：2016-10-26 13:35:30
【问题描述】：

我有数百个 Polymer 测试套件。在每次测试结束时，我想访问 DOM 以进行一些自定义质量检查。

写一个 wct 插件有用吗？如果是这样，我应该如何从插件中访问 DOM？

提前致谢！

【问题讨论】：

【解决方案1】：

无需插件。您已经可以使用本机 DOM API（例如，el.querySelector()）或 Polymer 实例方法（例如，el.$$() 或 el.getEffectiveChildren()）访问测试夹具的 DOM。我在 Chrome 53 和 56 上使用 Shady 和 Shadow DOM 验证了这一点。

此示例向afterEach() 添加了几个与 DOM 相关的断言，它们在每次测试后运行：

<test-fixture id="basic">
  <template>
    <my-app></my-app>
  </template>
</test-fixture>

<script>
  describe('my-app', function() {
    var el;

    beforeEach(function() {
      el = fixture('basic');
    });

    afterEach(function() {
      expect(el.$$('h2').textContent).to.have.string('Hello');
      expect(el.querySelectorAll('*')).to.have.lengthOf(2);
    });

    it('instantiating the el works', function() {
      expect(el.is).to.equal('my-app');
    });
  });
</script>

【讨论】：

有没有办法将此 afterEach 全局应用于我的所有测试套件？我有数百个。手动调整每一个是没有效率的。
您可以在describe() 周围添加一个具有afterEach() 的包装器，并将您的测试文件引用替换为describe() 与您的包装器。您应该将其作为mocha 的新问题提出，以获得明确的答案。