[Feature]more smart selector policy

[roughsoft]

if we can support the selector policy thinking browser as blackbox, the user experience will more awesome.
https://github.com/getgauge/taiko#smart-selectors
https://docs.taiko.dev/api/relativeselector/
these feature can improve the productivity of producting command when user interacting web application in auth script mode.

[roughsoft]

text string selector is just one little baby step

[ghost]

This looks like a duplicate of #2877.

But indeed, that kind of feature would be awesome.

[pavelfeldman]

Since we support third party selectors, one could implement that, would look like:

await selectors.register('taiko', require('taiko-playwright`));

page.click(`taiko=link('Sign In',near("Home"),toLeftOf("Sign Out"))`);

[roughsoft]

I think smart selector is core feature of automate library, the extension policy is another something.

[ghost]

@pavelfeldman Nice, that looks like a pretty cool feature for getting access to smart selector logic, even if it is not included in Playwright's core -- thanks for the hint. On my side, however, I get the below error message when trying to register taiko as described above:

Error: Either path or content property must be present
at Function.evaluationScript (/[...]/ta-playwright/node_modules/playwright/lib/helper.js:64:23)
at Selectors.register (/[...]/ta-playwright/node_modules/playwright/lib/selectors.js:42:46)
at Selectors.register (/[...]/repos/ta-playwright/node_modules/playwright/lib/helper.js:80:31)
at /[...]/ta-playwright/test/e2e/e2e-dcc.ts:38:25
at step (e2e-dcc.ts:34:23)
at Object.next (e2e-dcc.ts:15:53)
at fulfilled (e2e-dcc.ts:6:58)

(Besides: I think you've got a small typo in your selectors.register statement. I think it should read await selectors.register('taiko', require('taiko-playwright')); (quote sign instead of backtick at the end of taiko-playwright).)

Here's how I installed taiko within my playwright project under the name of 'taiko-playwright' instead of just 'taiko':

1. cd into my playwright project folder (ta-playwright), first level (the directory which also contains the node_modules sub-directory).
2. install taiko in it w/o chromium download and with the package name "taiko-playwright" instead of just "taiko":
   TAIKO_SKIP_CHROMIUM_DOWNLOAD=true npm i taiko-playwright@npm:taiko
3. check that ./node_modules/taiko-playwright has been created.

Do you have an idea on why it's not working on my side?

Playwright version: 1.3.0
Node version: 14.7.0

[roughsoft]

@arjun27 @pavelfeldman https://www.selenium.dev/documentation/en/getting_started_with_webdriver/locating_elements/#relative-locators

[arjunattam]

Thanks for the request @roughsoft. I'll merge this with #2877 since they are duplicates.

[klhex]

@pavelfeldman I understand now what you mean by "implement that" in your above comment after having found the documentation on customer selector engines. I first thought (somewhat naively ;) that by some kind of magic this would work automatically, which of course is not possible w/o some glue code.

[jfgreffier]

Hi!
I've implemented such custom selector engine. Please go to check https://www.npmjs.com/package/playwright-relative-selector