<p dir="auto">It would be nice to have a feature for <code class="notranslate">page.selectOption</code> that is similar to what was done in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="736364890" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/4342" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/playwright/pull/4342/hovercard" href="https://github.com/microsoft/playwright/pull/4342">#4342</a>. It would allow us to target a <code class="notranslate">&lt;select&gt;</code> based on the accompanying label.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;label for=&quot;my-select&quot;&gt;Choose a color&lt;/label&gt;
&lt;select id=&quot;my-select&quot;&gt;
  &lt;option value=&quot;red&quot;&gt;Red&lt;/option&gt;
  &lt;option value=&quot;blue&quot;&gt;Blue&lt;/option&gt;
&lt;/select&gt;

await page.selectOption('text=&quot;Choose a color&quot;', 'blue');"><pre class="notranslate"><code class="notranslate">&lt;label for="my-select"&gt;Choose a color&lt;/label&gt;
&lt;select id="my-select"&gt;
  &lt;option value="red"&gt;Red&lt;/option&gt;
  &lt;option value="blue"&gt;Blue&lt;/option&gt;
&lt;/select&gt;

await page.selectOption('text="Choose a color"', 'blue');
</code></pre></div>
<p dir="auto">It would be amazing to have something similar to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="678933999" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/3466" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/3466/hovercard" href="https://github.com/microsoft/playwright/issues/3466">#3466</a> but for <code class="notranslate">&lt;select&gt;</code> elements.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;label for=&quot;pet-select&quot;&gt;Choose a pet&lt;/label&gt;
&lt;select id=&quot;pet-select&quot;&gt;
    &lt;option value=&quot;dog&quot;&gt;Dog&lt;/option&gt;
    &lt;option value=&quot;cat&quot;&gt;Cat&lt;/option&gt;
&lt;/select&gt;"><pre class="notranslate"><code class="notranslate">&lt;label for="pet-select"&gt;Choose a pet&lt;/label&gt;
&lt;select id="pet-select"&gt;
    &lt;option value="dog"&gt;Dog&lt;/option&gt;
    &lt;option value="cat"&gt;Cat&lt;/option&gt;
&lt;/select&gt;
</code></pre></div>
<p dir="auto">Then allow using <code class="notranslate">await page.selectOption('text=Choose a pet', 'dog')</code></p>