Issue 1:
Context:

Playwright Version: 1.12.3

Operating System: Windows

Node.js version: 14.17

Browser: Chromium, Firefox

Extra:

Code Snippet

The code sample generates full page screenshots for both headful and headless modes.

import { chromium, firefox, Browser } from "playwright";

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

await page.goto(test_website)

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

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

(async () => {
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')

})();

Additional info: tsconfig.json

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"exclude": [
"tests"
]
}

Describe the bug

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.

Headful mode
Headless mode

Issue 2:
Context:

Playwright Version: 1.10.0

Operating System: Mac

Node.js version: 12

Browser: Chromium

Extra:

Base Docker image: mcr.microsoft.com/playwright:v1.10.0-focal

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and

that we can run and debug locally. For example:

const path = require('path');
const Playwright = require('playwright');

(async () => {
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();
})();

Describe the bug

You can see the screenshot has been cropped:

If I manually set deviceScaleFactor to 1, it then works fine:

const path = require('path');
const Playwright = require('playwright');

(async () => {
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();
})();