<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32</li>
<li>Operating System: macOS 13.2</li>
<li>Browser: All</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">defineConfig</span><span class="pl-kos">,</span> <span class="pl-s1">devices</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/test'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">defineConfig</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">projects</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'chromium'</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-kos">{</span> ...<span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">'Desktop Chrome'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</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"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// cmp.test.ts
import test from '@playwright/test'

enum URLs {
  FR = 'https://www.vinted.fr',
  LT = 'https://www.vinted.lt',
  DE = 'https://www.vinted.de',
}

test.describe('cookies', () =&gt; {
  for (const [country, baseURL] of Object.entries(URLs)) {
    test.describe(() =&gt; {
      test.use({ baseURL })

      test(`test accepting cookies in ${country}`, async ({ page }) =&gt; {
        // test
      })
    })
  }
})"><pre class="notranslate"><span class="pl-c">// cmp.test.ts</span>
<span class="pl-k">import</span> <span class="pl-s1">test</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/test'</span>

<span class="pl-s1">enum</span> <span class="pl-v">URLs</span> <span class="pl-kos">{</span>
  <span class="pl-c1">FR</span> <span class="pl-c1">=</span> <span class="pl-s">'https://www.vinted.fr'</span><span class="pl-kos">,</span>
  <span class="pl-c1">LT</span> <span class="pl-c1">=</span> <span class="pl-s">'https://www.vinted.lt'</span><span class="pl-kos">,</span>
  <span class="pl-c1">DE</span> <span class="pl-c1">=</span> <span class="pl-s">'https://www.vinted.de'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'cookies'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">country</span><span class="pl-kos">,</span> <span class="pl-s1">baseURL</span><span class="pl-kos">]</span> <span class="pl-k">of</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">entries</span><span class="pl-kos">(</span><span class="pl-v">URLs</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-kos">{</span> baseURL <span class="pl-kos">}</span><span class="pl-kos">)</span>

      <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">`test accepting cookies in <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">country</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-c">// test</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</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"><strong>Expected</strong></p>
<ul dir="auto">
<li>Test names in UI mode to be displayed the same like in VS Code plugin - with variable names.</li>
<li>All parameterized tests to be displayed</li>
</ul>
<p dir="auto">VS Code plugin <g-emoji class="g-emoji" alias="green_circle" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f7e2.png">🟢</g-emoji><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17873445/227503940-f2308580-62e8-4734-b666-6c125ba17026.png"><img src="https://user-images.githubusercontent.com/17873445/227503940-f2308580-62e8-4734-b666-6c125ba17026.png" alt="SCR-20230324-i0j" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Actual</strong><br>
Currently it shows one correct name plus nested titles with project name but those do not run the tests.</p>
<p dir="auto">UI Mode 🔴<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17873445/227504963-569fc5a5-1141-4bf5-ab30-67caf4395c7b.png"><img width="419" alt="SCR-20230324-i5o" src="https://user-images.githubusercontent.com/17873445/227504963-569fc5a5-1141-4bf5-ab30-67caf4395c7b.png" style="max-width: 100%;"></a></p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.35.0]</li>
<li>Operating System: [All]</li>
<li>Browser: [Chromium]</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto">In our application we have toggle button that looks like this:<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/13851264/250511642-6bf5fa79-b9b3-4e42-b498-20b7aa0d21a9.png"><img src="https://user-images.githubusercontent.com/13851264/250511642-6bf5fa79-b9b3-4e42-b498-20b7aa0d21a9.png" alt="image" style="max-width: 100%;"></a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;custom-togglebtn&gt;
    &lt;label class=&quot;custom-togglebtn__label&quot;&gt;
        &lt;input class=&quot;custom-togglebtn__input&gt;
        &lt;span class=&quot;custom-togglebtn__icon&quot;&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="custom-togglebtn&gt;
    &lt;label class="custom-togglebtn__label"&gt;
        &lt;input class="custom-togglebtn__input&gt;
        &lt;span class="custom-togglebtn__icon"&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">I see in docs that Locator.setChecked() should be used only for 'checkbox or a radio element' but in common toggle element is a checkbox.<br>
When I use <code class="notranslate">Locator.setChecked()</code> method to 'check' or 'uncheck' the toggle (page.locator('div.custom-togglebtn')) -&gt; <strong>it works in reverse</strong>.<br>
What I mean:</p>
<ul dir="auto">
<li>setChecked(true) disables the toggle</li>
<li>setChecked(false) enables the toggle</li>
</ul>
<p dir="auto"><strong>Steps</strong><br>
Try to enable a toggle element using Locator.setChecked(true)</p>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Toggle is enabled</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Toggle is disabled</p>