<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.31]</li>
<li>Operating System: [All]</li>
<li>Browser: [All]</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"><a href="https://github.com/BMayhew/playwright-demo">https://github.com/BMayhew/playwright-demo</a></p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Run the test in this sample repo in local mode, you could run just single smoke test npx playwright test -g "Register a new user <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/smoke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/smoke">@smoke</a>"</li>
<li>observe the test time it took including tear down time, lets call it A</li>
<li>Now start a playwright server on some different remote machine</li>
<li>Now, change the config to run the same test with connectOption with remote browser url</li>
<li>Observe the test time it took including tear down time, lets call B</li>
<li>Now, turn off tracing and rerun the test</li>
<li>Observe the test time and tear down time again, lets call it C</li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
Time increase should between B and C should not be abnormally high.</p>
<p dir="auto"><strong>Actual</strong><br>
Time increases drastically for just 6MB of trace file, for 30sec test it increased to 2-3 mins.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.36.2</li>
<li>Operating System: macOS 13.3</li>
<li>Browser: Chrome</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>TypeScript config</strong></p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;compileOnSave&quot;: false,
  &quot;compilerOptions&quot;: {
    &quot;allowJs&quot;: true,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;removeComments&quot;: false,
    &quot;preserveConstEnums&quot;: true,
    &quot;sourceMap&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;typeRoots&quot;: [&quot;./node_modules/@types&quot;],
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;
  },
  &quot;exclude&quot;: [
    &quot;node_modules&quot;,
    &quot;**/*.spec.ts&quot;,
    &quot;**/*.spec.tsx&quot;,
    &quot;**/*.test.ts&quot;,
    &quot;**/*.test.tsx&quot;
  ],
  &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;]
}"><pre class="notranslate">{
  <span class="pl-ent">"compileOnSave"</span>: <span class="pl-c1">false</span>,
  <span class="pl-ent">"compilerOptions"</span>: {
    <span class="pl-ent">"allowJs"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"allowSyntheticDefaultImports"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>preserve<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"removeComments"</span>: <span class="pl-c1">false</span>,
    <span class="pl-ent">"preserveConstEnums"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"sourceMap"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"skipLibCheck"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"baseUrl"</span>: <span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"typeRoots"</span>: [<span class="pl-s"><span class="pl-pds">"</span>./node_modules/@types<span class="pl-pds">"</span></span>],
    <span class="pl-ent">"forceConsistentCasingInFileNames"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"noEmit"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"resolveJsonModule"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"isolatedModules"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>preserve<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"exclude"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>node_modules<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>**/*.spec.ts<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>**/*.spec.tsx<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>**/*.test.ts<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>**/*.test.tsx<span class="pl-pds">"</span></span>
  ],
  <span class="pl-ent">"include"</span>: [<span class="pl-s"><span class="pl-pds">"</span>next-env.d.ts<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>**/*.ts<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>**/*.tsx<span class="pl-pds">"</span></span>]
}</pre></div>
<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({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  testMatch: '*.pw.ts',
  use: {
    baseURL: 'http://localhost:1234',
    trace: 'on-first-retry',
  },
  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/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">testDir</span>: <span class="pl-s">'./tests'</span><span class="pl-kos">,</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</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">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-c1">reporter</span>: <span class="pl-s">'html'</span><span class="pl-kos">,</span>
  <span class="pl-c1">testMatch</span>: <span class="pl-s">'*.pw.ts'</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-s">'http://localhost:1234'</span><span class="pl-kos">,</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'on-first-retry'</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">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">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">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-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="import { test, expect } from '@playwright/test';

import { entityMock } from 'src/pages/SomePage/__mocks__/entity';

const reference = 'somereference';

test.beforeEach(async ({ context, page }) =&gt; {
  await context.addCookies([
    {
      name: 'user_id',
      value: 'sometoken',
      domain: 'localhost',
      path: '/',
    },
  ]);

  await page.route(
    `/some/path/${reference}`,
    async (route) =&gt; {
      await route.fulfill({ json: entityMock });
    }
  );

  await page.goto(`/en/some/path/${reference}`);
});

test('has title', async ({ page }) =&gt; {
  await expect(page).toHaveTitle(`Entity ${reference}`);
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span><span class="pl-kos">,</span> <span class="pl-s1">expect</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-s1">entityMock</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'src/pages/SomePage/__mocks__/entity'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">reference</span> <span class="pl-c1">=</span> <span class="pl-s">'somereference'</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> context<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">context</span><span class="pl-kos">.</span><span class="pl-en">addCookies</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">'user_id'</span><span class="pl-kos">,</span>
      <span class="pl-c1">value</span>: <span class="pl-s">'sometoken'</span><span class="pl-kos">,</span>
      <span class="pl-c1">domain</span>: <span class="pl-s">'localhost'</span><span class="pl-kos">,</span>
      <span class="pl-c1">path</span>: <span class="pl-s">'/'</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">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span>
    <span class="pl-s">`/some/path/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">reference</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-s1">route</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">route</span><span class="pl-kos">.</span><span class="pl-en">fulfill</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">json</span>: <span class="pl-s1">entityMock</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">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">`/en/some/path/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">reference</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-en">test</span><span class="pl-kos">(</span><span class="pl-s">'has title'</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-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveTitle</span><span class="pl-kos">(</span><span class="pl-s">`Entity <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">reference</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></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Create module <code class="notranslate">src/pages/SomePage/__mocks__/entity</code> exporting an object called <code class="notranslate">entity</code>.</li>
<li>Run the test with <code class="notranslate">PW_EXPERIMENTAL_TS_ESM=1 yarn playwright test</code>.</li>
<li>Test run fails with error "Invalid or unexpected token" on line 3 of test file.</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Import statements are resolved correctly and test runs successfully.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Import syntax seems to be considered invalid only for local modules because it works for <code class="notranslate">@playwright/test</code>.</p>
<p dir="auto">I have a lot of utilities for mocks and generating URLs that I <strong>need</strong> to use in tests. This is possible with Cypress but I don't seem to find a way to do this with Playwright. How can this issue be fixed?</p>