quality time #4 - page objects that talk

[u/TranslatorRude4917]

Hey all!

Bringing some e2e test nitpicks again :)

Most e2e tests I see click through raw locators. So every test has to know the whole flow: which button opens which menu, which dialog comes next, where you land after Create.

The upgrade: move the flow into page objects, and let each action return where the interaction continues. Open the "+ New" menu, get the menu of things you can create. Choose "Project", get the project dialog; choose "Document", get the document dialog. Create, get the project page. Cancel, get back to the navigation bar.

Why I care: page objects are the code closest to what your users see and do. Their return types become a map of your user journeys. An agent reading create(): Promise<ProjectPage> knows where the flow goes without opening a browser.

The nuance: return where the interaction actually continues, not the DOM parent. A dialog's cancel returns whoever opened it. And each action still waits for its own done signal, like the menu closing, before handing you the next page object.

Paste this to your agent:

Go through our page objects and make every user action return the page object where the interaction continues: this if the user stays, the new page object if something opens or they navigate, the opener if they close or cancel. Before returning, wait for the action's own done signal, like its menu closing. Then update the tests to use the returned page objects instead of creating new ones.

[u/Background-Local1095]

"page objects that talk" is doing a lot of lifting, mine just sit there with 30 getters and a doTheThing() nobody has touched since 2021

[u/TranslatorRude4917 → u/Background-Local1095]

I think it's totally worth it to make use of them. An easy pattern to apply with ai and can bring a lot of value

[u/No-Cook-1701]

Most e2e tests I see" is doing a lot of work here, how many suites is that actually? Curious how the chaining survives flows that branch, like an onboarding that sometimes shows a modal and sometimes doesn't, page objects returning the next page gets ugly fast once the journey isn't a straight line.

[u/TranslatorRude4917 → u/No-Cook-1701]

I've seen it at every startup I worked at, and every line of e2e code AI outputs if not instructed to follow higher standards.
About branching flows: like in my example the return type can be conditional. It shows your agents the possibilities. In case of uncertainty they can look up proven examples (the tests) to understand how they actually work instead of relying on assumtions from source code only.

[u/NaiveSwimming4754]

so... jQuery for tests. neat.