<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: "^1.34.0"</li>
<li>Operating System: Windows 11</li>
<li>Browser: Chromium</li>
<li>Other info:</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"> I provided exact source code that allows reproducing the issue locally.</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  test(&quot;Sample visual testing&quot;, async ({ page }) =&gt; {
    await page.goto(`siteurl`, { waitUntil: &quot;domcontentloaded&quot; });
    await page.waitForTimeout(10000);
    const shot = await page.getByTestId('data-testid-value').screenshot();
    expect(shot).toMatchSnapshot(&quot;sampletest.png&quot;, {maxDiffPixels: 1000});
  });"><pre class="notranslate"><code class="notranslate">  test("Sample visual testing", async ({ page }) =&gt; {
    await page.goto(`siteurl`, { waitUntil: "domcontentloaded" });
    await page.waitForTimeout(10000);
    const shot = await page.getByTestId('data-testid-value').screenshot();
    expect(shot).toMatchSnapshot("sampletest.png", {maxDiffPixels: 1000});
  });
</code></pre></div>
<p dir="auto">PLease run provided test method with any of the sample test you have (website)</p>
<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto">[https://github.com/your_profile/playwright_issue_title]</p>
<p dir="auto">or</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';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><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">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">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-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>
<ul dir="auto">
<li>[Run the test]</li>
<li>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
It should take a screenshot of specific element located by locator and match it with existing screenshot<br>
<strong>Actual</strong><br>
Screenshot() method is not taking any screenshot as it gets stuck and doesn't move to next step.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.30.0</li>
<li>Operating System: Linux (Ubuntu 22.10)</li>
<li>Node.js version: 14.21.3</li>
<li>Visual Studio Code version: 1.76.2</li>
<li>Playwright for VSCode extension version: 1.0.9</li>
<li>Browser: Chromium</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">Here is a minimal reproducible example :</p>
<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
    /* Configure projects for major browsers */
    projects: [
        {
            name: 'Desktop Chrome',
            use: {
                ...devices['Desktop Chrome']
            }
        }
    ]
};

export default config;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-k">type</span> <span class="pl-kos">{</span> <span class="pl-smi">PlaywrightTestConfig</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">import</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">config</span>: <span class="pl-smi">PlaywrightTestConfig</span> <span class="pl-c1">=</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">'Desktop Chrome'</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-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">config</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { test as base, expect } from '@playwright/test';

const keywords = ['foo', 'bar', 'playwright'];

const test = base.extend&lt;{ keyword: string }&gt;({
    keyword: 'foo'
});

test.describe(`Test suite`, () =&gt; {
    for (const kw of keywords) {
        test.use({ keyword: kw });
        test(`Test for : ${kw}`, async ({ keyword }) =&gt; {
            await expect(kw).toBe(keyword);
        });
    }
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span> <span class="pl-k">as</span> <span class="pl-s1">base</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-k">const</span> <span class="pl-s1">keywords</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'foo'</span><span class="pl-kos">,</span> <span class="pl-s">'bar'</span><span class="pl-kos">,</span> <span class="pl-s">'playwright'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">test</span> <span class="pl-c1">=</span> <span class="pl-s1">base</span><span class="pl-kos">.</span><span class="pl-en">extend</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span> <span class="pl-c1">keyword</span>: <span class="pl-smi">string</span> <span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">keyword</span>: <span class="pl-s">'foo'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</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">`Test suite`</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-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">kw</span> <span class="pl-k">of</span> <span class="pl-s1">keywords</span><span class="pl-kos">)</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">keyword</span>: <span class="pl-s1">kw</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">`Test for : <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">kw</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> keyword <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">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">kw</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-s1">keyword</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>Steps</strong></p>
<ul dir="auto">
<li>Run the test suite</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Expect to have the fixture correctly set for each test inside the for loop.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">When I run this test suite, the first two tests fail and the last one succeeds. For all of them <code class="notranslate">keyword</code> fixture is equal to <code class="notranslate">playwright</code>. Here is the resulting log :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Running 3 tests using 1 worker
  1) [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : foo ==============

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: &quot;playwright&quot;
    Received: &quot;foo&quot;

      11 |         test.use({ keyword: kw });
      12 |         test(`Test for : ${kw}`, async ({ keyword }) =&gt; {
    &gt; 13 |             await expect(kw).toBe(keyword);
         |                              ^
      14 |         });
      15 |     }
      16 | });


  2) [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : bar ==============

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: &quot;playwright&quot;
    Received: &quot;bar&quot;

      11 |         test.use({ keyword: kw });
      12 |         test(`Test for : ${kw}`, async ({ keyword }) =&gt; {
    &gt; 13 |             await expect(kw).toBe(keyword);
         |                              ^
      14 |         });
      15 |     }
      16 | });


  2 failed
    [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : foo ===============
    [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : bar ===============
  1 passed (1.5s)"><pre class="notranslate"><code class="notranslate">Running 3 tests using 1 worker
  1) [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : foo ==============

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: "playwright"
    Received: "foo"

      11 |         test.use({ keyword: kw });
      12 |         test(`Test for : ${kw}`, async ({ keyword }) =&gt; {
    &gt; 13 |             await expect(kw).toBe(keyword);
         |                              ^
      14 |         });
      15 |     }
      16 | });


  2) [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : bar ==============

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: "playwright"
    Received: "bar"

      11 |         test.use({ keyword: kw });
      12 |         test(`Test for : ${kw}`, async ({ keyword }) =&gt; {
    &gt; 13 |             await expect(kw).toBe(keyword);
         |                              ^
      14 |         });
      15 |     }
      16 | });


  2 failed
    [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : foo ===============
    [Desktop Chrome] › specs/simpler-test.spec.ts:12:9 › Test suite › Test for : bar ===============
  1 passed (1.5s)
</code></pre></div>
<p dir="auto"><strong>Notes</strong></p>
<p dir="auto">My actual use case has  a page object used as a fixture, depending on a "constant fixture" that is updated in a for loop with <code class="notranslate">test.use</code>. Also I use the constant fixture to pick various values from a test data set. If there is another way to achieve this than a for loop and <code class="notranslate">test.use</code>, glad to switch to it.</p>