<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.34.3]</li>
<li>Operating System: [Ubuntu 20]</li>
<li>Browser: [Firefox]</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"> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto">or</p>
<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';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * See https://playwright.dev/docs/test-configuration.
 */

export default defineConfig({
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 15000
  },
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  //workers: process.env.CI ? 1 : undefined,
  workers:  8,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    // video: 'on',
    // launchOptions:{
    //   slowMo: 1500
    // },
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: process.env.BASE_URL,
    //viewport: null,
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
    headless:true,
    screenshot:'on'
  },



  /* Configure projects for major browsers */
  projects: [
    // {
    //   name: 'chromium',
    //   use: { ...devices['Desktop Chrome'],
    //   viewport:{width:1920,height:1080}
    //   //viewport:{width:1368,height:768}
    //  },
    // },

    {
     name: 'firefox',
     use: { ...devices['Desktop Firefox'],
     viewport:{width:1920,height:1080}
      },
    },

    
    // {
    // name: 'webkit',
    // use: { ...devices['Desktop Safari'],
    // viewport:{width:1920,height:1080} 
    //   },
    // },

    /* Test against mobile viewports. */
    //{
    //  name: 'Mobile Chrome',
    //  use: { ...devices['Pixel 5'] },
    //},
    //{
    //  name: 'Mobile Safari',
    //  use: { ...devices['iPhone 12'] },
    //},

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { channel: 'chrome' },
    // },
  ],

  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
  // outputDir: 'test-results/',

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   port: 3000,
  // },
});
"><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-c">/**</span>
<span class="pl-c"> * Read environment variables from file.</span>
<span class="pl-c"> * https://github.com/motdotla/dotenv</span>
<span class="pl-c"> */</span>
<span class="pl-c">// require('dotenv').config();</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * See https://playwright.dev/docs/test-configuration.</span>
<span class="pl-c"> */</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">testDir</span>: <span class="pl-s">'./tests'</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Maximum time one test can run for. */</span>
  <span class="pl-c1">timeout</span>: <span class="pl-c1">30</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span>
  <span class="pl-c1">expect</span>: <span class="pl-kos">{</span>
    <span class="pl-c">/**</span>
<span class="pl-c">     * Maximum time expect() should wait for the condition to be met.</span>
<span class="pl-c">     * For example in `await expect(locator).toHaveText();`</span>
<span class="pl-c">     */</span>
    <span class="pl-c1">timeout</span>: <span class="pl-c1">15000</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Run tests in files in parallel */</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Fail the build on CI if you accidentally left test.only in the source code. */</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-c">/* Retry on CI only */</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-c">/* Opt out of parallel tests on CI. */</span>
  <span class="pl-c">//workers: process.env.CI ? 1 : undefined,</span>
  <span class="pl-c1">workers</span>:  <span class="pl-c1">8</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Reporter to use. See https://playwright.dev/docs/test-reporters */</span>
  <span class="pl-c1">reporter</span>: <span class="pl-s">'html'</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c">/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */</span>
    <span class="pl-c1">actionTimeout</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c">// video: 'on',</span>
    <span class="pl-c">// launchOptions:{</span>
    <span class="pl-c">//   slowMo: 1500</span>
    <span class="pl-c">// },</span>
    <span class="pl-c">/* Base URL to use in actions like `await page.goto('/')`. */</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">BASE_URL</span><span class="pl-kos">,</span>
    <span class="pl-c">//viewport: null,</span>
    <span class="pl-c">/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'on-first-retry'</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">screenshot</span>:<span class="pl-s">'on'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>



  <span class="pl-c">/* Configure projects for major browsers */</span>
  <span class="pl-c1">projects</span>: <span class="pl-kos">[</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'chromium',</span>
    <span class="pl-c">//   use: { ...devices['Desktop Chrome'],</span>
    <span class="pl-c">//   viewport:{width:1920,height:1080}</span>
    <span class="pl-c">//   //viewport:{width:1368,height:768}</span>
    <span class="pl-c">//  },</span>
    <span class="pl-c">// },</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">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-c1">viewport</span>:<span class="pl-kos">{</span><span class="pl-c1">width</span>:<span class="pl-c1">1920</span><span class="pl-kos">,</span><span class="pl-c1">height</span>:<span class="pl-c1">1080</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-c">// {</span>
    <span class="pl-c">// name: 'webkit',</span>
    <span class="pl-c">// use: { ...devices['Desktop Safari'],</span>
    <span class="pl-c">// viewport:{width:1920,height:1080} </span>
    <span class="pl-c">//   },</span>
    <span class="pl-c">// },</span>

    <span class="pl-c">/* Test against mobile viewports. */</span>
    <span class="pl-c">//{</span>
    <span class="pl-c">//  name: 'Mobile Chrome',</span>
    <span class="pl-c">//  use: { ...devices['Pixel 5'] },</span>
    <span class="pl-c">//},</span>
    <span class="pl-c">//{</span>
    <span class="pl-c">//  name: 'Mobile Safari',</span>
    <span class="pl-c">//  use: { ...devices['iPhone 12'] },</span>
    <span class="pl-c">//},</span>

    <span class="pl-c">/* Test against branded browsers. */</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Microsoft Edge',</span>
    <span class="pl-c">//   use: { channel: 'msedge' },</span>
    <span class="pl-c">// },</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Google Chrome',</span>
    <span class="pl-c">//   use: { channel: 'chrome' },</span>
    <span class="pl-c">// },</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>

  <span class="pl-c">/* Folder for test artifacts such as screenshots, videos, traces, etc. */</span>
  <span class="pl-c">// outputDir: 'test-results/',</span>

  <span class="pl-c">/* Run your local dev server before starting the tests */</span>
  <span class="pl-c">// webServer: {</span>
  <span class="pl-c">//   command: 'npm run start',</span>
  <span class="pl-c">//   port: 3000,</span>
  <span class="pl-c">// },</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="test.describe('Monitoring', () =&gt; {   
   test('CT050 - Scenario: [MONITORING] View workflow with event activity', async () =&gt; {
      //Given I am Administrator on HomePage
      await loginPage.Login(ADMIN_PORTAL, PASSWORD);
      //And access the Monitoring screen
      await indexPage.MenuMonitoring();
   })

})"><pre class="notranslate"><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">'Monitoring'</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-en">test</span><span class="pl-kos">(</span><span class="pl-s">'CT050 - Scenario: [MONITORING] View workflow with event activity'</span><span class="pl-kos">,</span> <span class="pl-k">async</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-c">//Given I am Administrator on HomePage</span>
      <span class="pl-k">await</span> <span class="pl-s1">loginPage</span><span class="pl-kos">.</span><span class="pl-en">Login</span><span class="pl-kos">(</span><span class="pl-c1">ADMIN_PORTAL</span><span class="pl-kos">,</span> <span class="pl-c1">PASSWORD</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-c">//And access the Monitoring screen</span>
      <span class="pl-k">await</span> <span class="pl-s1">indexPage</span><span class="pl-kos">.</span><span class="pl-en">MenuMonitoring</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>Steps</strong><br>
async Login(login, password) {<br>
await this.page.goto('')<br>
await expect(this.headFullfillmentone).toBeVisible();<br>
await expect(this.headSuiteNossis).toBeVisible();<br>
await this.inputUsername.fill(login)<br>
await this.inputPassword.fill(password)<br>
await this.btLogin.click();<br>
await expect(this.page).toHaveTitle('Fulfillment One')<br>
}<br>
async MenuMonitoring() {<br>
await expect(this.menuMonitoring).toBeVisible();<br>
await this.menuMonitoring.click();<br>
await expect(this.btEnterMonitoring).toBeVisible();<br>
await this.btEnterMonitoring.click();<br>
await expect(this.breadcrumbMonitoring).toBeVisible();<br>
}</p>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">the step should be working</p>
<p dir="auto"><strong>Actual</strong><br>
The Firefox  crashed in the "toBeVisible".</p>
<p dir="auto">Video of the test bellow:<br>
-- slowmotion 2000<br>
<a href="https://github.com/microsoft/playwright/assets/126868596/76d60844-6d62-487c-a983-484802a2c7e7">15c0b18e70982a985fda43b63c46a82d0a04dc4a.webm</a></p>
<p dir="auto">And then, I executed in slowmotion 1000, and failed<br>
<a href="https://github.com/microsoft/playwright/assets/126868596/66e975f3-b092-4184-b2d2-6d29e7e62ce5">76fa1cac650d66220f0546e5bf69623f3bc147dc.webm</a></p>
<p dir="auto">Its hard to get the error<br>
But sometimes i could get<br>
And this is the error:<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/126868596/242319092-55cbcc23-e002-4f37-aa6d-1fddf638e9f2.png"><img src="https://user-images.githubusercontent.com/126868596/242319092-55cbcc23-e002-4f37-aa6d-1fddf638e9f2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I try in other sites, and it works, I dont know why, just in my work site, this is not work. My work application was made in Javascript and Angular.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.34.3</li>
<li>Operating System: macOS 13.4</li>
<li>Browser: Chromium</li>
<li>Other info: Vue component testing</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"><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/experimental-ct-vue';
import path from 'path';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './',
  testMatch: /.*(pw)\.(js|ts|mjs)/,
  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
  snapshotDir: './__snapshots__',
  /* Maximum time one test can run for. */
  timeout: 10 * 1000,
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* Port to use for Playwright component endpoint. */
    ctPort: 3100,

    ctViteConfig: {
      resolve: {
        alias: {
          '@': path.join(__dirname, './src'),
        },
      },
    },
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // {
    //   name: 'firefox',
    //   use: { ...devices['Desktop Firefox'] },
    // },
    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },
  ],
});
"><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/experimental-ct-vue'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">path</span> <span class="pl-k">from</span> <span class="pl-s">'path'</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * See https://playwright.dev/docs/test-configuration.</span>
<span class="pl-c"> */</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">testDir</span>: <span class="pl-s">'./'</span><span class="pl-kos">,</span>
  <span class="pl-c1">testMatch</span>: <span class="pl-pds"><span class="pl-c1">/</span>.<span class="pl-c1">*</span><span class="pl-kos">(</span>pw<span class="pl-kos">)</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>ts<span class="pl-c1">|</span>mjs<span class="pl-kos">)</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
  <span class="pl-c">/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */</span>
  <span class="pl-c1">snapshotDir</span>: <span class="pl-s">'./__snapshots__'</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Maximum time one test can run for. */</span>
  <span class="pl-c1">timeout</span>: <span class="pl-c1">10</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Run tests in files in parallel */</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Fail the build on CI if you accidentally left test.only in the source code. */</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-c">/* Retry on CI only */</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-c">/* Opt out of parallel tests on CI. */</span>
  <span class="pl-c1">workers</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">1</span> : <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Reporter to use. See https://playwright.dev/docs/test-reporters */</span>
  <span class="pl-c1">reporter</span>: <span class="pl-s">'html'</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c">/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'on-first-retry'</span><span class="pl-kos">,</span>

    <span class="pl-c">/* Port to use for Playwright component endpoint. */</span>
    <span class="pl-c1">ctPort</span>: <span class="pl-c1">3100</span><span class="pl-kos">,</span>

    <span class="pl-c1">ctViteConfig</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">alias</span>: <span class="pl-kos">{</span>
          <span class="pl-s">'@'</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'./src'</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>

  <span class="pl-c">/* Configure projects for major browsers */</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-c">// {</span>
    <span class="pl-c">//   name: 'firefox',</span>
    <span class="pl-c">//   use: { ...devices['Desktop Firefox'] },</span>
    <span class="pl-c">// },</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'webkit',</span>
    <span class="pl-c">//   use: { ...devices['Desktop Safari'] },</span>
    <span class="pl-c">// },</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-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { expect, test } from '@playwright/experimental-ct-vue';
