Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[REGRESSION]: VSCode Playwright extension doesn't highlight matching css locators #28630

Closed
ch4r-ch4r opened this issue Dec 13, 2023 · 1 comment · Fixed by #29012
Closed

[REGRESSION]: VSCode Playwright extension doesn't highlight matching css locators #28630

ch4r-ch4r opened this issue Dec 13, 2023 · 1 comment · Fixed by #29012
Assignees
@dgozman
Labels
v1.42

Comments

@ch4r-ch4r
Copy link

Context:

  • GOOD Playwright Version: 1.39.0
  • BAD Playwright Version: 1.40.1
  • Operating System: Windows
  • Extra:N/A

Code Snippet

Consider this html file that just renders a label and input:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div
            class="x-container x-form-fieldcontainer x-form-item x-form-item-default x-box-item x-window-item x-container-default x-vbox-form-item"
            role="presentation"
            id="freetext-field-1213"
        >
            <label
                id="freetext-field-1213-labelEl"
                data-ref="labelEl"
                class="x-form-item-label x-form-item-label-default x-unselectable"
                ><span
                    class="x-form-item-label-inner x-form-item-label-inner-default"
                    ><span
                        id="freetext-field-1213-labelTextEl"
                        data-ref="labelTextEl"
                        class="x-form-item-label-text"
                        >Assigned Number:</span
                    ></span
                ></label
            >
            <div
                id="freetext-field-1213-bodyEl"
                data-ref="bodyEl"
                role="presentation"
                class="x-form-item-body x-form-item-body-default x-field-container-body-vertical"
            >
                <div
                    id="freetext-field-1213-containerEl"
                    data-ref="containerEl"
                    class="x-box-layout-ct"
                    role="presentation"
                >
                    <div
                        id="freetext-field-1213-innerCt"
                        data-ref="innerCt"
                        role="presentation"
                        class="x-box-inner"
                    >
                        <div
                            id="freetext-field-1213-targetEl"
                            data-ref="targetEl"
                            class="x-box-target"
                            role="presentation"
                        >
                            <div
                                class="x-field x-form-item x-form-item-default x-form-type-text x-box-item x-field-default x-hbox-form-item x-form-item-no-label x-form-dirty"
                                role="presentation"
                                id="textfield-1214"
                            >
                                <label
                                    id="textfield-1214-labelEl"
                                    data-ref="labelEl"
                                    class="x-form-item-label x-form-item-label-default x-unselectable"
                                    for="textfield-1214-inputEl"
                                    ><span
                                        class="x-form-item-label-inner x-form-item-label-inner-default"
                                        ><span
                                            id="textfield-1214-labelTextEl"
                                            data-ref="labelTextEl"
                                            class="x-form-item-label-text"
                                        ></span></span
                                ></label>
                                <div
                                    id="textfield-1214-bodyEl"
                                    data-ref="bodyEl"
                                    role="presentation"
                                    class="x-form-item-body x-form-item-body-default x-form-text-field-body x-form-text-field-body-default"
                                >
                                    <div
                                        id="textfield-1214-triggerWrap"
                                        data-ref="triggerWrap"
                                        role="presentation"
                                        class="x-form-trigger-wrap x-form-trigger-wrap-default"
                                    >
                                        <div
                                            id="textfield-1214-inputWrap"
                                            data-ref="inputWrap"
                                            role="presentation"
                                            class="x-form-text-wrap x-form-text-wrap-default"
                                        >
                                            <input
                                                id="textfield-1214-inputEl"
                                                data-ref="inputEl"
                                                type="text"
                                                size="1"
                                                name="textfield-1214-inputEl"
                                                aria-hidden="false"
                                                aria-disabled="false"
                                                role="textbox"
                                                aria-invalid="false"
                                                aria-readonly="false"
                                                aria-describedby="textfield-1214-ariaStatusEl"
                                                aria-required="false"
                                                class="x-form-field x-form-text x-form-text-default"
                                                autocomplete="off"
                                                data-componentid="textfield-1214"
                                            />
                                        </div>
                                    </div>
                                    <span
                                        id="textfield-1214-ariaStatusEl"
                                        data-ref="ariaStatusEl"
                                        aria-hidden="true"
                                        class="x-hidden-offsets"
                                    ></span
                                    ><span
                                        id="textfield-1214-ariaErrorEl"
                                        data-ref="ariaErrorEl"
                                        aria-hidden="true"
                                        aria-live="assertive"
                                        class="x-hidden-clip"
                                    ></span>
                                </div>
                                <div
                                    id="textfield-1214-errorWrapEl"
                                    data-ref="errorWrapEl"
                                    class="x-form-error-wrap x-form-error-wrap-default x-form-error-wrap-under"
                                >
                                    <div
                                        role="presentation"
                                        id="textfield-1214-errorEl"
                                        data-ref="errorEl"
                                        class="x-form-error-msg x-form-invalid-under x-form-invalid-under-default"
                                        data-anchortarget="textfield-1214-inputEl"
                                    ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                id="freetext-field-1213-errorWrapEl"
                data-ref="errorWrapEl"
                class="x-form-error-wrap x-form-error-wrap-default x-form-error-wrap-under x-form-error-wrap-under-side-label"
            >
                <div
                    role="presentation"
                    id="freetext-field-1213-errorEl"
                    data-ref="errorEl"
                    class="x-form-error-msg x-form-invalid-under x-form-invalid-under-default"
                    data-anchortarget="freetext-field-1213-containerEl"
                ></div>
            </div>
        </div>
    </body>
</html>

Attempting to select the input with css pseudo class with the following code:

page.locator("[id*=freetext-field]")
        .locator('input:below(:text("Assigned Number:"))')
        .locator("visible=true");

Describe the bug

The input element is not highlighted when opening the playwright browser from the vscode extension (using v 1.40.0).
(This is only a visual bug, since the locator is still identified and interacted with during the test execution)

image
@mxschmitt
Copy link
Member

mxschmitt commented Dec 14, 2023 •
edited
Loading

Thanks for the great bug report.

Bisect: d003945...d67515f

1.40.0-alpha-oct-21-2023 bad
1.40.0-alpha-oct-20-2023 good

@mxschmitt mxschmitt added v1.42 and removed v1.41 labels Dec 15, 2023
@dgozman dgozman mentioned this issue Jan 16, 2024
Merged
dgozman added a commit that referenced this issue Jan 17, 2024
@dgozman
fix(locator parser): allow escaped quotes in the digest function (#29012
d023829 
)

This supports mixed quotes locators in JavaScript where we are not sure
what quote is the correct one, so we normalize to unescaped single quote
when comparing with the original.

Drive-by: we were allowing single quotes in Python, Java and .NET, but
these are actually not allowed.

Regressed in #27718.
Fixes #28630.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dgozman dgozman

Labels
v1.42
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(locator parser): allow escaped quotes in the digest function dgozman/playwright
3 participants
@dgozman @mxschmitt @ch4r-ch4r