Issue 1:
System info

Playwright Version: [v1.34.3]

Operating System: [Ubuntu 20]

Browser: [Firefox]

Other info:

Source code

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

Link to the GitHub repository with the repro

or

Config file

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

Test file (self-contained)

test.describe('Monitoring', () => {
test('CT050 - Scenario: [MONITORING] View workflow with event activity', async () => {
//Given I am Administrator on HomePage
await loginPage.Login(ADMIN_PORTAL, PASSWORD);
//And access the Monitoring screen
await indexPage.MenuMonitoring();
})

})

Steps

async Login(login, password) {

await this.page.goto('')

await expect(this.headFullfillmentone).toBeVisible();

await expect(this.headSuiteNossis).toBeVisible();

await this.inputUsername.fill(login)

await this.inputPassword.fill(password)

await this.btLogin.click();

await expect(this.page).toHaveTitle('Fulfillment One')

}

async MenuMonitoring() {

await expect(this.menuMonitoring).toBeVisible();

await this.menuMonitoring.click();

await expect(this.btEnterMonitoring).toBeVisible();

await this.btEnterMonitoring.click();

await expect(this.breadcrumbMonitoring).toBeVisible();

}

Expected

the step should be working

Actual

The Firefox crashed in the "toBeVisible".

Video of the test bellow:

-- slowmotion 2000

15c0b18e70982a985fda43b63c46a82d0a04dc4a.webm

And then, I executed in slowmotion 1000, and failed

76fa1cac650d66220f0546e5bf69623f3bc147dc.webm

Its hard to get the error

But sometimes i could get

And this is the error:

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.

Issue 2:
System info

Playwright Version: v1.34.3

Operating System: macOS 13.4

Browser: Chromium

Other info: Vue component testing

Source code

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

Config file

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

Test file (self-contained)

import { expect, test } from '@playwright/experimental-ct-vue';
import Sample from '../Sample.vue';

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

const component = await mount(Sample, {
props: {
foo,
bar,
},
});
});

Steps

Run the test

Expected

I can pass a callback, an object containing callbacks or a JSHandle (So I can worry about the node vs browser differences myself via evaluateHandle as props.

Actual

Error: The mount function props are not JSON serializable.