<p dir="auto">The slider comparison is awesome for visual regression tests but the height of the websites often changes which causes the slider comparison to be disabled. Would it be possible to have it available even if the height are different? Maybe we could add an option to pad images that are different heights?</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.23.0</li>
<li>Operating System: Mac</li>
<li>Node.js version: 16.14.0</li>
<li>Browser: Chromium</li>
</ul>


<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Playwright config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const config: PlaywrightTestConfig = {
  testDir: 'tests',
  fullyParallel: true,
  reporter: process.env.CI ? [['github'], ['html']] : [['list'], ['html', { open: 'on-failure' }]],
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 1 : 0,
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
  expect: {
    toHaveScreenshot: { 
      threshold: 0.2,
      maxDiffPixelRatio: 0.05
     },
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
export default config;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-v">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">testDir</span>: <span class="pl-s">'tests'</span><span class="pl-kos">,</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">reporter</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span> ? <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-s">'github'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'html'</span><span class="pl-kos">]</span><span class="pl-kos">]</span> : <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-s">'list'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'html'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">open</span>: <span class="pl-s">'on-failure'</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">forbidOnly</span>: <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span><span class="pl-kos">,</span>
  <span class="pl-c1">retries</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span> ? <span class="pl-c1">1</span> : <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">headless</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">viewport</span>: <span class="pl-kos">{</span> <span class="pl-c1">width</span>: <span class="pl-c1">1280</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">720</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">screenshot</span>: <span class="pl-s">'only-on-failure'</span><span class="pl-kos">,</span>
    <span class="pl-c1">video</span>: <span class="pl-s">'retain-on-failure'</span><span class="pl-kos">,</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">'retain-on-failure'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">expect</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">toHaveScreenshot</span>: <span class="pl-kos">{</span> 
      <span class="pl-c1">threshold</span>: <span class="pl-c1">0.2</span><span class="pl-kos">,</span>
      <span class="pl-c1">maxDiffPixelRatio</span>: <span class="pl-c1">0.05</span>
     <span class="pl-kos">}</span><span class="pl-kos">,</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-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">Method that compares screenshots:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="async matchesScreenshot(
    locator: Locator,
    options?: LocatorScreenshotOptions,
  ) {
    expect(locator).toHaveScreenshot({timeout: 5000, ...options});
  }"><pre class="notranslate"><span class="pl-s1">async</span> <span class="pl-s1">matchesScreenshot</span><span class="pl-kos">(</span>
    locator: <span class="pl-v">Locator</span><span class="pl-kos">,</span>
    <span class="pl-s1">options</span>?<span class="pl-s1"></span>: <span class="pl-v">LocatorScreenshotOptions</span><span class="pl-kos">,</span>
  <span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c1">expect</span><span class="pl-kos">(</span><span class="pl-s1">locator</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">toHaveScreenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">timeout</span>: <span class="pl-c1">5000</span><span class="pl-kos">,</span> ...<span class="pl-s1">options</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">I'm doing visual regression testing. I want to see the difference between screenshots in the report. However, the difference is not present there. Also, in the <code class="notranslate">test-results</code> folder the difference is missing too.</p>