CODEWITHSUNDEEP
polymerweb-component-tester
x74x61
x74x61

Reputation: 433

Web Component Tester: Accessing the DOM

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!

Upvotes: 3

Views: 383

Answers (1)

tony19
tony19

Reputation: 138256

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>

Upvotes: 2

Related Questions