<p dir="auto">Playwright has a utility <code class="notranslate">toMatchScreenshot</code> that will test a screenshot of something against a predefined image that is in it's snapshot directory. I would like for it to test against an image that is at an arbitrary absolute path. If I pass in an arbitrary path, it will coerce the path (replace the separators with hyphens) to a path inside the snapshot directory.</p>
<p dir="auto">Is there a way I can use playwright's snapshot matching abilities to match against an arbitrary image?</p>
<p dir="auto">We currently have <code class="notranslate">expect(screenshot).toMatchSnapshot(name[, options])</code> which is nice when comparing against at snapshot but it doesn't work when comparing a screenshot against a reference website which is useful for doing visual regression to see what has changed. I propose that we add a <code class="notranslate">toMatchScreenshot(screenshot[, options])</code> that could be used for something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
page.goto(&quot;production.example.com&quot;)
const ref = await page.screenshot({
  animations: &quot;disabled&quot;,
  fullPage: true,
  scale: &quot;css&quot;
});

page.goto(&quot;localhost:8080&quot;)
const test = await page.screenshot({
  animations: &quot;disabled&quot;,
  fullPage: true,
  scale: &quot;css&quot;
});

expect(test, &quot;should  match reference&quot;).toMatchScreenshot(ref, {
  maxDiffPixelRatio: 0,
  maxDiffPixels: 0,
  threshold: 0
});"><pre class="notranslate"><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">"production.example.com"</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">ref</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">screenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">animations</span>: <span class="pl-s">"disabled"</span><span class="pl-kos">,</span>
  <span class="pl-c1">fullPage</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">scale</span>: <span class="pl-s">"css"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</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">"localhost:8080"</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-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">screenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">animations</span>: <span class="pl-s">"disabled"</span><span class="pl-kos">,</span>
  <span class="pl-c1">fullPage</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">scale</span>: <span class="pl-s">"css"</span>
<span class="pl-kos">}</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">test</span><span class="pl-kos">,</span> <span class="pl-s">"should  match reference"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toMatchScreenshot</span><span class="pl-kos">(</span><span class="pl-s1">ref</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">maxDiffPixelRatio</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">maxDiffPixels</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">threshold</span>: <span class="pl-c1">0</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>