<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32.3</li>
<li>Operating System: Windows 10 Pro</li>
<li>Browser:  Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul dir="auto">
<li>[x ] 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">or</p>
<p dir="auto"><strong>Config file</strong><br>
import { defineConfig, devices } from '@playwright/test';</p>
<p dir="auto">export default defineConfig({<br>
testMatch: '*.e2e.test.ts',<br>
testDir: './tests',<br>
fullyParallel: true,<br>
forbidOnly: !!process.env.CI,<br>
retries: process.env.CI ? 2 : 0,<br>
workers: process.env.CI ? 1 : undefined,<br>
reporter: 'html',<br>
use: {<br>
headless: true,<br>
trace: 'on-first-retry',<br>
screenshot: 'only-on-failure',<br>
video: 'retain-on-failure',<br>
},</p>
<p dir="auto">projects: [<br>
// Setup project for authentication and capturing the authenticated state in user.json file.<br>
{<br>
name: 'setup',<br>
testDir: './src/common',<br>
testMatch: /.*.e2e.setup.ts/,<br>
},<br>
{<br>
name: 'chromium',<br>
use: {<br>
...devices['Desktop Chrome'],<br>
// Use prepared auth state.<br>
storageState: 'playwright/.auth/user.json',<br>
},<br>
dependencies: ['setup'],<br>
},<br>
]<br>
});</p>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { test as setup, expect } from '@playwright/test'
import {fxLoginConfig} from '../config/test-tenant-config'
const authFile = 'playwright/.auth/user.json';


//This test will authenticate and store the state of authentication in a cookie. That cookie will be used to run all the tests in chromium project. 
setup('authenticate', async ({ page,context}) =&gt; {
    const managerTabName= 'manager';
    await context.clearCookies();
    await setup.step('authenticate', async() =&gt;{
      await page.goto(fxLoginConfig.address);
      const logo = page.locator('data-testid=login-logo');
      await expect(logo).toBeVisible();

      await page.locator('data-testid=login-page-wrapper');   
      await page.locator('data-testid=input-login-email-input').fill(fxLoginConfig.username);
      await page.locator('data-testid=input-login-pw-input').fill(fxLoginConfig.username);
      await page.locator('data-testid=login-button').click();

      await page.waitForURL(/.*\/manager/);
      await expect(page).toHaveURL(/.*\/manager/);
      await expect(page.locator(`id=${managerTabName}`)).toBeVisible();    
      (await page.context().storageState({ path: authFile }));
    });

  });

navigation.ts
import { test, expect, Page } from '@playwright/test';
import {navigateToSideBar, navigateToTab,clickBackButton} from '../src/common/navigation';
import {performanceMark, performanceMeasure} from '../src/common/';

