<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.32]</li>
<li>Operating System: [Windows 11, macOS 13.2]</li>
<li>Browser: [All]</li>
</ul>




<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.config.ts
import { PlaywrightTestConfig, devices } from '@playwright/test';
import { join } from 'path';
import { isCI } from './utils';
const CI = isCI();

// Use process.env.PORT by default and fallback to port 3000
const PORT = process.env.PORT || 3000;

// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
const baseURL = `http://localhost:${PORT}`;

// Reference: https://playwright.dev/docs/test-configuration
const config: PlaywrightTestConfig = {
  globalSetup: require.resolve('./global-setup'),
  timeout: 30 * 1000,
  testDir: join(__dirname, 'tests'),
  forbidOnly: CI,
  retries: 1,
  workers: 1,
  outputDir: 'e2e-results/',
  reporter: [['list'], ['junit', { outputFile: './e2e-results/results.xml' }]],

  use: {
    baseURL,
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure'
  },

  projects: [
    {
      name: 'API',
      testDir: 'tests/api',
    },
    {
      name: 'Desktop Chrome',
      testDir: 'tests/ui',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Desktop Safari',
      testDir: 'tests/ui',
      use: {
        ...devices['Desktop Safari'],
      },
    },
    // Test against mobile viewports.
    {
      name: 'Mobile Chrome',
      testDir: 'tests/ui',
      use: {
        ...devices['Pixel 5'],
      },
    },
    {
      name: 'Mobile Safari iPad',
      testDir: 'tests/ui',
      use: devices['iPad (gen 6)'],
    },
    {
      name: 'Mobile Safari iPhone',
      testDir: 'tests/ui',
      use: devices['iPhone 13'],
    },
  ],
};
export default config;
"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">PlaywrightTestConfig</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/test'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">join</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'path'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isCI</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./utils'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">CI</span> <span class="pl-c1">=</span> <span class="pl-en">isCI</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Use process.env.PORT by default and fallback to port 3000</span>
<span class="pl-k">const</span> <span class="pl-c1">PORT</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">PORT</span> <span class="pl-c1">||</span> <span class="pl-c1">3000</span><span class="pl-kos">;</span>

<span class="pl-c">// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port</span>
<span class="pl-k">const</span> <span class="pl-s1">baseURL</span> <span class="pl-c1">=</span> <span class="pl-s">`http://localhost:<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">PORT</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>

<span class="pl-c">// Reference: https://playwright.dev/docs/test-configuration</span>
<span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-v">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">globalSetup</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'./global-setup'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">timeout</span>: <span class="pl-c1">30</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span>
  <span class="pl-c1">testDir</span>: <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'tests'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">forbidOnly</span>: <span class="pl-c1">CI</span><span class="pl-kos">,</span>
  <span class="pl-c1">retries</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
  <span class="pl-c1">workers</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
  <span class="pl-c1">outputDir</span>: <span class="pl-s">'e2e-results/'</span><span class="pl-kos">,</span>
  <span class="pl-c1">reporter</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-s">'list'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'junit'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">outputFile</span>: <span class="pl-s">'./e2e-results/results.xml'</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span>

  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    baseURL<span class="pl-kos">,</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'retain-on-failure'</span><span class="pl-kos">,</span>
    <span class="pl-c1">screenshot</span>: <span class="pl-s">'only-on-failure'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</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">'API'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/api'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'Desktop Chrome'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/ui'</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-c1">name</span>: <span class="pl-s">'Desktop Safari'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/ui'</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 Safari'</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-c">// Test against mobile viewports.</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'Mobile Chrome'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/ui'</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">'Pixel 5'</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-c1">name</span>: <span class="pl-s">'Mobile Safari iPad'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/ui'</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">'iPad (gen 6)'</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-c1">name</span>: <span class="pl-s">'Mobile Safari iPhone'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-s">'tests/ui'</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">'iPhone 13'</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-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">config</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=""><pre class="notranslate"></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Run any test on the page with &gt;&gt; attributes</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">The HTML elements with any form of &gt;&gt; should works fine with Playwright including:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&amp;gt;&amp;#x200B;&amp;gt;
&amp;gt;&amp;gt; "><pre class="notranslate"><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span>#<span class="pl-s1">x200B</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span>
<span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span> </pre></div>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Any HTML elements with &gt;&gt; break the Playwright parser and make many elements on the page not accessible (not only the ones with &gt;&gt; attributes) Pick locator also does not recognize those elements.<br>
Does not work:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&amp;gt;&amp;#x200B;&amp;gt;
&amp;gt;&amp;gt; "><pre class="notranslate"><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span>#<span class="pl-s1">x200B</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span>
<span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span> </pre></div>
<p dir="auto">Works fine:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&amp;gt; &amp;gt;  (space between) 
&amp;gt;&amp;nbsp;&amp;gt; "><pre class="notranslate"><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span> <span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span>  <span class="pl-kos">(</span><span class="pl-s1">space</span> <span class="pl-s1">between</span><span class="pl-kos">)</span> 
<span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">nbsp</span><span class="pl-kos">;</span><span class="pl-c1">&amp;</span><span class="pl-s1">gt</span><span class="pl-kos">;</span> </pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.31.2]</li>
<li>Operating System: Windows 10</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<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.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><pre class="notranslate"><span class="pl-c">// playwright.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/test'</span><span class="pl-kos">;</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">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-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test('lighthouse', async ({ envConfig }) =&gt; {
    const browserForLighthouse = await chromium.launch({ args: ['--remote-debugging-port=5097'] }); // less than second
    const browserForLighthouse2 = await chromium.launch({ args: ['--remote-debugging-port=5098'] }); // browserType.launch: Timeout 180000ms exceeded
    const contextForLighthouse = await browserForLighthouse.newContext({ storageState: 'states/ImLoggedIn.json' });
    const pageForLighthouse = await contextForLighthouse.newPage();

   // perform some lighthouse checks
  });"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'lighthouse'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> envConfig <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">browserForLighthouse</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">args</span>: <span class="pl-kos">[</span><span class="pl-s">'--remote-debugging-port=5097'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// less than second</span>
    <span class="pl-k">const</span> <span class="pl-s1">browserForLighthouse2</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">args</span>: <span class="pl-kos">[</span><span class="pl-s">'--remote-debugging-port=5098'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// browserType.launch: Timeout 180000ms exceeded</span>
    <span class="pl-k">const</span> <span class="pl-s1">contextForLighthouse</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browserForLighthouse</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-c1">storageState</span>: <span class="pl-s">'states/ImLoggedIn.json'</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">pageForLighthouse</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">contextForLighthouse</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-c">// perform some lighthouse checks</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><br>
Both browser instances are created with different ports<br>
<strong>Actual</strong><br>
If one instance of browser is already created (it can be created via fixtures or in explicit way, no matter), the second instance doesn't start</p>