<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.30.0</li>
<li>Operating System: windows 10</li>
<li>Browser: firefox, chromium</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>Config file</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'

const config: PlaywrightTestConfig = {
    use: {
        trace: 'on'
    },
}

export default config
"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-k">type</span> <span class="pl-kos">{</span> <span class="pl-smi">PlaywrightTestConfig</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/test'</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-smi">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">trace</span>: <span class="pl-s">'on'</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></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="import { test } from '@playwright/test'

test('page loads', async ({ page }) =&gt; {
    await page.goto('https://google.com')
    await page.waitForSelector('/')
})"><pre class="notranslate"><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/test'</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'page loads'</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-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-s">'https://google.com'</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">waitForSelector</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></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>run test</li>
<li>run <code class="notranslate">playwright show-trace</code> with the path to the trace file or upload it to trace.playwright.dev</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">trace file loads, with some sort of handling on the step with the invalid selector</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">blank screen with errors in the console:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/57028336/227069246-cd09e978-0675-4c73-9f23-40a7c7688fb2.png"><img src="https://user-images.githubusercontent.com/57028336/227069246-cd09e978-0675-4c73-9f23-40a7c7688fb2.png" alt="image" style="max-width: 100%;"></a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught (in promise) Error: Unexpected token &quot;/&quot; while parsing selector &quot;/&quot;"><pre class="notranslate"><code class="notranslate">Uncaught (in promise) Error: Unexpected token "/" while parsing selector "/"
</code></pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.34.3</li>
<li>Operating System: Self hosted runner on GitHub Action</li>
<li>Browser: Firefox, WebKit</li>
<li>Other info: Only repro when chromium browser is not installed on the playwright instance</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>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: 'setup',
      testMatch: /env.setup\.js/,
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
      dependencies: ['setup']
    },
    {
      name: 'firefox',
      use: {	...devices['Desktop Firefox'], },
      dependencies: ['setup']
    },
    {
      name: 'webkit',
      use: {	...devices['Desktop Safari'], },
      dependencies: ['setup']
    },
});"><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">'setup'</span><span class="pl-kos">,</span>
      <span class="pl-c1">testMatch</span>: <span class="pl-pds"><span class="pl-c1">/</span>env.setup<span class="pl-cce">\.</span>js<span class="pl-c1">/</span></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">'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-c1">dependencies</span>: <span class="pl-kos">[</span><span class="pl-s">'setup'</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">'firefox'</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 Firefox'</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">dependencies</span>: <span class="pl-kos">[</span><span class="pl-s">'setup'</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">'webkit'</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-c1">dependencies</span>: <span class="pl-kos">[</span><span class="pl-s">'setup'</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>GitHub Actions with matrix setup</strong></p>
<div class="highlight highlight-source-yaml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="# Github Action file
name: Scheduled

on:
  workflow_dispatch:

jobs:
  UI-Tests:
    runs-on: [self-hosted, AWS, Linux]
    timeout-minutes: 30
    strategy:
      fail-fast: false
      matrix:
        browser: ['chromium', 'firefox', 'webkit']
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
      - name: Install Dependencies
        run: npm ci
      - name: Setup Playwright
        run: npx playwright install ${{ matrix.browser }} --with-deps
      - name: Run UI Tests
        run: npx playwright test --project=${{ matrix.browser }} "><pre class="notranslate"><span class="pl-c"><span class="pl-c">#</span> Github Action file</span>
<span class="pl-ent">name</span>: <span class="pl-s">Scheduled</span>

<span class="pl-ent">on</span>:
  <span class="pl-ent">workflow_dispatch</span>:

<span class="pl-ent">jobs</span>:
  <span class="pl-ent">UI-Tests</span>:
    <span class="pl-ent">runs-on</span>: <span class="pl-s">[self-hosted, AWS, Linux]</span>
    <span class="pl-ent">timeout-minutes</span>: <span class="pl-c1">30</span>
    <span class="pl-ent">strategy</span>:
      <span class="pl-ent">fail-fast</span>: <span class="pl-c1">false</span>
      <span class="pl-ent">matrix</span>:
        <span class="pl-ent">browser</span>: <span class="pl-s">['chromium', 'firefox', 'webkit']</span>
    <span class="pl-ent">steps</span>:
      - <span class="pl-ent">name</span>: <span class="pl-s">Checkout code</span>
        <span class="pl-ent">uses</span>: <span class="pl-s">actions/checkout@v3</span>
      - <span class="pl-ent">name</span>: <span class="pl-s">Setup Node</span>
        <span class="pl-ent">uses</span>: <span class="pl-s">actions/setup-node@v3</span>
      - <span class="pl-ent">name</span>: <span class="pl-s">Install Dependencies</span>
        <span class="pl-ent">run</span>: <span class="pl-s">npm ci</span>
      - <span class="pl-ent">name</span>: <span class="pl-s">Setup Playwright</span>
        <span class="pl-ent">run</span>: <span class="pl-s">npx playwright install ${{ matrix.browser }} --with-deps</span>
      - <span class="pl-ent">name</span>: <span class="pl-s">Run UI Tests</span>
        <span class="pl-ent">run</span>: <span class="pl-s">npx playwright test --project=${{ matrix.browser }} </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="// tests/env.setup.js
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) =&gt; {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

// tests/get-link.test.js
import { test, expect } from '@playwright/test';
test('get started link', async ({ page }) =&gt; {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});"><pre class="notranslate"><span class="pl-c">// tests/env.setup.js</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-k">from</span> <span class="pl-s">'@playwright/test'</span><span class="pl-kos">;</span>
<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'has title'</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-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-s">'https://playwright.dev/'</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">toHaveTitle</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>Playwright<span class="pl-c1">/</span></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">// tests/get-link.test.js</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-k">from</span> <span class="pl-s">'@playwright/test'</span><span class="pl-kos">;</span>
<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'get started link'</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-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-s">'https://playwright.dev/'</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">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'link'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'Get started'</span> <span class="pl-kos">}</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-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>intro<span class="pl-c1">/</span></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>Execute the tests using GitHub Action</li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
Since the GitHub Action only installs the browser it requires for running the test, the set up file should run on the browser mentioned in project.</p>
<p dir="auto"><strong>Actual</strong><br>
The setup file gets executed on chromium browser only, even though the specified browser can be firefox or webkit. Verified it in the headed mode on local as well. The reason we decided to not install all the browsers was because <code class="notranslate">webkit</code> required dependencies to install and use to take longer for each execution.</p>