Issue 1:
System info

Playwright Version: [v1.31]

Operating System: [All]

Browser: [All]

Other info:

Source code

I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/BMayhew/playwright-demo

Steps

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 @smoke"

observe the test time it took including tear down time, lets call it A

Now start a playwright server on some different remote machine

Now, change the config to run the same test with connectOption with remote browser url

Observe the test time it took including tear down time, lets call B

Now, turn off tracing and rerun the test

Observe the test time and tear down time again, lets call it C

Expected

Time increase should between B and C should not be abnormally high.

Actual

Time increases drastically for just 6MB of trace file, for 30sec test it increased to 2-3 mins.

Issue 2:
System info

Playwright Version: 1.36.2

Operating System: macOS 13.3

Browser: Chrome

Source code

I provided exact source code that allows reproducing the issue locally.

TypeScript config

{
"compileOnSave": false,
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "preserve",
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"baseUrl": ".",
"typeRoots": ["./node_modules/@types"],
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/*.test.ts",
"**/*.test.tsx"
],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Config file

// 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'] },
},
],
});

Test file (self-contained)

import { test, expect } from '@playwright/test';

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

const reference = 'somereference';

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

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

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

test('has title', async ({ page }) => {
await expect(page).toHaveTitle(`Entity ${reference}`);
});

Steps

Create module src/pages/SomePage/__mocks__/entity exporting an object called entity.

Run the test with PW_EXPERIMENTAL_TS_ESM=1 yarn playwright test.

Test run fails with error "Invalid or unexpected token" on line 3 of test file.

Expected

Import statements are resolved correctly and test runs successfully.

Actual

Import syntax seems to be considered invalid only for local modules because it works for @playwright/test.

I have a lot of utilities for mocks and generating URLs that I need 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?