CODEWITHSUNDEEP
puppeteerweb-componentstenciljse2e
dejansavic
dejansavic

Reputation: 1

Stenciljs e2e test doesn't work for no apparent reason

Line within render() :

<div class={{ 'modal-backdrop show': this.show, 'modal-backdrop hide': !this.show }}>

Test :

it('should display correctly', async () => {
    const page = await newE2EPage();
    await page.setContent('<my-component></my-component>');

    let element = await page.find('my-component');
    expect(element).not.toBeNull();

    element = await page.find('div.modal-backdrop.hide');
    expect(element).not.toBeNull();
  });

Description of the issue: I have provided only a part of the code and unfortunately I cannot provide much more due to confidentiality. However I will do my best to describe the issue. There are two components in the project, tests for component A work as they should. Tests for component B (provided above) do not. While the first expect passes, the second one fails due to it being null but it shouldn't.

A few facts:

  1. The project can be built, run and used without a problem.
  2. Unit tests work as intended, including tests for the render() method.
  3. The code in it-self is not wrong, I have tested, retested and tested again and it works for other components but not for this one.
  4. Although the default is .hide, I have tried with both .hide and .show, neither work.

Best guess so far: I have had many issues getting the tests to work due to how the code is written. While running tests many objects where undefined and that was causing the tests to fail. From everything that I tried and tested my best theory is that for some reason this component half fails in the context of the puppeteer browser, making the core object but nothing else. I don't know if that is possible but it looks like that.

Upvotes: 0

Views: 1503

Answers (1)

connexo
connexo

Reputation: 56823

Web components use their own document tree called shadowDOM, which isn't visible from the main DOM (page); thus your page.find fails. This concept is called encapsulation. Btw, I wasn't able to find a method called find on the page object in Puppeteer's documentation; can you explain where it comes from?

To access the shadow tree inside a web component, you'll have to access it using element.shadowRoot:

element = await page.find('my-component');
expect(element.shadowRoot.querySelector('div.modal-backdrop.hide')).not.toBeNull();

There's puppeteer addons and applications which can help with that:

To find more, check https://www.google.com/search?q=puppeteer+shadow+DOM.

Upvotes: 2

Related Questions