<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.32.0</li>
<li>Operating System: macOS 13.0</li>
<li>Browser: Chromium</li>
<li>Reference Discord Thread: <a href="https://discord.com/channels/807756831384403968/1088760461471776888" rel="nofollow">https://discord.com/channels/807756831384403968/1088760461471776888</a></li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/10390627/227490636-4ac4d734-3cfb-4e46-a535-5cbae1ae9a59.png"><img width="1512" alt="Screenshot 2023-03-24 at 10 44 29" src="https://user-images.githubusercontent.com/10390627/227490636-4ac4d734-3cfb-4e46-a535-5cbae1ae9a59.png" style="max-width: 100%;"></a></p>
<h3 dir="auto">Reproduction</h3>
<p dir="auto"><a href="https://github.com/lukaskoeller/playwright-ui-reproduction">github:playwright-ui-reproduction</a></p>
<h3 dir="auto">Source code</h3>
<p dir="auto"><strong>Config file</strong></p>
<p dir="auto"><code class="notranslate">@quirion/playwright-config</code></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { PlaywrightTestConfig, devices } from '@playwright/test';

export const PlaywrightConfig: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    headless: true,
    video: 'on-first-retry',
    trace: 'on',
    launchOptions: {
      // devtools: true,
      logger: {
        isEnabled: (name, severity) =&gt; name === 'browser',
        log: (name, severity, message, args) =&gt; console.log(`${name} ${message}`)
      }
    },
  },
  projects: [
    {
      name: 'chromium',
      testDir: './tests/',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      testDir: './tests/',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      testDir: './tests/',
      use: { ...devices['Desktop Safari'] },
    },
  ],
  reporter: [
    ['html', { outputFolder: './reports/playwright-report' }],
    ['junit', { outputFile: './reports/results.xml' }]
  ],
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">PlaywrightTestConfig</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">const</span> <span class="pl-smi">PlaywrightConfig</span>: <span class="pl-smi">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">forbidOnly</span>: <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span><span class="pl-kos">,</span>
  <span class="pl-c1">retries</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span> ? <span class="pl-c1">2</span> : <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">headless</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">video</span>: <span class="pl-s">'on-first-retry'</span><span class="pl-kos">,</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'on'</span><span class="pl-kos">,</span>
    <span class="pl-c1">launchOptions</span>: <span class="pl-kos">{</span>
      <span class="pl-c">// devtools: true,</span>
      <span class="pl-c1">logger</span>: <span class="pl-kos">{</span>
        <span class="pl-en">isEnabled</span>: <span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">severity</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">name</span> <span class="pl-c1">===</span> <span class="pl-s">'browser'</span><span class="pl-kos">,</span>
        <span class="pl-en">log</span>: <span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">severity</span><span class="pl-kos">,</span> <span class="pl-s1">message</span><span class="pl-kos">,</span> <span class="pl-s1">args</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">name</span><span class="pl-kos">}</span></span> <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">message</span><span class="pl-kos">}</span></span>`</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-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">testDir</span>: <span class="pl-s">'./tests/'</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-c1">name</span>: <span class="pl-s">'firefox'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'./tests/'</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 Firefox'</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-c1">name</span>: <span class="pl-s">'webkit'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'./tests/'</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 Safari'</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-c1">reporter</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span><span class="pl-s">'html'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">outputFolder</span>: <span class="pl-s">'./reports/playwright-report'</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s">'junit'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">outputFile</span>: <span class="pl-s">'./reports/results.xml'</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"><code class="notranslate">playwright.config.ts</code></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { PlaywrightConfig } from &quot;@quirion/playwright-config&quot;;
import { devices, PlaywrightTestConfig } from &quot;@playwright/test&quot;;
import { BANKING_URL } from &quot;@quirion/fe-tests&quot;; // 'http://127.0.0.1:3000'
// eslint-disable-next-line import/no-extraneous-dependencies
import dotenv from 'dotenv';

dotenv.config();

const config: PlaywrightTestConfig = {
  ...PlaywrightConfig,
  use: {
    ...PlaywrightConfig.use,
    baseURL: process.env.CI_ENVIRONMENT_URL || BANKING_URL,
  },
  projects: [
    {
      name: 'chromium',
      testDir: './tests/',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
export default config;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">PlaywrightConfig</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@quirion/playwright-config"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">devices</span><span class="pl-kos">,</span> <span class="pl-smi">PlaywrightTestConfig</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">import</span> <span class="pl-kos">{</span> <span class="pl-smi">BANKING_URL</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@quirion/fe-tests"</span><span class="pl-kos">;</span> <span class="pl-c">// 'http://127.0.0.1:3000'</span>
<span class="pl-c">// eslint-disable-next-line import/no-extraneous-dependencies</span>
<span class="pl-k">import</span> <span class="pl-s1">dotenv</span> <span class="pl-k">from</span> <span class="pl-s">'dotenv'</span><span class="pl-kos">;</span>

<span class="pl-s1">dotenv</span><span class="pl-kos">.</span><span class="pl-en">config</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-smi">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  ...<span class="pl-smi">PlaywrightConfig</span><span class="pl-kos">,</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    ...<span class="pl-smi">PlaywrightConfig</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">,</span>
    <span class="pl-c1">baseURL</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI_ENVIRONMENT_URL</span> <span class="pl-c1">||</span> <span class="pl-smi">BANKING_URL</span><span class="pl-kos">,</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">testDir</span>: <span class="pl-s">'./tests/'</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-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">config</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="it('should check the box using setChecked', async ({ page }) =&gt; {
  await page.setContent(`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should check the box using setChecked'</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-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setContent</span><span class="pl-kos">(</span><span class="pl-s">`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">check</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeChecked</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>Steps</strong></p>
<ul dir="auto">
<li>In the monorepo route from the root to the package's root</li>
<li>Run <code class="notranslate">pnpm dlx playwright test --ui</code></li>
<li>Playwright UI opens</li>
<li>Pick any test &amp; click on the run icon</li>
<li>Test runs through and shows checkmark (success)</li>
<li>In the <code class="notranslate">Actions</code> tab no actions were listed</li>
<li>The browser remains on <code class="notranslate">about:blank</code></li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Playwright Actions lists all actions of the test and the browser previews what the test is doing.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">The test runs, but no actions or browser actions are visible.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.32.3</li>
<li>Operating System: Ubuntu 20</li>
<li>Browser: Firefox</li>
<li>Other info: I use <code class="notranslate">mcr.microsoft.com/playwright:v1.32.3-focal</code> image</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">Component <a href="https://github.com/VKCOM/VKUI/blob/117227b6f196abb7ed2c25e58a3032d69e5e1674/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e.tsx">packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e.tsx</a></p>
<p dir="auto">My config <a href="https://github.com/VKCOM/VKUI/blob/117227b6f196abb7ed2c25e58a3032d69e5e1674/packages/vkui/playwright-ct.config.ts">packages/vkui/playwright-ct.config.ts</a></p>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto"><a href="https://github.com/VKCOM/VKUI/">https://github.com/VKCOM/VKUI/</a></p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Install Docker before</li>
<li>Remove this workaround <a href="https://github.com/VKCOM/VKUI/blob/117227b6f196abb7ed2c25e58a3032d69e5e1674/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e.tsx#L13">packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e.tsx#L13</a></li>
</ul>
<p dir="auto">(you can run next commands from root directory or <code class="notranslate">package/vkui</code>)</p>
<ul dir="auto">
<li>Run <code class="notranslate">yarn install</code></li>
<li>Run <code class="notranslate">yarn test:e2e</code></li>
</ul>
<blockquote>
<p dir="auto">Additionally, u can use <code class="notranslate">.env</code> file for set projects and test match</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="cp packages/vkui/.env.developent.local packages/vkui/.env"><pre class="notranslate"><code class="notranslate">cp packages/vkui/.env.developent.local packages/vkui/.env
</code></pre></div>
</blockquote>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">SegmentedControl.e2e.tsx and all another tests are passed.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Sometimes <code class="notranslate">SegmentedControl.e2e.tsx</code> is failing.</p>
<p dir="auto">BUT! If we run only <code class="notranslate">SegmentedControl.e2e.tsx</code> test this is passing <g-emoji class="g-emoji" alias="thinking" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f914.png">🤔</g-emoji></p>
<h4 dir="auto">Workaround</h4>
<p dir="auto">I reset for <code class="notranslate">SegmentedControl.e2e.tsx</code> test mouse position.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await page.hover('body', { position: { x: 0, y: 0 } });"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">hover</span><span class="pl-kos">(</span><span class="pl-s">'body'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">position</span>: <span class="pl-kos">{</span> <span class="pl-c1">x</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">y</span>: <span class="pl-c1">0</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>