Skip to content

querying-elements-in-shadow-dom #2893

@aas72

Description

@aas72
The following code:
var browserFetcher = new BrowserFetcher();
await browserFetcher.DownloadAsync();
await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = false });
await using var page = await browser.NewPageAsync();
await page.GoToAsync("https://www.brusselsairlines.com/nl/nl/contact/feedback/general/delays-and-cancellation");
var elementHandle = await page.QuerySelectorAsync("maui-checkbox[name='isRepresentative'] >>> input[name='isRepresentative']");

Throws the following exception from the QuerySelectorAsync function:
PuppeteerSharp.EvaluationFailedException: 'Evaluation failed: SyntaxError: Failed to execute 'querySelector' on 'Document': 'maui-checkbox[name='isRepresentative'] >>> input[name='isRepresentative']' is not a valid selector.

In puppeteer(non-sharp) this works correctly:
https://pptr.dev/guides/page-interactions#querying-elements-in-shadow-dom

Example puppeteer(non-sharp) code:

const puppeteer = require('puppeteer');

function sleep(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto('https://www.brusselsairlines.com/nl/nl/contact/feedback/general/delays-and-cancellation');
    // https://pptr.dev/guides/page-interactions#querying-elements-in-shadow-dom
    var elementHandle = await page.waitForSelector('maui-checkbox[name="isRepresentative"] >>> input[name="isRepresentative"]');

    while (true)
    {
        await sleep(1000);
        await elementHandle.click();
    }

    console.log(`elementHandle:${elementHandle}`);
})();

Metadata

Metadata

Assignees

No one assigned

    Labels

    puppeteer codeFeatures/Features from Puppeteer

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions