웹 컴포넌트 테스터 : DOM에 액세스

Question

나는 수백 가지의 폴리머 테스트 스위트를 가지고 있습니다. 각 테스트가 끝나면 사용자 정의 품질 검사를 수행하기 위해 DOM에 액세스하고 싶습니다.

wct 플러그인을 작성 하시겠습니까? 그렇다면 어떻게 플러그인 내에서 DOM에 액세스해야합니까?

미리 감사드립니다.

Answer 1

플러그인이 필요하지 않습니다. 네이티브 DOM API (예 : el.querySelector()) 또는 Polymer 인스턴스 메소드 (예 : el.$$() 또는 el.getEffectiveChildren())를 사용하여 테스트 픽스처의 DOM에 액세스 할 수 있습니다. 나는 크롬 53 그늘과 그림자 DOM의와 함께이 문제를 확인하고 56

이 예제는 모든 테스트 후 실행되는, afterEach()에 몇 DOM 관련 주장을 추가 :이 afterEach을 적용 할 수있는 방법이 있나요

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