import Sample from '../Sample.vue';

test('sample', async ({ page, mount }) =&gt; {
  const foo = () =&gt; 123;
  const bar = page.evaluateHandle(() =&gt; {
    return () =&gt; 123;
  });

  const component = await mount(Sample, {
    props: {
      foo,
      bar,
    },
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">expect</span><span class="pl-kos">,</span> <span class="pl-s1">test</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/experimental-ct-vue'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Sample</span> <span class="pl-k">from</span> <span class="pl-s">'../Sample.vue'</span><span class="pl-kos">;</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'sample'</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> mount <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">const</span> <span class="pl-en">foo</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">123</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">bar</span> <span class="pl-c1">=</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">evaluateHandle</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">return</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">123</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">const</span> <span class="pl-s1">component</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-smi">Sample</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
      foo<span class="pl-kos">,</span>
      bar<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>Steps</strong></p>
<ul dir="auto">
<li>Run the test</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">I can pass a callback, an object containing callbacks or a <code class="notranslate">JSHandle</code> (So I can worry about the node vs browser differences myself via <code class="notranslate">evaluateHandle</code> as props.</p>
<p dir="auto"><strong>Actual</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: The mount function props are not JSON serializable."><pre class="notranslate"><code class="notranslate">Error: The mount function props are not JSON serializable.
</code></pre></div>