[Feature] Configurable selectors in codegen

[Evilweed]

Please make the list of ["data-test-id", "data-testid", ...] selector building attributes configurable. Or even please add an configuration option to add custom JS/TS method that prepends your selector building code.

Reasons:

• Some projects use different names like e2e-target, data-cy, data-e2e, data-qa, data-test, data-testid
• There are also companies that use extended data-test-id strategy where you have 2 tags. "data-test-id" (for example: "signup") and "data-test-id-type" (for example: "modal"). In order to fully use e2e recording using your cli it would be best to prepend your selector builder strategy with custom method that uses "data-test-id-type" too.

[mxschmitt]

Currently if you want to use a different attribute selector to the existing ones you can use CSS selectors.

In your case e.g. [e2e-target=foobar] which selects all elements with matching attribute/value combination. Would that work for you? To combine to it would be [data-test-id=signup][data-test-id-type=modal].

Is it about the element selectors itself or about the codegen feature?

[Evilweed]

@mxschmitt About Codegen feature. I would like to pass to Codegen Selector constructing strategy that prepends default one, or override default list of preferred tags ["data-test-id", ...] with my own. So that i can use Codegen in a way it prefers my list of tags while constructing Selectors during record session.

This exact feature was present in QA Wolf library before they went from full Open Source to SaaS. And it is awesome, because not everybody uses data-test-id.

[mxschmitt]

This is a valid feature request, can't give a eta but this is definitely a space where we want to invest time into (letting the user decide which selectors he want to use, there your custom attributes make also sense).

[Evilweed]

Thank you, with that kind of attitude I believe you can really succeed on the promise to make Playwright as ground breaking and loved by whole world as Visual Studio Code :)

[kresli]

I'll give my 2 cents here. We are currently using cypress but investigating an alternatives. We have a custom selector mechanism (for cypress playground) which works by grabbing the whole path to particular element using only data-qa attribute in cypress. For example
[data-qa="Navbar"] [data-qa="Tools"] [data-qa="SearchInput"] input. where input is the element we are currently hover over.
We would need to access parent elements to make this work. Would be this doable in the feature?

[Evilweed]

@mxschmitt, as me and @kresli showed is that companies push this pattern to limits to achieve even better results, so allowing people to prepend their own script/selector generation strategy would be even more beneficial than just overriding tag name. Just something to consider.

[lmlikota]

Upvote, we are using data-centest custom attribute. Our UI has too many elements (literally hundreds of them on a single page) and it's too complicated to be used with text based locators.

[kareman]

If you set the option e.g. use: { testIdAttribute: 'data-cy' , ...} in playwright.config.ts , Codegen will generate await page.getByTestId('...') and use the value of the 'data-cy' attribute.

[PetraStill]

@kareman It doesn't seem to be working.
To playwright.config.js I have added the following:

use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    testIdAttribute: 'data-auto-qa',
  },

but Playwright keeps collecting something like await page.getByRole('button', { name: '[]' }).click();

#18888 is marked as closed but I think it should be re-opened.

My current version of playwright is 1.36.0

[mxschmitt]

@PetraStill you need to run a test in VSCode, then say record new test and then it will work. npx playwright codegen won't respect the config if thats what you are referring to.

[PetraStill]

@mxschmitt
I tried to generate a new test in Visual Studio Code.
Please take a look at the screenshots.
Am I doing something wrong? This doesn't seem to be working.

[mxschmitt]

You need to start it via the Testing tab in VSCode, not the terminal. See here: https://playwright.dev/docs/getting-started-vscode#generating-tests and https://www.youtube.com/watch?v=LM4yqrOzmFE

[PetraStill]

@mxschmitt
Thank you.
I did try to install it and can see that it generates the test like
await page.locator('list-head-pagination-dropdown-menu__btn').click();

whereas I (to make it work) write it as
const element = page.locator('[data-auto-qa="list-head-pagination-dropdown-menu__btn"]');
await element.click();

However, the extension totally disregards my current settings and generates the test in type script though I chose java script.

It's probably another issue though.
Thank you again.

[mxschmitt]

@PetraStill for you applies most likely the same as for #24276 (comment). For the other issue please file a separate issue, so we don't spam the folks here who subscribe to this issue. The TypeScript we generate is also compatible with the normal JavaScript, so you should not have any issues here. Thanks!

[anagami]

Hi @mxschmitt
Is there have some way to prefered use locator type?
for example i have button with role and testid

<button role="button" type="submit" data-testid='uniq-id'>Submit</button>

and i what to codegen using page.getByTestId('uniq-id') locator instead of page.getByRole('button', { name: 'Submit' })

[mxschmitt]

@anagami testIds always have the highest priority as of today. If it does not get picked up you either have a different test-id naming convention or we have a bug!

[anagami]

Oops. you are right! My code has mistake - value of data-testid was now unique. replace with uniq and now locator works as expected

[trigunam]

I love using codegen however I am stuck at using data-test-customer-name as an attribute. note that it is not like others who mentioned here as data-test-something=value but it is just an attribute.

<input id='dynamic123' type='text' data-test-customer-name></input>

codegen failed to recognize this and always uses a dynamic id attribute. The id field seems to change on every page load, so cannot use the script generated by codegen.

This feature will really help us start using playwright as the only tool for test automation if it can be fixed.

[trigunam]

I'll give my 2 cents here. We are currently using cypress but investigating an alternatives. We have a custom selector mechanism (for cypress playground) which works by grabbing the whole path to particular element using only data-qa attribute in cypress. For example [data-qa="Navbar"] [data-qa="Tools"] [data-qa="SearchInput"] input. where input is the element we are currently hover over. We would need to access parent elements to make this work. Would be this doable in the feature?

@kresli Why are you looking for an alternative to Cypress? since data-test-* is not supported in Playwright, I was thinking the next best thing is Cypress also since it has support for Cypress Studio (experimental feature) which is similar to Codegen.

Sorry for asking this question here, but I really wanted to know the answer and it might help others who are looking at similar problems to solve.

[daliusd]

It is interesting that codegen has --test-id-attribute and it works, but this is not mentioned in this issue.