[Feature] Make it easier to reuse locators for chaining

Let us know what functionality you’d like to see in Playwright and what your use case is.

Let’s say I have a page object like the one below

class PageObject {
  readonly parent: Locator;

  readonly child: Locator;

  constructor(page: Page) {
    this.parent = page.locator('[data-id=parent]');
    this.child = page.locator('[data-id=child]');
  }
}

It makes sense in my use case to have these as separate locators. But in some instances I would essentially want to chain the parent locator to the child locator. I could add another locator this.parentChild = page.locator('[data-id=parent] [data-id=child]') but it seems like duplication of selectors that are already defined. Or I could extract out the selectors but that again is more code.

Some ideas are:

1. Allow the first arg of page.locator() to be either a selector: string OR a locator: Locator --> this.parent.locator(this.child)
2. Be able to get the selector from a locator --> this.parent.locator(this.child.selector)

[kenny-f]

Does it make sense ? Sorry if I am confused.

Yes, both your proposed solutions make sense and I have considered them.

Maybe I wasn’t clear enough as to why I’m requesting this feature. It’s not that there is currently anything blocking me from achieving my use case.

It’s more of a convenience thing. It would be good if you could get away with only having locators in the page object instead of having a mix of locators and string selectors. Keeps the class smaller and cleaner IMO.

Feel free to close if you don’t think this is something that is worth pursuing.

[imartinflores]

It’s alright. In that case, could you not use a string instead of a Locator object ? So you can create your selector, and then chain it or not depending if it’s under the parent, i.e:

class PageObject {
  readonly parent: Locator;
  readonly childSelector: String;
  readonly child: Locator;

  constructor(page: Page) {
    this.childSelector = "yourLocator";
    this.parent = page.locator('[data-id=parent]');
    this.child = page.locator(`${this.childSelector}`);
  }
}

And then if it’s under, you can use: this.parent.locator(this.childSelector);

The childSelector could also be a const instead, I assume you won’t need to update it.

Does it make sense ? Sorry if I am confused.