<p dir="auto">I'm trying to test my functions that utilize the Web Crypto API, for example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { webkit } = require(&quot;playwright&quot;)

async function importKey() {
  return window.crypto.subtle.importKey(&quot;raw&quot;, new Uint8Array(8), &quot;HKDF&quot;, false, [&quot;deriveKey&quot;])
}

(async function test() {
  const browser = await webkit.launch()
  const page = await browser.newPage()
  await page.goto(&quot;https://example.com&quot;)

  // how to test `importKey` with the Playwright context's `window.crypto`?

  await browser.close()
})()"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> webkit <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"playwright"</span><span class="pl-kos">)</span>

<span class="pl-k">async</span> <span class="pl-k">function</span> <span class="pl-en">importKey</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">crypto</span><span class="pl-kos">.</span><span class="pl-c1">subtle</span><span class="pl-kos">.</span><span class="pl-en">importKey</span><span class="pl-kos">(</span><span class="pl-s">"raw"</span><span class="pl-kos">,</span> <span class="pl-k">new</span> <span class="pl-v">Uint8Array</span><span class="pl-kos">(</span><span class="pl-c1">8</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"HKDF"</span><span class="pl-kos">,</span> <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"deriveKey"</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">webkit</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newPage</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">goto</span><span class="pl-kos">(</span><span class="pl-s">"https://example.com"</span><span class="pl-kos">)</span>

  <span class="pl-c">// how to test `importKey` with the Playwright context's `window.crypto`?</span>

  <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">close</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">I was thinking about running a dev server that hosts a page with a JS file that contains the <code class="notranslate">importKey</code> function and visiting this page with Playwright. Is there a simpler way to use my custom modules inside Playwright that use Web APIs?</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: [1.16.3]</li>
<li>Operating System: [Mac]</li>
<li>Node.js version: [16.12.0]</li>
<li>Browser: [All]</li>
<li>Extra: [N/A]</li>
</ul>


<p dir="auto"><strong>Describe the bug</strong><br>
I have 3 spec files in <strong>test</strong> folder</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22808594/140818509-eb89cbf5-f646-41b6-b6b8-97785182622c.png"><img src="https://user-images.githubusercontent.com/22808594/140818509-eb89cbf5-f646-41b6-b6b8-97785182622c.png" alt="Screen Shot 2021-11-08 at 1 05 52 PM" style="max-width: 100%;"></a></p>
<p dir="auto">Here is my config file</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22808594/140818574-1bda7e7e-22f2-44dc-a051-c50c96f93cd8.png"><img src="https://user-images.githubusercontent.com/22808594/140818574-1bda7e7e-22f2-44dc-a051-c50c96f93cd8.png" alt="Screen Shot 2021-11-08 at 1 06 11 PM" style="max-width: 100%;"></a></p>
<p dir="auto">When i run the test with one worker, files are not executed in the order mentioned in testProject.testMatch Array</p>
<p dir="auto">As per documentation, testMatch support Array of files<br>
<a href="https://playwright.dev/docs/next/api/class-testproject#test-project-test-match" rel="nofollow">https://playwright.dev/docs/next/api/class-testproject#test-project-test-match</a></p>
<p dir="auto"><strong>Actual:</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="pw1_test_spec.js
pw10_test_spec.js
pw2_test_spec.js"><pre class="notranslate"><span class="pl-s1">pw1_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span>
<span class="pl-s1">pw10_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span>
<span class="pl-s1">pw2_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span></pre></div>
<p dir="auto"><strong>Expected:</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="pw1_test_spec.js
pw2_test_spec.js
pw10_test_spec.js"><pre class="notranslate"><span class="pl-s1">pw1_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span>
<span class="pl-s1">pw2_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span>
<span class="pl-s1">pw10_test_spec</span><span class="pl-kos">.</span><span class="pl-c1">js</span></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22808594/140819145-17070098-1d99-4ad1-9947-3be79c31d4e3.png"><img src="https://user-images.githubusercontent.com/22808594/140819145-17070098-1d99-4ad1-9947-3be79c31d4e3.png" alt="Screen Shot 2021-11-08 at 1 05 42 PM" style="max-width: 100%;"></a></p>
<p dir="auto">Noticed the same behavior if i use</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="testMatch: '*_test_spec.js'"><pre class="notranslate">testMatch: <span class="pl-s">'*_test_spec.js'</span></pre></div>
<p dir="auto">Kindly let me know if i am doing something wrong here.</p>