<h4 dir="auto">Let us know what functionality you'd like to see in Playwright and what is your use case.</h4>
<p dir="auto">In my typescript config, I'm using path aliases. Like the following:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// tsconfig.json

{
  &quot;compilerOptions&quot;: {
    // other options
    &quot;paths&quot;: {
      &quot;@my-alias/*&quot;: [&quot;./*&quot;]
    },
  }
}"><pre class="notranslate"><span class="pl-c">// tsconfig.json</span>

<span class="pl-kos">{</span>
  <span class="pl-s">"compilerOptions"</span>: <span class="pl-kos">{</span>
    <span class="pl-c">// other options</span>
    <span class="pl-s">"paths"</span>: <span class="pl-kos">{</span>
      <span class="pl-s">"@my-alias/*"</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></pre></div>
<p dir="auto">That means my typescript types show up just fine in VS Code, but <code class="notranslate">playwright/test</code> yells at me if I try to use them:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Error: Error while reading /Users/me/code/playwright-project/very/nested/folder/some-test.spec.ts:
Cannot find module '@my-alias/fixtures'"><pre class="notranslate">Error: Error <span class="pl-k">while</span> reading /Users/me/code/playwright-project/very/nested/folder/some-test.spec.ts:
Cannot find module <span class="pl-s"><span class="pl-pds">'</span>@my-alias/fixtures<span class="pl-pds">'</span></span></pre></div>
<p dir="auto">It'd be nice to have an option like Jest's <a href="https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring" rel="nofollow"><code class="notranslate">moduleNameMapper</code></a>, so I can use path aliases. An example of what that looks like for jest is:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// jest.config.json

&quot;moduleNameMapper&quot;: {
    &quot;^@my-alias/(.*)$&quot;: &quot;&lt;rootDir&gt;/playwright-project/$1&quot;
  },"><pre class="notranslate"><span class="pl-ii">// jest.config.json</span>

<span class="pl-ent">"moduleNameMapper"</span>: {
    <span class="pl-ent">"^@my-alias/(.*)$"</span>: <span class="pl-s"><span class="pl-pds">"</span>&lt;rootDir&gt;/playwright-project/$1<span class="pl-pds">"</span></span>
  },</pre></div>
<h4 dir="auto">Do you think others might benefit from this as well?</h4>
<p dir="auto">Yes. Path aliases are a common setting in typescript projects, and a nice way to avoid many nested layers of <code class="notranslate">../..</code> when using <code class="notranslate">import</code> statements.</p>
<p dir="auto">The Typescript monorepo project I'm currently adopting Playwright to has very specific needs in terms of resolving the modules. The simplified structure is as follows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".
└── packages
    ├── @test-utils
    |   └── src
    └── e2e
        └── src
            ├── pageObjects
            └── specs"><pre class="notranslate"><code class="notranslate">.
└── packages
    ├── @test-utils
    |   └── src
    └── e2e
        └── src
            ├── pageObjects
            └── specs
</code></pre></div>
<p dir="auto">Even though I can setup the e2e-specific <code class="notranslate">tsconfig.json</code> that resolves the paths within the editor, the tests obviously fail because the runner can't resolve the modules like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// specs/my-test.spec.ts
import { MyPage } from 'src/pageObjects'; // absolute import within e2e package"><pre class="notranslate"><span class="pl-c">// specs/my-test.spec.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">MyPage</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'src/pageObjects'</span><span class="pl-kos">;</span> <span class="pl-c">// absolute import within e2e package</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pageObjects/My.page.ts
import { TestId } from '@test-utils'; // import from another package inside monorepo"><pre class="notranslate"><span class="pl-c">// pageObjects/My.page.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">TestId</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@test-utils'</span><span class="pl-kos">;</span> <span class="pl-c">// import from another package inside monorepo</span></pre></div>
<p dir="auto">This is possible to do within the Jest by providing following configuration in <code class="notranslate">jest.config.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// jest.config.js
module.exports = {
  moduleNameMapper: {
    'src/(.*)': '&lt;rootDir&gt;/src/$1',
    '@test-utils': '&lt;rootDir&gt;/../@test-utils/src',
  },
}"><pre class="notranslate"><span class="pl-c">// jest.config.js</span>
<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">moduleNameMapper</span>: <span class="pl-kos">{</span>
    <span class="pl-s">'src/(.*)'</span>: <span class="pl-s">'&lt;rootDir&gt;/src/$1'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@test-utils'</span>: <span class="pl-s">'&lt;rootDir&gt;/../@test-utils/src'</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">Would love to see something similar in the <code class="notranslate">@playwright/test</code> 😃</p>