Web Component Tester: Accessing the DOM

Question

I have hundreds of Polymer test suites. At the end of each test, I'd like to access the DOM to do some custom quality checks.

Would writing a wct plugin work? If so, how should I access the DOM from within a plugin?

Thanks in advance!

Answer 1

No plugin necessary. You could already access the DOM of the test fixture with the native DOM APIs (e.g., el.querySelector()) or with Polymer instance methods (e.g., el.$$() or el.getEffectiveChildren()). I verified this with Shady and Shadow DOMs on Chrome 53 and 56.

This example adds a couple DOM-related assertions to afterEach(), which runs after every test:

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