TestCafe : #shadow-root component on the webpage is not loading

Question

We have a web component under #shadow-root that i want to test using testcafe . But when i try to load the page from the testcafe script, page loads but only #shadow-root component is not loading and any assertion to verify the existence of those elements fails.

Console error shows " hammerhead.js: Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'hammerhead|element-processed' is not a valid attribute name."

Anyone knows how to enable the loading of #shadow-root components on the webpage using testcafe ?

score 2 · Answer 1 · answered Nov 10 '22 at 08:59

It works fine with this example:

import { Selector } from 'testcafe';

fixture`Selector.shadowRoot`
    .page`https://devexpress.github.io/testcafe/example/`;

test('Get text within shadow tree', async t => {
    const shadowRoot = Selector('div').withAttribute('id', 'shadow-host').shadowRoot();
    const paragraph  = shadowRoot.child('p');

    await t.expect(paragraph.textContent).eql('This paragraph is in the shadow tree');

    await t.eval(() => {
        paragraph().style.display = 'block';
    }, {
      dependencies: { paragraph }
    })

    await t.click(paragraph);
});

Refer to the following thread to see how to work with shadowRoot in TestCafe: https://testcafe.io/documentation/402829/guides/basic-guides/element-selectors?search#access-the-shadow-dom.

If this doesn't help, please share a simple sample based on the following template: https://github.com/DevExpress/testcafe/issues/new?assignees=&labels=TYPE%3A+bug&template=bug_report.yaml.

TestCafe : #shadow-root component on the webpage is not loading

1 Answers1