← Back to Discord Forum

Chaining locators in POM

Hello, I've sometimes situations when I have to chain locators to find elements. I store locators in constructor, and for example, I have:

this.table = page.locator('table')
this.button = page.locator('button')
this.buttonInTable = page.locator('table').locator('button')

Is there any way to use this.table and this.button to do it without creating a new locator?

This thread is trying to answer question "Is there a way to chain locators in POM without creating a new locator each time?"

3 replies

This is a way you can also create the buttonInTable variable this.buttonInTable = table.locator('button')

Yes, you are right. I forgot to write it. I'm looking for a solution where I can chain variables. I don't know if it's even possible, but maybe there is any way to do something like table.button

Currently, in such cases I make CSS selectors as variables and write page.locator(this.table).locator(this. button) but It's harder to read

if your "this.button" is a locator... this.button.locator(...") should work as well...

But "table.button" won't... Would mean PW's Locator would need a "button" member. This is where i might be at the end of my JS knowlege, but if you really want to get hacky bet you could muck around with the prototype for PW's locator and add it.. But if you could might not be worth it and could possibly make more problems for yourself? Your use might vary?

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.