<p dir="auto">I'd like to select second 'text="John"' in the list.</p>
<h3 dir="auto">waitForSelectors</h3>
<p dir="auto">There are quite a few requests for more advanced logic to retrieve elements matching selectors. For example:</p>
<ul dir="auto">
<li>wait for at least one element matching selector and get all matching elements;</li>
<li>wait for at least one element matching selector to be visible and get it.</li>
</ul>
<p dir="auto">Proposal:</p>
<p dir="auto"><code class="notranslate">page.waitForSelectors(selector, countOrPredicate, { state?: 'attached' | 'visible' | 'hidden', filter? }): Promise&lt;ElementHandle[]&gt;</code></p>
<p dir="auto">This method will query all elements matching <code class="notranslate">selector</code>, filter them by them by visibility <code class="notranslate">state</code>, then filter by the <code class="notranslate">filter</code> predicate, and then resolve with remaining elements if there are not less than <code class="notranslate">countOrPredicate</code> of them when it's a number or the predicate returns true.</p>
<p dir="auto">Examples:</p>
<ul dir="auto">
<li><code class="notranslate">page.waitForSelectors('button', 2)</code> - at least two buttons.</li>
<li><code class="notranslate">page.waitForSelectors('button', buttons =&gt; buttons.length &gt;= myButtonsCount)</code> - at least <code class="notranslate">myButtonsCount</code> buttons;</li>
<li><code class="notranslate">page.waitForSelectors('button', 1, { state: 'visible' })</code> - at least one visible button;</li>
<li><code class="notranslate">page.waitForSelectors('button', 3, { state: 'visible', filter: b =&gt; !b.disabled })</code> - at least three visible and enabled buttons.</li>
</ul>
<h3 dir="auto">selectors.visible</h3>
<p dir="auto">There are requests to match not the first element, but the first visible one. This is more flaky and the preferred way is to use a stable selector the uniquely identifies the visible target element. That said, maybe it makes sense to introduce a wrapper that takes a regular selector:</p>
<p dir="auto"><code class="notranslate">selectors.visible('css=div')</code></p>
<p dir="auto">Questions:</p>
<ul dir="auto">
<li>How does this interact with <code class="notranslate">waitForSelector()</code> state option that could be <code class="notranslate">visible | hidden | attached | detached</code>?</li>
</ul>
<h3 dir="auto">selectors.index</h3>
<p dir="auto">This could simplify selecting a particular item from the list.</p>
<p dir="auto">Examples:</p>
<ul dir="auto">
<li><code class="notranslate">page.click(selectors.index('.my-list-item', 3))</code> - click at the third list item;</li>
<li><code class="notranslate">page.waitForSelector(selectors.index('button', 2))</code> - wait until there are at least two buttons.</li>
</ul>