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?"
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
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.