Better Locator exceptions for better debugging of selectors using Playwright Inspector

[PeterHevesi]

Hi there,
I am using Playwright with POM, so I have Pages - Components - Elements structure...
Most important is the Components, because I use them for example to work with itemsLists... But in a website I am testing, there are often components inside another component (often another items component inside one item of an outer items component)...
Then elements inside these components have their own selector, so my locators are often very huge and looks like this:
Locator(...SOME_SELECTOR...).Locator(...ANOTHER_SELECTOR...).Locator(...ANOTHER...SELECTOR) and so on...
(I don't manually write these selectors like this, they are automatically created for me by my framework, so for example I just write a selector for the whole itemsComponent, then I write another selector for locating items, then there is a class for oneItem of that list, and there are elements in it, for which I again write their own selectors, and I don't have to do anything, it is automatically joined together)

So my locators often could have like 3-5 chaining selectors, but when there is a mistake somewhere in one of those selectors, it is hard for me to recreate this into Playwright Inspector (which is super helpful for me to debug these kind of selectors), because Playwright inspector doesn't understand that .Locator(), that is c# not xpath or css, so whevenever I have an exception, that waiting for locator timeouted, I have to copy this from that exception and replace all .Locator( with playwright way >>

So, it would be awesome, if you make it easier :) So there are 2 possible solutions

1. Make that exception to be written with >> instead of .Locator, so I can just copy it and immediately debug
2. Or you can make Playwright Inspector to be able to understand the notion .Locator()

I guess the first solution would be better. I already thought, that I will do it myself, I could catch all these exceptions and rethrow another, that would proccess the original exception message and recreate it with Playwright selectors using >>
But then it wouldn't be for everybody, only for me, so I suggest you to make this change, it will be very nice :)

PS: Because I always see this exception inside "Test Detail Summary" inside Test Explorer, I had an idea, that the very best way for this to be super easy would be to have actually some button in the "Test Detail Summary" that I could just click, and the whole selector would get copied into clipboard.
Because I have sometimes hard time to select the whole selector when it is too long (whenever I try to select it with mouse, and my mouse go little under the row I am trying to select, it all unselects and the horizontal scrollbar of Test Detail Summary goes again all the way to the left). So I usually rather select it using just mouse click at the beginning holding shift and clicking at the end. But still, if there is some chance for some nice button appearing inside Test Detail Summary, that would just copy the whole selector and I can immediately paste it into Playwright Inspector, then it would be super awesome :)

PS2: And then inside Playwright Inspector, I often need to debug it step by step (first I add only the very first selector until the first >> and if it located what I wanted, I then copy there another part until another >> and so on...) and whenever I see that it is not locating what I wanted, I understand where the problem is.
So there is another idea, what if Playwright Inspector doesn't have just one textbox for the selector, but it would rather understand, that selectors are made up of parts divided by >> and so after pasting the whole selector, it could automatically write each selector part into separate row and then those rows could have something like checkbox next to it, so I could just unselect all parts and then just by pressing these checkboxes one by one, I would turn on those parts.. This would be the super awesome experience and the fastest possible debugging :)

PS3: Playwright Inspector does not only misunderstand the .Locator(). but also something like First() or Last() and so on, so even these things need to be converted into Playwright way, like nth=1 or nth=-1 and so on...

If you consider to implement this debuging experience, I would appreciate it a lot and I would be super thankful :)
If I haven't explained it clearly, please ask any additional questions :) I might provide screenshots or video :)

[mxschmitt]

Sounds like a valid feature request to make Playwright Inspector understand (chained) Locator syntax

Is "Test Detail Summary" something in VS or VSC?

We unfortunately don't have any integration there (yet), so probably not possible to provide any better experience there.

[mxschmitt]

Which version are you using? Actually it should already work:

what do I do different than you do?

[PeterHevesi]

well yeah, Test Detail Summary is part of standard Test Explorer used mainly for standard unit tests, and it is found in every version of Visual Studio, not Visual Studio Code... But you don't have to be hooked up into it, because it just shows exception when test fail, but the exception is yours, it is System.TimeoutException and it has the locator in it's message... So you can just change the message.

