[Feature] A special locator to visually locate an element

[idxn]

Let us know what functionality you'd like to see in Playwright and what is your use case.
A special locator to visually locate an element.

In taiko, browser automation library by thoughtwork, you could locate element visually like the following:
click(checkbox(near("Username")))

Taiko calls it proximity locator
Refer: https://docs.taiko.dev/#smart-selectors

This locator will reduce the flakiness of the script and the maintenance cost because the locator doesn't rely on html structure that may be changed from time to time. Even we can assign data-testid attribute but this is very useful in some cases as well.

Do you think others might benefit from this as well?
Yes, it is.

[mxschmitt]

Have you seen already the selector documentation? Text, css, xpath, shadow dom selectors are available: https://playwright.dev/#version=v1.2.0&path=docs%2Fselectors.md&q=

Does this fit for your needs?

A feature for highlighting a certain dom node will be tracked here: #2747

[idxn]

Yes, I have seen it and it still doesn't fit my need. I would love to see this feature.
BTW, thanks for pointing #2747. That is also useful.

Last but not least, thanks for a great library. I also saw you python version. Hopefully, we can have a production version soon :)

[idxn]

@mxschmitt Another use case I can think of is for web scrapping that we need to rely on html structure/attribute if there is no id/data-testid assigned. The maintenance cost for that script will be really high if we need to rely on css/xpath on this case.

[ghost]

I'd also love to see "proximity selectors" (as the Taiko team calls them) added to the Playwright API. They'd make "black box" testing (i.e. purely from the point of view of the end user w/o any insight into the application's technical details (DOM, CSS, etc.)) become a reality.

They've been recently added to Selenium as well, see here. (They call it "relative locators".)

For me, they would be most useful in locating/selecting an element via text selector if there are several elements with the same text on a page. Currently, the text selector would simply return the first found element which may not be the one intended to select. With proximity selectors, however, one could much better specify which particular element one is interested in.

[ghost]

I am currently in the midst of evaluating a handful (4, actually) of E2E test automation tools for my team, among them Taiko and Playwright. I've started with Taiko and my experience so far with those proximity selectors (see link in this thread's initial post) is simply splendid: I can create entire e2e tests in full black-box mode, meaning that I use only information I see on the tested web page w/o having to inspect the page's html code in any way. This makes creating and maintaining e2e tests a real breeze, with pretty low efforts. It's a pure pleasure, really. 👍

@pavelfeldman @mxschmitt @aslushnikov @yury-s @JoelEinbinder If you guys haven't done so yet you really ought to check this out yourselves! :) I am convinced that the day you do this you'll put those proximity selectors on Playwright's roadmap. I hope you take note.

[ghost]

@pavelfeldman @mxschmitt @aslushnikov @yury-s @JoelEinbinder @arjun27 Given that ThoughtWorks will cease supporting Taiko (I'd say best-in-class regarding smart/proximity selectors) by the end of this year and that from 2021 on Taiko will be a fully community-managed open source project (see here), now would be a good time (re)contemplating about adding such smart selectors to Playwright as well (or, as an interim solution, explain in more detail how Taiko's selector engines can be successfully registered and used in Playwright -- see #3667). Sorry for making such a noise about it, it's just that by my own experience with Taiko it makes creating and maintaining e2e tests a pure joy.

[roughsoft]

very great feature, the selenium 4 will implement these friendly selector

[jfgreffier]

I'm willing to initiate a selector engine that implements relative selectors.

I was planning to make use of Playwright's chaining like this. What do you think of this syntax ?

page.click(`text=Login >> taiko=toRightOf Home`)

@idxn @roughsoft Do you think relative selectors fits your requirements ? i.e. toLeftOf, toRightOf, above, below, near
Or it should do more ?

By the way, I'm Jeff on Playwright's Slack. Feel free to drop me a message there

[klhex]

@jfgreffier That would be awesome! IMHO the mentioned relative selectors (also called proximity selectors, see for example https://docs.taiko.dev/api/reference/) would perfectly fit the requirements.

Regarding the syntax you should have a look at @pavelfeldman's comment in a duplicate issue in which he gives an example for a corresponding syntax.

[idxn]

@jfgreffier That covers everything I need.

[falcon030]

@jfgreffier If you can implement the relative/proximity selectors, like the ones that Taiko supports, than this would be great.

[roughsoft]

@jfgreffier thank you!

[roughsoft]

@jfgreffier I would like these:
page.click(taiko=link('Sign In',near("Home"),toLeftOf("Sign Out")));

[jfgreffier]

Please check the first version of Playwright relative selector ! It allows you to select an element by its relative position to another one
https://www.npmjs.com/package/playwright-relative-selector

It's in early phase. My goal at the moment is to get feedback on it, so don't hesitate to drop an issue here

@roughsoft I created an issue to discuss specifically of the syntax jfgreffier/playwright-relative-selector#1

[pavelfeldman]

@jfgreffier : I looked at your repo, great job! Is there a way to pass selector into the page.click? We discourage getting a handle and then performing an action on it since this effectively disables the auto-waiting logic.

[jfgreffier]

@pavelfeldman That was my first approach, to create a custom selector engine. However, I faced some issues:

• When using chaining, it will call my selector query() multiple times. Ideally I wanted to know all candidates nodes to select the closest one
• I found out that selectors are executed in the browser's context and so it is not possible to use a selector from a custom selector engine...

It's better to don't reinvent the wheel and reusing Playwright selectors is ideal. Do you think there is a workaround or a better way to don't interfere with the auto-wait logic ?

[idxn]

@pavelfeldman Good news? Will this be included in playwright?

[pavelfeldman]

Will launch in 1.8