<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.12.3</li>
<li>Operating System: Windows</li>
<li>Node.js version: 14.17</li>
<li>Browser: Chromium, Firefox</li>
<li>Extra:</li>
</ul>


<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">The code sample generates full page screenshots for both headful and headless modes.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { chromium, firefox, Browser } from &quot;playwright&quot;;

async function takeScreenshot(browser: Browser, screenshotPath: string) {
    const test_website = &quot;https://playwright.dev/docs/screenshots#full-page-screenshots&quot;
    const page = await browser.newPage()

    await page.goto(test_website)

    await page.screenshot({ path: screenshotPath, fullPage: true })

    await page.close()
    await browser.close()
}

(async () =&gt; {
    const headfullBrowser = await chromium.launch({
        headless: false,
        slowMo: 1000,
    })

    await takeScreenshot(headfullBrowser, 'output/headfull-screenshot.png')

    const headlessBrowser = await chromium.launch({
        headless: true,
        slowMo: 1000,
    })

    await takeScreenshot(headlessBrowser, 'output/headless-screenshot.png')

})();"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">chromium</span><span class="pl-kos">,</span> <span class="pl-s1">firefox</span><span class="pl-kos">,</span> <span class="pl-v">Browser</span> <span class="pl-kos">}</span> <span class="pl-k">from</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">takeScreenshot</span><span class="pl-kos">(</span><span class="pl-s1">browser</span>: <span class="pl-v">Browser</span><span class="pl-kos">,</span> <span class="pl-s1">screenshotPath</span>: <span class="pl-s1">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">test_website</span> <span class="pl-c1">=</span> <span class="pl-s">"https://playwright.dev/docs/screenshots#full-page-screenshots"</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-s1">test_website</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">screenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s1">screenshotPath</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-kos">)</span>

    <span class="pl-k">await</span> <span class="pl-s1">page</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-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-k">async</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">const</span> <span class="pl-s1">headfullBrowser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</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-c1">headless</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
        <span class="pl-c1">slowMo</span>: <span class="pl-c1">1000</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>

    <span class="pl-k">await</span> <span class="pl-en">takeScreenshot</span><span class="pl-kos">(</span><span class="pl-s1">headfullBrowser</span><span class="pl-kos">,</span> <span class="pl-s">'output/headfull-screenshot.png'</span><span class="pl-kos">)</span>

    <span class="pl-k">const</span> <span class="pl-s1">headlessBrowser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</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-c1">headless</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">slowMo</span>: <span class="pl-c1">1000</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>

    <span class="pl-k">await</span> <span class="pl-en">takeScreenshot</span><span class="pl-kos">(</span><span class="pl-s1">headlessBrowser</span><span class="pl-kos">,</span> <span class="pl-s">'output/headless-screenshot.png'</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">Additional info: tsconfig.json</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
    &quot;compilerOptions&quot;: {
        &quot;target&quot;: &quot;es6&quot;, 
        &quot;module&quot;: &quot;commonjs&quot;, 
        &quot;outDir&quot;: &quot;./build&quot;, 
        &quot;rootDir&quot;: &quot;./src&quot;,
        &quot;strict&quot;: true, 
        &quot;moduleResolution&quot;: &quot;node&quot;,
        &quot;esModuleInterop&quot;: true, 
        &quot;skipLibCheck&quot;: true, 
        &quot;forceConsistentCasingInFileNames&quot;: true 
    },
    &quot;exclude&quot;: [
        &quot;tests&quot;
    ]
}"><pre class="notranslate">{
    <span class="pl-ent">"compilerOptions"</span>: {
        <span class="pl-ent">"target"</span>: <span class="pl-s"><span class="pl-pds">"</span>es6<span class="pl-pds">"</span></span>, 
        <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>commonjs<span class="pl-pds">"</span></span>, 
        <span class="pl-ent">"outDir"</span>: <span class="pl-s"><span class="pl-pds">"</span>./build<span class="pl-pds">"</span></span>, 
        <span class="pl-ent">"rootDir"</span>: <span class="pl-s"><span class="pl-pds">"</span>./src<span class="pl-pds">"</span></span>,
        <span class="pl-ent">"strict"</span>: <span class="pl-c1">true</span>, 
        <span class="pl-ent">"moduleResolution"</span>: <span class="pl-s"><span class="pl-pds">"</span>node<span class="pl-pds">"</span></span>,
        <span class="pl-ent">"esModuleInterop"</span>: <span class="pl-c1">true</span>, 
        <span class="pl-ent">"skipLibCheck"</span>: <span class="pl-c1">true</span>, 
        <span class="pl-ent">"forceConsistentCasingInFileNames"</span>: <span class="pl-c1">true</span> 
    },
    <span class="pl-ent">"exclude"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>tests<span class="pl-pds">"</span></span>
    ]
}</pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">The screenshot generated in headful mode does not cover the full page like in headless mode. As you can see, the first screenshot ( the one generated in headful mode), is cropped compared to the second one.</p>
<table role="table">
<thead>
<tr>
<th align="center">Headful mode</th>
<th align="center">Headless mode</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32799668/124476866-07359e80-ddac-11eb-9fcb-357db8d99a27.png"><img src="https://user-images.githubusercontent.com/32799668/124476866-07359e80-ddac-11eb-9fcb-357db8d99a27.png" alt="" style="max-width: 100%;"></a></td>
<td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32799668/124476882-0ac92580-ddac-11eb-82b3-c00b00703c92.png"><img src="https://user-images.githubusercontent.com/32799668/124476882-0ac92580-ddac-11eb-82b3-c00b00703c92.png" alt="" style="max-width: 100%;"></a></td>
</tr>
</tbody>
</table>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.10.0</li>
<li>Operating System: Mac</li>
<li>Node.js version: 12</li>
<li>Browser: Chromium</li>
<li>Extra:<br>
Base Docker image: mcr.microsoft.com/playwright:v1.10.0-focal</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-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');
const Playwright = require('playwright');

