[BUG] "Selector resolved to several elements" but the inspector reports only 1 element

[neongreen]

Context:

• Playwright Version: 1.17.1
• Operating System: macOS
• Node.js version: 16.13.0
• Browser: Chromium

I have a selector that looks like this: *_react=ReplyComponent >> :has-text("something"). My understanding is that it would match a <ReplyComponent ...> that has "something" somewhere inside. I have only one <ReplyComponent ...> on the page, and the inspector agrees with me — see the screenshot below. (Sorry for smell engineers, all text is autogenerated!)

However, page.locator fails with a strict mode violation — it thinks the selector resolves to three elements. What am I doing wrong?

[neongreen]

Funnily, if I amend the selector to say just _react=ReplyComponent, it works fine.

Is something wrong with how *... >> ... works?

[yury-s]

Remove the * from the beginning of the selector, it should be _react=ReplyComponent >> :has-text("something")

[neongreen]

When I remove the * it selects the p inside the ReplyComponent — I want the ReplyComponent itself.

According to the docs, * should make it select the outer part of the >> rather than the inner part. Are the docs wrong?

[yury-s]

According to the docs,

Can you share the link?

[yury-s]

Ok, I guess you are talking about https://playwright.dev/docs/selectors#intermediate-matches

[yury-s]

@neongreen can you share a repro that we could run locally? Otherwise it's hard to tell what's going on there.

[neongreen]

@yury-s Done. Please see https://github.com/neongreen/pw-repro

[neongreen]

Also note that the bug disappears if you inline the definition of ShowReply into ReplyComponent.

[neongreen]

Ping me if there's anything else I can do to help with the repro.

[aslushnikov]

Done. Please see https://github.com/neongreen/pw-repro

@neongreen I tried but this fails for me.

aslushnikov:~/tmp/pw-repro(master)$ npx playwright test
Using config at /Users/andreylushnikov/tmp/pw-repro/playwright.config.ts
page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/Boards
=========================== logs ===========================
navigating to "http://localhost:3000/Boards", waiting until "load"
============================================================
    at createAndSaveUser (/Users/andreylushnikov/tmp/pw-repro/playwright-setup.ts:28:14)
    at globalSetup (/Users/andreylushnikov/tmp/pw-repro/playwright-setup.ts:42:3) {
  name: 'Error'
}

It looked like some instructions are missing for the repro. So I tried to build and start the app as well:

npm run build && npm run start

But then running tests with the localhost server running fails like this:

aslushnikov:~/tmp/pw-repro$ npx playwright test
node:internal/bootstrap/switches/does_own_process_state:126
    cachedCwd = rawMethods.cwd();
                           ^

Error: ENOENT: no such file or directory, uv_cwd
    at process.wrappedCwd (node:internal/bootstrap/switches/does_own_process_state:126:28)
    at process.cwd (/Users/andreylushnikov/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:10:19)
    at new Config (/Users/andreylushnikov/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/@npmcli/config/lib/index.js:92:19)
    at new <anonymous> (/Users/andreylushnikov/.nvm/versions/node/v16.13.1/lib/node_modules/npm/lib/npm.js:83:19)
    at Object.<anonymous> (/Users/andreylushnikov/.nvm/versions/node/v16.13.1/lib/node_modules/npm/lib/npm.js:71:30)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'uv_cwd'
}

[aslushnikov]

I'd appreciate if there's a minimalistic repro that just has the page & a small playwright script that illustrates the issue.

[pavelfeldman]

Replace your selector with following:

*_react=ReplyComponent >> :scope:has-text("something")

Starting with Playwright 1.18 you can also do this:

page.locator('_react=ReplyComponent', { hasText: "something" });

Rationale:
The way original selector works is:

• First find all ReplyComponent components
• In those components, locate ALL elements that HAVE text "something".

This will return 3 elements for the following structure:

<ReplyComponent>
    <div class=body>
        <div class=section>
            <span>something</span>
        </div>
    </div>
</ReplyComponent>

They all match your criteria. Which one did you intend to locate?

[neongreen]

Oh, thanks! First time I'm seeing :scope. Going to mark as closed.