.parent(cssSelector) return empty when using within shadow DOM

What is your Scenario?

I’m trying to filter the parents of a node with tag div by using .parent('div')

What is the Current behavior?

No elements has been returned

What is the Expected behavior?

Some elements must be returned like the way it behaves when using with light DOM

What is your public website URL? (or attach your complete example)

https://jsfiddle.net/fc067gv1/7/

What is your TestCafe test code?

index.js

const { Selector } = require("testcafe");

fixture`Shadow DOM Example`.page`https://jsfiddle.net/fc067gv1/7/`;

test.timeouts({ pageLoadTimeout: 30000, pageRequestTimeout: 30000 })(
  "Filter parent with css selector when using shadow DOM",
  async (t) => {
    const outputIframe = Selector("iframe").withAttribute("name", "result");
    const host = Selector(() => document.querySelector("#host"));
    const shadow = host.shadowRoot();

    const type = shadow.find("span").withText("Salary");
    const container = type.parent("div");

    await t
      .wait(5000)
      .switchToIframe(outputIframe)
      .expect(type.exists)
      .ok()
      .expect(container.exists)
      .ok(); // This will fail
  }
);

test("Filter parent with css select when using light DOM", async (t) => {
  const outputIframe = Selector("iframe").withAttribute("name", "result");
  const host = Selector(() => document.querySelector("#host2"));

  const type = host.find("span").withText("Salary");
  const container = type.parent("div");

  await t
    .wait(5000)
    .switchToIframe(outputIframe)
    .expect(type.exists)
    .ok()
    .expect(container.exists)
    .ok();
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Run the test code

TestCafe version

1.17.0

Node.js version

v16.13.0

Command-line arguments

testcafe chrome index.js

Browser name(s) and version(s)

Chrome 95.0.4638.69

Platform(s) and version(s)

macOS 11.6

Other

No response

[dositec]

Hello, Thank you for notifying us about the issue. We reproduced it.

Currently, I can recommend performing the following actions as a workaround: replace this row: const container = type.parent("div");

with the following row: const container = type.parent(node => node.tagName === 'DIV');

We will try to fix the issue as soon as possible. Once we make progress, we will let you know.

[github-actions[bot]]

We’re closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.