[Feature] Adapt the codegen feature to generate Page Object Model files

[maxandrezils]

Add a flag to the codegen feature (i.e. --pom=true) that allows one to generate Page Object Model files for your tests based on the clicked elements.

[AlexKomanov]

Upvoting this one!

[NikkTod]

This one is needed.

[GeorgeFischhof]

Hi, I wanted to say almost exactly the same :) It is all the same for me how to switch it on, but like the --pom / --pom=true switches, also a button is good for me on recorder ui.

I created a POC POM ;) in Python, I think some similar would be good, that is for PyTest, files are attached in zip UI_POM_POC.ZIP

BR, George

[NerdishShah]

Upvoting, any ETA for it?

[dgisq]

+1

[renjujv]

+1. Absolutely a great feature to have.

[vitalets]

Could anybody show an example how generated test will look like?

[infinitejest69]

+1, not sure if the complexity is generating a test as well as a POM at the same time. i would settle for a POM only mode as most of the time the recorded tests needs to be re-written to use existing POM's. a POM only mode would save so much time standing up new projects or pages.

[marekbrtkwcz]

Great feature for me

[thatpeskylimey]

This would be very helpful!

[refactoreric]

This would be super-complex to implement. How would Playwright know which things belong together in which POMs? Do we create one POM per URL? In many cases that would create lots of duplicate POMs with all the elements for the whole page(s) (including all the common components). So the generator would need to be intelligent enough to know which are the unique pages, and which things on the page are components. What complicates the matter further is that Web UI components are often a random group of HTML elements, and how you can identify them as a component differs per UI library. Besides all this complexity, the generator would need to be able to both create new as wel as update existing POMs. And there are different preferences on POM design, so each project does it differently.

I think this is pretty impossible, but if some commercial party would implement it, they may make good money with it. Probably this would require AI.

[Evilweed]

• Allow User to provide example of already existing POM file as a reference how code should be structured
• Allow User to provide ways for AI to determine if:
  • something should be a separate component (for example header), for example by telling AI that data-test-id="component-*" usually contains component that should be separate Class
  • something should be UI element wrapper/interface (for example input field with button and error message) and maybe for user to provide sample code how this could be structured
• Allow user to provide path for POM's and for AI to use already existing POM's knowledge to avoid code duplication if POM already exists

Should be good enough to fast-track beautiful code generation.

[GeorgeFischhof]

Hi @refactoreric @Evilweed yeah, really it seems to be complicated, but going on with @Evilweed 's idea, perhaps playwright could contain several templates to allow the user to select from them, also user could send in / create similar templates, that would be good (yes, requires human resources, but for example they could be "community given / created" stuff, which could be browsed in a repo.

POM / URL the similar thing: user could be able to define which URL part gives the the same page, and which does not. Like to REST API's URLs https://base_url/api_version/item/{ID}/sub_item/{ID}?page={Number}&page_length={Number} points to same page

BR, George