Because you showed me, that it is working in your Playwright Inspector, but sadly, it is not working for me...
Where I can find the version of Playwright Inspector? It should be updated when I update Playwright, right?

How to work with that Target? I don't have anything there and I can't switch to any other target, as you have there NUnit...

PS: My feature request not only suggest to improve this, so Playwright Inspector could understand it immediately (which it probably knows already and I just have an older version), but it also suggest, that Playwright Inspector should understand, that selectors are made of parts, and when they are not working, it is because there is a mistake in one of the parts, so for the debugging process to be super nice and fast, playwright inspector should be able to seperate the whole selector into pieces ( semantic of >> means it is the next part). And once you have these checkboxes next to these parts, you wouldn't have to cut and paste these parts into it all the time, but you could just check the checkboxes until you find the part with the mistake, that won't locate what you want). It would be like comment and uncomment in Visual Studio, but just for the selectors and their "parts" divided by >>

[mxschmitt]

How do you invoke Inspector? Via Page.PauseAsync()?

Which version of Playwright are you using? Yes it will get updated when you update Playwright.

We unfortunately never know how the user wants to split his Locators, so splitting the locators into parts sounds not like an option to me. Usually when a Locator is not working, you start to remove stuff from the right side if they are nested, to find out where in the chain the last working entry was.

Some ideas could be, that if you hover over a Part of a Locator in the Inspector, that it shows only the Locator until the hovered Locator.

[PeterHevesi]

I am opening it through Terminal using command: playwright open --viewport-size="1920,1080" --color-scheme=dark --browser=firefox

Yeah, I am doing it exactly like that, removing stuff from the right side, until finally I find the start of a selector that is selecting what I wanted, then I try to add them again, but yeah, I wanted to just let you know that I don't like this experience, it is slow and cumbersome...

But I like your idea of hovering over locator's part, that's probably even better than what I had in mind :)

[mxschmitt]

Where do you get the playwright command from? You need to use playwright.ps1 like this:

 ./bin/Debug/net6.0/playwright.ps1 open https://example.com

[PeterHevesi]

Hmm strange. I probably just put it into paths, so that's why I use just playwright, but when I did it with ps1 file, I got this exception:

[mxschmitt]

Makes sense with the PATH if it ends up going the ps1 file route. Thats a weird exception, can you provide us a minimal reproducible?

[PeterHevesi]

So should I send you the playwright.ps1 file and .playwright folder? Will that be enough?

[mxschmitt]

No, this won't help much. Could you try the official intro steps and see if the error occurs there? https://playwright.dev/dotnet/docs/intro

[PeterHevesi]

Do I need to always update playwright in all projects where Playwright is installed?
I thought, that I just need to update Nuget and then run this update Playwright command in one of the projects.
So it seems, that it is working in one of my project, but is throwing that error in other projects...

[mxschmitt]

Playwright needs to be updated in all your solutions where you have Playwright installed. It might require a dotnet clean and calling the playwright.ps1 install file is required in all the cases when Playwright gets updated or you are on a new machine, so it downloads the new browsers.

[PeterHevesi]

Ok so I am only able to update playwright in Test Projects, but I also have Automation Projects, and I am not able to update playwright there. I got that error I've sent you, when trying to update Automation Project...

But anyway, I updated successfully in those Test Projects, but Playwright Inspector is not updated or something, because it can't recognize the .Locator("...") syntax... Is it somehow possible to know what version of Playwright Inspector I have installed?

Because this is so strange, that my Inspector is not updating :D

[mxschmitt]

Have you tried dotnet clean? The inspector will get unpacked from the Microsoft.Playwright.dll file into your bin directory. There is unfortunately no way of seeing the Inspector version!

I strongly recommend keeping all projects on the same Playwright version, this could lead to such errors otherwise.

[PeterHevesi]

I keep all my projects on the same Playwright version (NuGet package), but I forgot to update all the projects manually with that command...
I've tried clean, but it is still not working. But it seems suspicious, that automation projects are not able to update, and tests projects are able to update without problem. So are you sure I should update all projects where Playwright NuGet is installed?
Because I don't need it, tests are running good, so I want to do it only for the sake of repairing the Inspector...

