Issue 1:
Context:

GOOD Playwright Version: 1.27.0

BAD Playwright Version: 1.28.0

Operating System: Windows and Linux both tested

Extra: Using the Chromium browser

var playwright = await Playwright.CreateAsync();
var browser = await playwright.Chromium.LaunchAsync();
await using IBrowserContext context = await browser.NewContextAsync();
var webPage = await context.NewPageAsync();
var response =
await webPage.GotoAsync(
model.Url!,
new PageGotoOptions()
{
Timeout = model.PageLoadTimeout,
WaitUntil = WaitUntilState.Load
});
// Wait for a custom selector to ensure rendering is finished, if provided
await webPage.WaitForSelectorAsync(
model.WaitFor,
new PageWaitForSelectorOptions()
{
State = WaitForSelectorState.Attached
});

return await webPage.PdfAsync(
new PagePdfOptions()
{
DisplayHeaderFooter = model.Pdf?.DisplayHeaderFooter,
Format = model.Pdf?.Format,
Height = model.Pdf?.Height,
Landscape = model.Pdf?.Landscape,
PageRanges = model.Pdf?.PageRanges,
PreferCSSPageSize = model.Pdf?.PreferCssPageSize,
PrintBackground = model.Pdf?.PrintBackground,
Margin = GetMargin(model.Pdf?.Margin),
Scale = model.Pdf?.Scale,
Width = model.Pdf?.Width
});

Describe the bug

We are using Playwright to generate PDFs of internal web pages. When we upgraded to 1.28.0, we discovered that pages that rendered into PDFs with multiple pages (tough to determine an exact breaking point, but certainly at 3 PDF pages) started cutting off at the bottom.

Issue 2:
System info

Playwright Version: ^1.36.1

Operating System: macOS 13.4.1

Browser: Chromium

Other info: React 17

Source code

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

Link to the GitHub repository with the repro

[https://github.com/your_profile/playwright_issue_title]

or

Config file

// playwright-ct.config.ts
import { defineConfig, devices } from '@playwright/experimental-ct-react17';

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './src/pages/ExperimentEditPage/Sections/About/',
/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
// grep: /spec/,
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,
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
});

Test file (self-contained)

// About.spec.tsx
import React from 'react';

import { test } from '@playwright/experimental-ct-react17';

import About from './About';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount, page }) => {
await page.route('**/request/*', async route => {
const json = { tags: { category: 'GENERAL', name: '' } };
await route.fulfill({ json });
});

const component = await mount(<About />);
});

Component file

// About.tsx
import React from 'react';

import { useQuery } from 'react-query';

import { TagCategories } from '../../../../modules/tag/domain/tag.utils';
import tagQueryClient from '../../../../modules/tag/tag.queryClient';

export default function About() {
useQuery(tagQueryClient.listCategoryTags(TagCategories.GENERAL));
return <></>;
}

// playwright/index.tsx
import { beforeMount } from '@playwright/experimental-ct-react17/hooks';
import { QueryClientProvider, QueryClient } from 'react-query';
import React from 'react';

const AppContext = React.createContext(null);

beforeMount(async ({ App, hooksConfig }) => {
return (
<QueryClientProvider client={new QueryClient()}>
<AppContext.Provider value={null}>
<App />
</AppContext.Provider>
</QueryClientProvider>
);
});

Steps

run the test

Expected

In the console where I run the test see "1 passed" green text

Actual

In the console where I run the test I see

Error: ReferenceError: require is not defined

at http://localhost:3100/assets/http-8b81c8aa.js:129045:19
at /Users/elizavetas/Documents/backstage-frontend/plugins/experiment-planner/http:/localhost:3100/assets/http-8b81c8aa.js:129045:19
at mount (/Users/elizavetas/Documents/backstage-frontend/node_modules/@playwright/experimental-ct-core/lib/mount.js:50:35)
at /Users/elizavetas/Documents/backstage-frontend/plugins/experiment-planner/src/pages/ExperimentEditPage/Sections/About/About.spec.tsx:106:27

Comment: it works though if instead of a normal request I mock a sample Promise inside the useQuery hook