(async () =&gt; {
  const DEVICE = Playwright.devices['Pixel 2'];
  const browser = await Playwright.chromium.launch({
    args: ['--disable-dev-shm-usage', '--no-sandbox'],
  });
  const context = await browser.newContext(DEVICE);
  await context.addInitScript({
    path: path.resolve(__dirname, 'initScript.js'),
  });
  const page = await context.newPage();
  await page.goto(`https://getbootstrap.com/docs/3.4/examples/non-responsive/`);
  await page.screenshot({ path: './screenshot.png' });
  await browser.close();
})();
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">Playwright</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-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</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">const</span> <span class="pl-c1">DEVICE</span> <span class="pl-c1">=</span> <span class="pl-v">Playwright</span><span class="pl-kos">.</span><span class="pl-c1">devices</span><span class="pl-kos">[</span><span class="pl-s">'Pixel 2'</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-v">Playwright</span><span class="pl-kos">.</span><span class="pl-c1">chromium</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-c1">args</span>: <span class="pl-kos">[</span><span class="pl-s">'--disable-dev-shm-usage'</span><span class="pl-kos">,</span> <span class="pl-s">'--no-sandbox'</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">const</span> <span class="pl-s1">context</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">newContext</span><span class="pl-kos">(</span><span class="pl-c1">DEVICE</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">addInitScript</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'initScript.js'</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">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">context</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-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://getbootstrap.com/docs/3.4/examples/non-responsive/`</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">screenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'./screenshot.png'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</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><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong><br>
You can see the screenshot has been cropped:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7234480/114496489-eb6b9380-9bd4-11eb-8269-c4033b075066.png"><img src="https://user-images.githubusercontent.com/7234480/114496489-eb6b9380-9bd4-11eb-8269-c4033b075066.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">If I manually set <code class="notranslate">deviceScaleFactor</code> to 1, it then works fine:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');
const Playwright = require('playwright');

(async () =&gt; {
  const DEVICE = Playwright.devices['Pixel 2'];
  const browser = await Playwright.chromium.launch({
    args: ['--disable-dev-shm-usage', '--no-sandbox'],
  });
  const context = await browser.newContext({
    ...DEVICE,
    viewport: {
      width: Math.round(411 * 2.625),
      height: Math.round(731 * 2.625),
    },
    deviceScaleFactor: 1,
  });
  await context.addInitScript({
    path: path.resolve(__dirname, 'initScript.js'),
  });
  const page = await context.newPage();
  await page.goto(`https://getbootstrap.com/docs/3.4/examples/non-responsive/`);
  await page.screenshot({ path: './screenshot.png' });
  await browser.close();
})();
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">Playwright</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-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</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">const</span> <span class="pl-c1">DEVICE</span> <span class="pl-c1">=</span> <span class="pl-v">Playwright</span><span class="pl-kos">.</span><span class="pl-c1">devices</span><span class="pl-kos">[</span><span class="pl-s">'Pixel 2'</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-v">Playwright</span><span class="pl-kos">.</span><span class="pl-c1">chromium</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-c1">args</span>: <span class="pl-kos">[</span><span class="pl-s">'--disable-dev-shm-usage'</span><span class="pl-kos">,</span> <span class="pl-s">'--no-sandbox'</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">const</span> <span class="pl-s1">context</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">newContext</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    ...<span class="pl-c1">DEVICE</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-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-c1">411</span> <span class="pl-c1">*</span> <span class="pl-c1">2.625</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">height</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-c1">731</span> <span class="pl-c1">*</span> <span class="pl-c1">2.625</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">deviceScaleFactor</span>: <span class="pl-c1">1</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">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">addInitScript</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'initScript.js'</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">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">context</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-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://getbootstrap.com/docs/3.4/examples/non-responsive/`</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">screenshot</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'./screenshot.png'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</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><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7234480/114602591-a171c480-9c4b-11eb-8ea2-6e49fbc4f3e8.png"><img src="https://user-images.githubusercontent.com/7234480/114602591-a171c480-9c4b-11eb-8ea2-6e49fbc4f3e8.png" alt="image" style="max-width: 100%;"></a></p>