test.describe('navigation flow tests', () =&gt; {
  const manager = 'manager',
   modeler:string ='modeler',
   
   test.beforeEach(async ({ page }, testInfo) =&gt; {
    console.log(`Running ${testInfo.title}`);
    await page.goto('/');
  });


  test('navigate from Manager Tab to Modeler&gt; Members ', async ({ page },testinfo) =&gt; {  
    await performanceMark(&quot;mark1&quot;); 
    
    await test.step('navigate to Modeler Tab', async() =&gt;{
      await goToModlerTab(page, modeler);
    })
    
    await test.step('navigate to Data Modeler ', async() =&gt;{    
      await navigateToSideBar(page,'Data Modeler',modeler);
    })

    await test.step('navigate to Members', async() =&gt;{    
      await navigateToSideBar(page,'Members',members);
    })
  
    await performanceMark(&quot;mark2&quot;);  
    await performanceMeasure(testinfo.title,&quot;measuring Navigation&quot;, &quot;mark1&quot;, &quot;mark2&quot;)
  });
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span> <span class="pl-k">as</span> <span class="pl-s1">setup</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-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">fxLoginConfig</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../config/test-tenant-config'</span>
<span class="pl-k">const</span> <span class="pl-s1">authFile</span> <span class="pl-c1">=</span> <span class="pl-s">'playwright/.auth/user.json'</span><span class="pl-kos">;</span>


<span class="pl-c">//This test will authenticate and store the state of authentication in a cookie. That cookie will be used to run all the tests in chromium project. </span>
<span class="pl-en">setup</span><span class="pl-kos">(</span><span class="pl-s">'authenticate'</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>context<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">const</span> <span class="pl-s1">managerTabName</span><span class="pl-c1">=</span> <span class="pl-s">'manager'</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">clearCookies</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">setup</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">'authenticate'</span><span class="pl-kos">,</span> <span class="pl-k">async</span><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">goto</span><span class="pl-kos">(</span><span class="pl-s1">fxLoginConfig</span><span class="pl-kos">.</span><span class="pl-c1">address</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">logo</span> <span class="pl-c1">=</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'data-testid=login-logo'</span><span class="pl-kos">)</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">logo</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeVisible</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">locator</span><span class="pl-kos">(</span><span class="pl-s">'data-testid=login-page-wrapper'</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">locator</span><span class="pl-kos">(</span><span class="pl-s">'data-testid=input-login-email-input'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s1">fxLoginConfig</span><span class="pl-kos">.</span><span class="pl-c1">username</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">locator</span><span class="pl-kos">(</span><span class="pl-s">'data-testid=input-login-pw-input'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s1">fxLoginConfig</span><span class="pl-kos">.</span><span class="pl-c1">username</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">locator</span><span class="pl-kos">(</span><span class="pl-s">'data-testid=login-button'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</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">waitForURL</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>.<span class="pl-c1">*</span><span class="pl-cce">\/</span>manager<span class="pl-c1">/</span></span><span class="pl-kos">)</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">toHaveURL</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>.<span class="pl-c1">*</span><span class="pl-cce">\/</span>manager<span class="pl-c1">/</span></span><span class="pl-kos">)</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-en">locator</span><span class="pl-kos">(</span><span class="pl-s">`id=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">managerTabName</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-en">toBeVisible</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">context</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">storageState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s1">authFile</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>

<span class="pl-s1">navigation</span><span class="pl-kos">.</span><span class="pl-c1">ts</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-s1">expect</span><span class="pl-kos">,</span> <span class="pl-smi">Page</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">navigateToSideBar</span><span class="pl-kos">,</span> <span class="pl-s1">navigateToTab</span><span class="pl-kos">,</span><span class="pl-s1">clickBackButton</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../src/common/navigation'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">performanceMark</span><span class="pl-kos">,</span> <span class="pl-s1">performanceMeasure</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../src/common/'</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-c1">describe</span><span class="pl-kos">(</span><span class="pl-s">'navigation flow tests'</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-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">manager</span> <span class="pl-c1">=</span> <span class="pl-s">'manager'</span><span class="pl-kos">,</span>
   <span class="pl-s1">modeler</span>:<span class="pl-smi">string</span> <span class="pl-c1">=</span><span class="pl-s">'modeler'</span><span class="pl-kos">,</span>
   
   <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-s1">beforeEach</span><span class="pl-kos"></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-s1">testInfo</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`Running <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">testInfo</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">}</span></span>`</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">'/'</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">'navigate from Manager Tab to Modeler&gt; Members '</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-s1">testinfo</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">performanceMark</span><span class="pl-kos">(</span><span class="pl-s">"mark1"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> 
    
    <span class="pl-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">'navigate to Modeler Tab'</span><span class="pl-kos">,</span> <span class="pl-k">async</span><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">goToModlerTab</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-s1">modeler</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">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">'navigate to Data Modeler '</span><span class="pl-kos">,</span> <span class="pl-k">async</span><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">navigateToSideBar</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span><span class="pl-s">'Data Modeler'</span><span class="pl-kos">,</span><span class="pl-s1">modeler</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">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">'navigate to Members'</span><span class="pl-kos">,</span> <span class="pl-k">async</span><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">navigateToSideBar</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span><span class="pl-s">'Members'</span><span class="pl-kos">,</span><span class="pl-s1">members</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-en">performanceMark</span><span class="pl-kos">(</span><span class="pl-s">"mark2"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>  
    <span class="pl-k">await</span> <span class="pl-en">performanceMeasure</span><span class="pl-kos">(</span><span class="pl-s1">testinfo</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">,</span><span class="pl-s">"measuring Navigation"</span><span class="pl-kos">,</span> <span class="pl-s">"mark1"</span><span class="pl-kos">,</span> <span class="pl-s">"mark2"</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>
<li>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Authentication test should run first, which updated the storage state in user.json file. Then Navigation test runs based on logged in state.</p>
<p dir="auto"><strong>Actual</strong><br>
When running the tests, user.json file gets updated at the end of test run, rather than at the end of dependency project test run.</p>
<p dir="auto">1st run, navigation test gives error  'SyntaxError: Error reading storage state from playwright/.auth/user.json:<br>
Unexpected end of JSON input'.<br>
Authentication test runs and passes and updated user.json file.</p>
<p dir="auto">2nd run, since user.json is now populated, the navigation test runs.</p>
<p dir="auto">First Run: <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/114775539/242415307-dc86af53-3914-48b5-bf8b-79e3dfcd5ce1.png"><img src="https://user-images.githubusercontent.com/114775539/242415307-dc86af53-3914-48b5-bf8b-79e3dfcd5ce1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">2nd run:<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/114775539/242415664-49274d6c-c313-40aa-b02c-dae9d9f3d812.png"><img src="https://user-images.githubusercontent.com/114775539/242415664-49274d6c-c313-40aa-b02c-dae9d9f3d812.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.31.2</li>
<li>Operating System: All</li>
<li>Browser: Chromium</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" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Test file (self-contained)</strong>  <strong>test.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { chromium } = require('playwright');

(async () =&gt; {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  page.on('console', msg =&gt; console.log(&quot;&gt; CONSOLE:&quot;, msg));
  page.on('pageerror', err =&gt; console.log(&quot;&gt; PAGEERROR:&quot;, err));

  await page.goto(`https://vaadin-database-example.demo.vaadin.com/`);
  await page.waitForTimeout(2000);

  await context.close();
  await browser.close();
})();
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> chromium <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'playwright'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</span> <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">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">headless</span>: <span class="pl-c1">false</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">context</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newContext</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">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'console'</span><span class="pl-kos">,</span> <span class="pl-s1">msg</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"&gt; CONSOLE:"</span><span class="pl-kos">,</span> <span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'pageerror'</span><span class="pl-kos">,</span> <span class="pl-s1">err</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"&gt; PAGEERROR:"</span><span class="pl-kos">,</span> <span class="pl-s1">err</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">`https://vaadin-database-example.demo.vaadin.com/`</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">waitForTimeout</span><span class="pl-kos">(</span><span class="pl-c1">2000</span><span class="pl-kos">)</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">close</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">browser</span><span class="pl-kos">.</span><span class="pl-en">close</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>Steps</strong></p>
<ul dir="auto">
<li>install playwright dependency <code class="notranslate">npm install playwright</code></li>
<li>run the provided <code class="notranslate">.js</code> script <code class="notranslate">node test.js</code></li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
In the terminal output we should see a message like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&gt; CONSOLE: Could not find style data in module named shared-styles
&gt; CONSOLE: Failed to load resource: the server responded with a status of 404 (https://vaadin-database-example.demo.vaadin.com/favicon.ico)"><pre class="notranslate"><code class="notranslate">&gt; CONSOLE: Could not find style data in module named shared-styles
&gt; CONSOLE: Failed to load resource: the server responded with a status of 404 (https://vaadin-database-example.demo.vaadin.com/favicon.ico)
</code></pre></div>
<p dir="auto"><strong>Actual</strong><br>
Resource url is not displayed</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&gt; CONSOLE: Could not find style data in module named shared-styles
&gt; CONSOLE: Failed to load resource: the server responded with a status of 404 ()"><pre class="notranslate"><code class="notranslate">&gt; CONSOLE: Could not find style data in module named shared-styles
&gt; CONSOLE: Failed to load resource: the server responded with a status of 404 ()
</code></pre></div>
<p dir="auto">Note that if you open the chromium console in dev tools the resource is correctly displayed</p>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/161853/251964133-85844a55-5127-469f-b121-27f54ec6fac9.png"><img width="857" alt="Screenshot 2023-07-08 at 11 04 22" src="https://user-images.githubusercontent.com/161853/251964133-85844a55-5127-469f-b121-27f54ec6fac9.png" style="max-width: 100%;"></a>