<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: ^1.12.2 (@playwright/test)</li>
<li>Operating System: macOS</li>
<li>Node.js version: v14.17.0</li>
<li>Browser: Chromium</li>
<li>Extra:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/58170799/122000739-9ce29d00-cdaf-11eb-8ff6-ecde3d53217b.png"><img src="https://user-images.githubusercontent.com/58170799/122000739-9ce29d00-cdaf-11eb-8ff6-ecde3d53217b.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/58170799/122000776-aa982280-cdaf-11eb-8693-8423da497800.png"><img src="https://user-images.githubusercontent.com/58170799/122000776-aa982280-cdaf-11eb-8693-8423da497800.png" alt="image" style="max-width: 100%;"></a></li>
</ul>


<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Help us help you! Put down a short code snippet that illustrates your bug and<br>
that we can run and debug locally. For example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { test, expect } from '@playwright/test';

test.describe('Some describe', () =&gt; {
  test('some test title', async ({ page }) =&gt; {
    const pageTitle: string | null = await page.textContent('#sample');
    expect(pageTitle).toBe('Expected element text');
  });
});
"><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/test'</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'Some describe'</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 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">const</span> <span class="pl-s1">pageTitle</span>: <span class="pl-smi">string</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">textContent</span><span class="pl-kos">(</span><span class="pl-s">'#sample'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">pageTitle</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-s">'Expected element text'</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>Describe the bug</strong></p>
<p dir="auto">All I do is just trying to assert text content of a DOM element. I'm unable to do so as the type the expect function returns does not seem to be correct.</p>
<p dir="auto">Hi !</p>
<p dir="auto">In vscode, the expect library imported from '@playwright/test' proposes only a few choices:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1152930/121865483-4e28fa80-ccfe-11eb-80c6-948ca0ec1070.png"><img src="https://user-images.githubusercontent.com/1152930/121865483-4e28fa80-ccfe-11eb-80c6-948ca0ec1070.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">And using the available assertions displays an error. For example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { expect } from '@playwright/test';
expect(...).toBe(...)
// Property 'toBe' does not exist on type 'Matchers&lt;string&gt;'.ts(2339)"><pre class="notranslate"><span class="pl-k">import</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">expect</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span>
<span class="pl-c">// Property 'toBe' does not exist on type 'Matchers&lt;string&gt;'.ts(2339)</span></pre></div>