[Bug]: Wrong button locator

[shivamgoyal6382]

Version

v1.52.0

Steps to reproduce

<button type="button"
        class="Button-module__btn_3-0-6 Button-module__btn-filled-primary_3-0-6 Button-module__btn-sm_3-0-6"><span
                class="Button-module__btn-icon_3-0-6 Button-module__btn-icon-left_3-0-6">
                <div class="Stack-module__stack_3-0-6 Stack-module__across_3-0-6 invite-button-K0M0iI"><svg
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em"
                                focusable="true">
                                <path fill="none" d="M0 0h256v256H0z"></path>
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="16" d="M40 128h176M128 40v176"></path>
                        </svg>
                        <div class="user-type-F7lBtc">
                                <p
                                        class="text title-text-SeB8ig Text-module__text-normal_3-0-6 false Text-module__align-left_3-0-6 Text-module__text-small_3-0-6 user-type-item-sC5oLY">
                                        Regular user</p>
                                <p
                                        class="text title-text-SeB8ig Text-module__text-normal_3-0-6 false Text-module__align-left_3-0-6 Text-module__text-small_3-0-6 user-type-item-sC5oLY">
                                        Guest user</p>
                        </div>
                </div>
        </span><span class="
        Label-module__semibold_3-0-6
        undefined
        undefined
        undefined
        Label-module__sm_3-0-6
        Label-module__label_3-0-6
        Button-module__btn-color-filled-primary_3-0-6 undefined">Invite new user</span></button>

This is the code of a button of the website. the two div "Regular user" and "Guest user" appear after clicking on invite user button and cannot be seen previously in DOM

Playwright codegen selector does not show those two as secparate button and then is not able to perform click as well because it generated wrong locator and then does not click.

This problem is specific to codegen

Expected behavior

Expected two different locator for different elements.

Actual behavior

Single locator for two buttons

Additional context

No response

Environment

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M4
    Memory: 125.59 MB / 24.00 GB
  Binaries:
    Node: 20.17.0 - ~/miniconda3/envs/optexity/bin/node
    npm: 10.8.2 - ~/miniconda3/envs/optexity/bin/npm
  IDEs:
    VSCode: 1.100.2 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash

[yury-s]

Do you mind sharing original page where this happens? So far from what I see with the provided html snippet, Playwright picks first 'button' element, whereas you want to click on a particular <p> inside it:

[shivamgoyal6382]

Website is paywalled but happy to share more data. What do you need?

If i open this website in Safari, Chrome or any browser, button clicks work as normal. If I do it in codegen, neither the codegen can detect right locator nor does it allow me to click on any button. I think it happens because codegen intercepts my click and then tries to click on wrong locator using script but as there is no button with this locator, nothing happens.

[yury-s]

Website is paywalled but happy to share more data. What do you need?

We need a repro that we could run locally. Try to extract relevant parts into a standalone repro.

[yury-s]

We need a minimal reproduction that we could run locally to make this report actionable. Please file a new one and link to this issue when you get back to it!