<p dir="auto">Let us know what functionality you'd like to see in Playwright and what your use case is.</p>
<p dir="auto">Let's say I have a page object like the one below</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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]');
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">PageObject</span> <span class="pl-kos">{</span>
  <span class="pl-k">readonly</span> <span class="pl-c1">parent</span>: <span class="pl-smi">Locator</span><span class="pl-kos">;</span>

  <span class="pl-k">readonly</span> <span class="pl-c1">child</span>: <span class="pl-smi">Locator</span><span class="pl-kos">;</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">page</span>: <span class="pl-smi">Page</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">parent</span> <span class="pl-c1">=</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'[data-id=parent]'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">child</span> <span class="pl-c1">=</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'[data-id=child]'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">It makes sense in my use case to have these as separate locators.<br>
But in some instances I would essentially want to chain the parent locator to the child locator.<br>
I could add another locator <code class="notranslate">this.parentChild = page.locator('[data-id=parent] [data-id=child]')</code> but it seems like duplication of selectors that are already defined.<br>
Or I could extract out the selectors but that again is more code.</p>
<p dir="auto">Some ideas are:</p>
<ol dir="auto">
<li>Allow the first arg of page.locator() to be either a <code class="notranslate">selector: string</code> OR a <code class="notranslate">locator: Locator</code> --&gt; <code class="notranslate">this.parent.locator(this.child)</code></li>
<li>Be able to get the selector from a <code class="notranslate">locator</code> --&gt; <code class="notranslate">this.parent.locator(this.child.selector)</code></li>
</ol>
<p dir="auto">Right now we need to repeat lines of code to get to the element with more than one attribute.</p>
<p dir="auto">We would like to have an implementation that will help us with defining for example elements and then filter them by additional attribute:</p>
<p dir="auto"><strong>[Example of what we want]</strong>:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/62831238/140914358-4d43bb6a-e212-49b1-84f4-3d6023561272.png"><img src="https://user-images.githubusercontent.com/62831238/140914358-4d43bb6a-e212-49b1-84f4-3d6023561272.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>[What we have?]</strong><br>
Right now we need to duplicate part of the standardProducts:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="async chooseStandardProduct(dataProductName: string): Promise&lt;void&gt; {
   await this.page.locator(`[e2e-target-name=&quot;standard&quot;][e2e-target-name=&quot;${dataProductName}&quot;`]).click()
}"><pre class="notranslate"><code class="notranslate">async chooseStandardProduct(dataProductName: string): Promise&lt;void&gt; {
   await this.page.locator(`[e2e-target-name="standard"][e2e-target-name="${dataProductName}"`]).click()
}
</code></pre></div>
<p dir="auto">Thanks to that solution we can decrease code duplication. Similar solution already have testcafe.</p>