<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.33.0</li>
<li>Operating System: macOs 13.1</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto">I have a basic bootstrap 'switch' toggle element that is not 'checkable' using PW. It looks like this when it renders and comes out of a <code class="notranslate">CustomInput</code> provided by react-strap which uses Bootstrap4</p>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/78635/237971536-bc3e1010-62b7-4af9-8838-a866599c690e.png"><img width="45" alt="Screenshot 2023-05-12 at 14 31 28" src="https://user-images.githubusercontent.com/78635/237971536-bc3e1010-62b7-4af9-8838-a866599c690e.png" style="max-width: 100%;"></a>
<p dir="auto">The underlying HTML for it ends up being this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input type=&quot;checkbox&quot; id=&quot;foo&quot; name=&quot;someName&quot; class=&quot;custom-control-input&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;input type="checkbox" id="foo" name="someName" class="custom-control-input"&gt;
</code></pre></div>
<p dir="auto">I have tried the following below but PW times out after trying for 50 times to check the toggle</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.locator('#foo').setChecked(true)
await page.locator('#foo').check()
await page.locator('#foo').click()"><pre class="notranslate"><code class="notranslate">await page.locator('#foo').setChecked(true)
await page.locator('#foo').check()
await page.locator('#foo').click()
</code></pre></div>
<p dir="auto">If I change the toggle to become not a switch but a regular checkbox, then the HTML changes to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input id=&quot;foo&quot; name=&quot;someName&quot; label=&quot;My Label&quot; type=&quot;checkbox&quot; class=&quot;form-check-input&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;input id="foo" name="someName" label="My Label" type="checkbox" class="form-check-input"&gt;
</code></pre></div>
<p dir="auto">Then PW has no problem checking the checkbox.</p>
<p dir="auto">Is it possible to also use PW to 'check' toggle elements (that are just checkboxes under the hood) or is that not supported?</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32</li>
<li>Operating System: Mac</li>
<li>Browser: [All, Chromium, Firefox, WebKit]</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul dir="auto">
<li>[ x ] I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto">test('checkboxes should be nicer in light mode when system is set to dark', async ({ page }) =&gt; {<br>
await page.setContent(<code class="notranslate">&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;</code>);<br>
await page.getByRole('checkbox').check();<br>
await expect(page.getByRole('checkbox')).toBeChecked();<br>
});</p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>set system to dark mode</li>
<li>Open UI mode</li>
<li>Toggle light and dark mode</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">check boxes should not be dark when in light mode</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13063165/227211523-e9743476-701c-4e64-b582-f7c6747b0b25.png"><img width="308" alt="Screenshot 2023-03-23 at 13 58 17" src="https://user-images.githubusercontent.com/13063165/227211523-e9743476-701c-4e64-b582-f7c6747b0b25.png" style="max-width: 100%;"></a></p>