<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>GOOD Playwright Version: 1.27.0</li>
<li>BAD Playwright Version: 1.28.0</li>
<li>Operating System: Windows and Linux both tested</li>
<li>Extra: Using the Chromium browser</li>
</ul>
<div class="highlight highlight-source-cs notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="        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
            });"><pre class="notranslate">        <span class="pl-smi">var</span> <span class="pl-s1">playwright</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> Playwright<span class="pl-kos">.</span><span class="pl-en">CreateAsync</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">var</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> playwright<span class="pl-kos">.</span>Chromium<span class="pl-kos">.</span><span class="pl-en">LaunchAsync</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-k">using</span> <span class="pl-smi">IBrowserContext</span> <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> browser<span class="pl-kos">.</span><span class="pl-en">NewContextAsync</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">var</span> <span class="pl-s1">webPage</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> context<span class="pl-kos">.</span><span class="pl-en">NewPageAsync</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">var</span> <span class="pl-s1">response</span> <span class="pl-c1">=</span> 
                <span class="pl-k">await</span> webPage<span class="pl-kos">.</span><span class="pl-en">GotoAsync</span><span class="pl-kos">(</span>
                        model<span class="pl-kos">.</span>Url<span class="pl-c1">!</span><span class="pl-kos">,</span>
                        <span class="pl-k">new</span> PageGotoOptions<span class="pl-kos">(</span><span class="pl-kos">)</span>
                        <span class="pl-kos">{</span>
                            <span class="pl-s1">Timeout</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>PageLoadTimeout<span class="pl-kos">,</span>
                            <span class="pl-s1">WaitUntil</span> <span class="pl-c1">=</span> WaitUntilState<span class="pl-kos">.</span>Load
                        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// Wait for a custom selector to ensure rendering is finished, if provided</span>
        <span class="pl-k">await</span> webPage<span class="pl-kos">.</span><span class="pl-en">WaitForSelectorAsync</span><span class="pl-kos">(</span>
            model<span class="pl-kos">.</span>WaitFor<span class="pl-kos">,</span>
            <span class="pl-k">new</span> PageWaitForSelectorOptions<span class="pl-kos">(</span><span class="pl-kos">)</span>
            <span class="pl-kos">{</span>
                <span class="pl-s1">State</span> <span class="pl-c1">=</span> WaitForSelectorState<span class="pl-kos">.</span>Attached
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">return</span> <span class="pl-k">await</span> webPage<span class="pl-kos">.</span><span class="pl-en">PdfAsync</span><span class="pl-kos">(</span>
            <span class="pl-k">new</span> PagePdfOptions<span class="pl-kos">(</span><span class="pl-kos">)</span>
            <span class="pl-kos">{</span>
                <span class="pl-s1">DisplayHeaderFooter</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>DisplayHeaderFooter<span class="pl-kos">,</span>
                <span class="pl-s1">Format</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Format<span class="pl-kos">,</span>
                <span class="pl-s1">Height</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Height<span class="pl-kos">,</span>
                <span class="pl-s1">Landscape</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Landscape<span class="pl-kos">,</span>
                <span class="pl-s1">PageRanges</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>PageRanges<span class="pl-kos">,</span>
                <span class="pl-s1">PreferCSSPageSize</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>PreferCssPageSize<span class="pl-kos">,</span>
                <span class="pl-s1">PrintBackground</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>PrintBackground<span class="pl-kos">,</span>
                <span class="pl-s1">Margin</span> <span class="pl-c1">=</span> GetMargin<span class="pl-kos">(</span>model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Margin<span class="pl-kos">)</span><span class="pl-kos">,</span>
                <span class="pl-s1">Scale</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Scale<span class="pl-kos">,</span>
                <span class="pl-s1">Width</span> <span class="pl-c1">=</span> model<span class="pl-kos">.</span>Pdf<span class="pl-c1">?</span><span class="pl-kos">.</span>Width
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">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.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: ^1.36.1</li>
<li>Operating System: macOS 13.4.1</li>
<li>Browser: Chromium</li>
<li>Other info: React 17</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">[https://github.com/your_profile/playwright_issue_title]</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-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'] },
    },
  ],
});
"><pre class="notranslate"><span class="pl-c">// playwright-ct.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-react17'</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">'./src/pages/ExperimentEditPage/Sections/About/'</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-c">// grep: /spec/,</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-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-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="// 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 }) =&gt; {
  await page.route('**/request/*', async route =&gt; {
    const json = { tags: { category: 'GENERAL', name: '' } };
    await route.fulfill({ json });
  });

  const component = await mount(&lt;About /&gt;);
});"><pre class="notranslate"><span class="pl-c">// About.spec.tsx</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<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-k">from</span> <span class="pl-s">'@playwright/experimental-ct-react17'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-v">About</span> <span class="pl-k">from</span> <span class="pl-s">'./About'</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">use</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">500</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">500</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">'should work'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> mount<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">page</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">'**/request/*'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-s1">route</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">json</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">tags</span>: <span class="pl-kos">{</span> <span class="pl-c1">category</span>: <span class="pl-s">'GENERAL'</span><span class="pl-kos">,</span> <span class="pl-c1">name</span>: <span class="pl-s">''</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">route</span><span class="pl-kos">.</span><span class="pl-en">fulfill</span><span class="pl-kos">(</span><span class="pl-kos">{</span> json <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">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-c1">&lt;</span><span class="pl-ent">About</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</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>Component file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// 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 &lt;&gt;&lt;/&gt;;
}
"><pre class="notranslate"><span class="pl-c">// About.tsx</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useQuery</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-query'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">TagCategories</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../../../../modules/tag/domain/tag.utils'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">tagQueryClient</span> <span class="pl-k">from</span> <span class="pl-s">'../../../../modules/tag/tag.queryClient'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">About</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-en">useQuery</span><span class="pl-kos">(</span><span class="pl-s1">tagQueryClient</span><span class="pl-kos">.</span><span class="pl-en">listCategoryTags</span><span class="pl-kos">(</span><span class="pl-v">TagCategories</span><span class="pl-kos">.</span><span class="pl-c1">GENERAL</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// 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 }) =&gt; {
  return (
    &lt;QueryClientProvider client={new QueryClient()}&gt;
      &lt;AppContext.Provider value={null}&gt;
        &lt;App /&gt;
      &lt;/AppContext.Provider&gt;
    &lt;/QueryClientProvider&gt;
  );
});
"><pre class="notranslate"><span class="pl-c">// playwright/index.tsx</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">beforeMount</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/experimental-ct-react17/hooks'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">QueryClientProvider</span><span class="pl-kos">,</span> <span class="pl-v">QueryClient</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-query'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">AppContext</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">beforeMount</span><span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> App<span class="pl-kos">,</span> hooksConfig <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-c1">&lt;</span><span class="pl-ent">QueryClientProvider</span> <span class="pl-c1">client</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-k">new</span> <span class="pl-v">QueryClient</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-c1">&lt;</span><span class="pl-v">AppContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">null</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">AppContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">QueryClientProvider</span><span class="pl-c1">&gt;</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">In the console where I run the test see "1 passed" green text</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">In the console where I run the test I see</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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"><pre class="notranslate"><code class="notranslate">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
</code></pre></div>
<p dir="auto">Comment: it works though if instead of a normal request I mock a sample Promise inside the <code class="notranslate">useQuery</code> hook</p>