But I am not sure if I have the latest version of Playwright Inspector or not, so maybe the very best thing for us to solve this would be, if you somehow include a way to see the Inspector version in next update. Once I update to it and see I have to correct version, we can then focus on solving why it is not working with that .Locator("..") syntax.

Is it possible to include a version there or not?

[mxschmitt]

We heard about this issue the first time the past 3 years so we unlikely will add a version there. Can you provide us a reproduction?

You only need to run this "playwright.ps1 install" command once per version. Since the browsers are then installed on your system. Maybe you already have the latest Inspector and we could go back to whats not working for you but whats working for me?

Repro would be ideal for that, especially how you open the Inspector, what you enter etc. We might talk about different things, since the issue is already quite long.

[PeterHevesi]

I would like to provide a reproduction, but I can't share you my whole solution, it is a property of my company and I am not allowed to share anything, we are very sensitive to security...
I could provide you the bin folder, but you said, that it is not useful for you.
As I said, I open it using command:
pwsh bin/Debug/net7.0/playwright.ps1 open --viewport-size="1920,1080" --color-scheme=dark --browser='firefox'

And so when I open inspector and go to bing.com for example, and I write this:
Locator("//div[contains(@class, 'head_cont')]").Locator("//h1[contains(@class, 'logo_cont')]")
Nothing get's highlighted...

But when I write:
//div[contains(@Class, 'head_cont')] >> //h1[contains(@Class, 'logo_cont')]``
Then Bing logo is nicely highlighted...

Soo, what can I share you, so you consider it to be a reproducible?

PS: I open up the Playwright Inspector from the project where it surely is working (NuGet updated to latest version, install command already run successfully, I got no error when using pwsh bin/Debug/net7.0/playwright.ps1, so I guess it is nicely working and updated Playwright Inspector. If the issue really is about me not having the latest version, we can't find out, if you don't want to put version info there :D

PS2: So again, wouldn't it still be the best, if you just change the exception to not write chained selector using .Locator(...) syntax, but rather using >> ? It would be shorter, nicer to work with and it would work even in my Playwright Inspector :D

PS3: If you add that feature we were talking about (to be able to select just some part of a selector and it would then highlight elements only by highlighted part), then it would automatically verify, if I have the latest version :D I would just see this new feature working for me, so it would verify it :)

[mxschmitt]

Sounds like there was a bug in our code, I created a proposed fix here: microsoft/playwright#27706 Does the workaround in the issue work for you? This would work for non-xpath locators:

As a workaround the user was able to click record, interact with the page and then the language would be correctly used -> csharp e.g. would work in the "Locator Picker".

Also I found a bug related to Pick Locator feature and xpaths: microsoft/playwright#27707

[PeterHevesi]

Nice, that worked :) But still not 100% correctly, if I do Locator("<some_xpath_selector1>").Locator("<some_xpath_selector2>")
then it doesn't work.

I had to put xpath= in front of it, so when having it like this, it works just fine, but shouldn't be required :)
Locator("xpath=<some_xpath_selector1>").Locator("xpath=<some_xpath_selector2>")

[PeterHevesi]

So thanks a lot for helping me to resolve the issue :)
And so do you have any plans to implement that highlighting feature in which you could select only some parts of the selector, for the easier debugging?

[mxschmitt]

I had to put xpath= in front of it, so when having it like this, it works just fine, but shouldn't be required :) Locator("xpath=<some_xpath_selector1>").Locator("xpath=<some_xpath_selector2>")

This gets fixed in microsoft/playwright#27742.

And so do you have any plans to implement that highlighting feature in which you could select only some parts of the selector, for the easier debugging?

I recommend to file a separate issue (feature request) in the main repo, since this issue is already very long. I'd then like to close this one, once we merged the last Inspector PR and recommend to file a new issue if you found more bugs.

[PeterHevesi]

Alright sure, here is the feature request:
microsoft/playwright#27747