<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.33.0</li>
<li>Operating System: macOS 12.6.5</li>
<li>Browser: All</li>
<li>Other info: Node 16.13.0, React 18.2</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="import { defineConfig, devices } from '@playwright/experimental-ct-react';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './',
  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
  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'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});"><pre class="notranslate"><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-react'</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">'./'</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-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-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-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-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="import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';

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

test('should work', async ({ mount }) =&gt; {
  const component = await mount(&lt;App /&gt;);
  await expect(component).toContainText('Learn React');
});"><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-s1">expect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/experimental-ct-react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">App</span> <span class="pl-k">from</span> <span class="pl-s">'./App'</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><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">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">App</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-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">component</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toContainText</span><span class="pl-kos">(</span><span class="pl-s">'Learn React'</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>
<ol dir="auto">
<li>Follow the <a href="https://playwright.dev/docs/test-components#how-to-get-started" rel="nofollow">How to get started</a> steps to set up for component testing</li>
<li>Install <code class="notranslate">react</code> and <code class="notranslate">react-dom</code> manually (not included with template)</li>
<li>Add <code class="notranslate">src/App.tsx</code> file manually (not included with template)</li>
<li><code class="notranslate">npm run test-ct</code></li>
</ol>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Tests transpile successfully and execute.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">All tests fail with the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    ReferenceError: React is not defined

      5 |
      6 | test('should work', async ({ mount }) =&gt; {
    &gt; 7 |   const component = await mount(&lt;App /&gt;);
        |                                 ^
      8 |   await expect(component).toContainText('Learn React');
      9 | });"><pre class="notranslate"><code class="notranslate">    ReferenceError: React is not defined

      5 |
      6 | test('should work', async ({ mount }) =&gt; {
    &gt; 7 |   const component = await mount(&lt;App /&gt;);
        |                                 ^
      8 |   await expect(component).toContainText('Learn React');
      9 | });
</code></pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.32.3]</li>
<li>Operating System: [All]</li>
<li>Other info: GitLab pipeline</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto">For importing the results from my GitLab pipeline I use the extended Junit reporter which was fine so far.<br>
All tests do have an test_key annotation with an already existing Test-Issue in Xray.</p>




<p dir="auto">Config according to <a href="https://playwright.dev/docs/test-reporters#junit-reporter" rel="nofollow">docs</a></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';

const xrayOptions = {
    textContentAnnotations: ['test_description'],
    outputFile: './xray-report.xml'
};

export default defineConfig({
    reporter: [['junit', xrayOptions]]
});"><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">const</span> <span class="pl-s1">xrayOptions</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">textContentAnnotations</span>: <span class="pl-kos">[</span><span class="pl-s">'test_description'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">outputFile</span>: <span class="pl-s">'./xray-report.xml'</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-en">defineConfig</span><span class="pl-kos">(</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">'junit'</span><span class="pl-kos">,</span> <span class="pl-s1">xrayOptions</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</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test.describe.skip('ui tests @gui', () =&gt; {
    test('Some test', async ({ page }) =&gt; {
        test.info().annotations.push({ type: 'test_key', description: 'ABCD-166' })
        // ..test code
    })
})"><pre class="notranslate"><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-en">skip</span><span class="pl-kos">(</span><span class="pl-s">'ui tests @gui'</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-en">test</span><span class="pl-kos">(</span><span class="pl-s">'Some test'</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-s1">test</span><span class="pl-kos">.</span><span class="pl-en">info</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">annotations</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'test_key'</span><span class="pl-kos">,</span> <span class="pl-c1">description</span>: <span class="pl-s">'ABCD-166'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
        <span class="pl-c">// ..test code</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>Expected</strong></p>
<p dir="auto">When the group is being skipped, all the contained tests are transferred with status ToDo to an Xray execution and no new test issues are created. No creation because of the existing test_key annotation and already existing corresponding test issues in Xray is the expected <a href="https://docs.getxray.app/display/XRAY/Working+with+Automated+Tests" rel="nofollow">flow</a></p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">All the tests within an skipped test.describe() group unnecessarily generate <strong>new</strong> test issues in Xray and an execution with run status ToDo. The existing test issues are being ignored instead of using them for attaching and linking the execution results, in this case <em>ToDo</em>.</p>