<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.36.0</li>
<li>Operating System: Windows</li>
<li>Browser: All</li>
</ul>
<h3 dir="auto">Source code</h3>
<div class="highlight highlight-source-cs notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="using Microsoft.Playwright;

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var context = await browser.NewContextAsync();
var page = await context.NewPageAsync();

await page.GotoAsync(&quot;https://www.example.com&quot;);

var locator = page.Locator(&quot;//*[contains(@class, 'foo']&quot;).First;

await locator.IsVisibleAsync();

Console.ReadKey();"><pre class="notranslate"><span class="pl-k">using</span> Microsoft<span class="pl-kos">.</span>Playwright<span class="pl-kos">;</span>

<span class="pl-k">using</span> <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-k">await</span> <span class="pl-k">using</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-smi">var</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">page</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-k">await</span> page<span class="pl-kos">.</span><span class="pl-en">GotoAsync</span><span class="pl-kos">(</span><span class="pl-s"><span class="pl-s">"</span>https://www.example.com<span class="pl-s">"</span></span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">var</span> <span class="pl-s1">locator</span> <span class="pl-c1">=</span> page<span class="pl-kos">.</span><span class="pl-en">Locator</span><span class="pl-kos">(</span><span class="pl-s"><span class="pl-s">"</span>//*[contains(@class, 'foo']<span class="pl-s">"</span></span><span class="pl-kos">)</span><span class="pl-kos">.</span>First<span class="pl-kos">;</span>

<span class="pl-k">await</span> locator<span class="pl-kos">.</span><span class="pl-en">IsVisibleAsync</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Console<span class="pl-kos">.</span><span class="pl-en">ReadKey</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>Create a new .NET console app.</li>
<li>Add a reference to <code class="notranslate">Microsoft.Playwright</code> package.</li>
<li>Replace the contents of <code class="notranslate">Program.cs</code> to the above code.</li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
The string '//*[contains(<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Class/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Class">@Class</a>, 'foo']' is not a valid XPath expression.</p>
<p dir="auto"><strong>Actual</strong><br>
The string './/*[contains(<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Class/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Class">@Class</a>, 'foo']' is not a valid XPath expression.</p>
<p dir="auto"><strong>Difference</strong><br>
The actual contains a prefix <code class="notranslate">.</code> when printing the locator.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>@playwright/test Version 1.36.0</li>
<li>Operating System: macOs 13.4.1</li>
<li>Browser: all</li>
<li>Other info: "playwright-lighthouse": "^3.1.0"</li>
</ul>
<p dir="auto"><strong>This Error Started when I installed playwright-lighthouse and tried to import that.</strong></p>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item">
<p dir="auto"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <strong>I am trying to run this test</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" `
  import { playAudit } from 'playwright-lighthouse';
  import { test } from '@playwright/test';
  
  test.describe('account settings tests', () =&gt; {
      test('verify account details visible', async ({ page }) =&gt; {
          await page.goto(MYURL);
  
          await playAudit({
              page: page,
              port: 9222,
              thresholds: {
                accessibility: 50,
                'best-practices': 50,
                performance: 50,
                pwa: 50,
                seo: 50,
              },
            });
      });
  });`"><pre class="notranslate"><code class="notranslate"> `
  import { playAudit } from 'playwright-lighthouse';
  import { test } from '@playwright/test';
  
  test.describe('account settings tests', () =&gt; {
      test('verify account details visible', async ({ page }) =&gt; {
          await page.goto(MYURL);
  
          await playAudit({
              page: page,
              port: 9222,
              thresholds: {
                accessibility: 50,
                'best-practices': 50,
                performance: 50,
                pwa: 50,
                seo: 50,
              },
            });
      });
  });`
</code></pre></div>
</li>
</ul>
<p dir="auto"><strong>It fails on the first line the import for playwright-lighthouse</strong></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.config.ts
import { defineConfig, devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './playwright/e2e/lighthouse/accountSettings',
  /* 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: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'https://bidder-react-stage.liveauctioneers.com/',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://127.0.0.1:3000',
  //   reuseExistingServer: !process.env.CI,
  // },
});"><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-c">/**</span>
<span class="pl-c"> * Read environment variables from file.</span>
<span class="pl-c"> * https://github.com/motdotla/dotenv</span>
<span class="pl-c"> */</span>
<span class="pl-c">// require('dotenv').config();</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">'./playwright/e2e/lighthouse/accountSettings'</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">/* Base URL to use in actions like `await page.goto('/')`. */</span>
    <span class="pl-c1">baseURL</span>: <span class="pl-s">'https://bidder-react-stage.liveauctioneers.com/'</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-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-c">/* Test against mobile viewports. */</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Mobile Chrome',</span>
    <span class="pl-c">//   use: { ...devices['Pixel 5'] },</span>
    <span class="pl-c">// },</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Mobile Safari',</span>
    <span class="pl-c">//   use: { ...devices['iPhone 12'] },</span>
    <span class="pl-c">// },</span>

    <span class="pl-c">/* Test against branded browsers. */</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Microsoft Edge',</span>
    <span class="pl-c">//   use: { ...devices['Desktop Edge'], channel: 'msedge' },</span>
    <span class="pl-c">// },</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   name: 'Google Chrome',</span>
    <span class="pl-c">//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },</span>
    <span class="pl-c">// },</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>

  <span class="pl-c">/* Run your local dev server before starting the tests */</span>
  <span class="pl-c">// webServer: {</span>
  <span class="pl-c">//   command: 'npm run start',</span>
  <span class="pl-c">//   url: 'http://127.0.0.1:3000',</span>
  <span class="pl-c">//   reuseExistingServer: !process.env.CI,</span>
  <span class="pl-c">// },</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">[Describe expected behavior]</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">[Describe actual behavior]</p>
<p dir="auto"><strong>THIS IS THE ERROR THAT I AM GETTING</strong><br>
<code class="notranslate">require() of ES Module /Users/ryanpetersen/dev/bidder-react/node_modules/playwright-lighthouse/index.js from /Users/PATH/TO/TEST/FILE.spec.ts not supported. Instead change the require of index.js in /Users/PATH/TO/TEST/FILE.spec.ts to a dynamic import() which is available in all CommonJS modules.</code></p>