[BUG] chromium and webkit screenshot ignoring screenshot: clip: height option property

Context:

• Playwright Version: 0.11.1
• Operating System: Mac OS X 10.14.6
• Extra: node@11.15.0 npm@6.7.0

Code Snippet Full repo: https://github.com/aesyondu/javascript-questions/tree/tmp/playwright-sample

Specific commit: https://github.com/aesyondu/javascript-questions/commit/4d9b189d808ea69945fc3f7fa4e8fc293c0fac48

index.js

const path = require("path")
const { firefox } = require("playwright-firefox");
const { chromium } = require("playwright-chromium");
const { webkit } = require("playwright-webkit");

(async () => {
    const browser = await firefox.launch({ headless: false })
    // const browser = await chromium.launch({ headless: false })
    // const browser = await webkit.launch({ headless: false })
    const context = await browser.newContext()
    context.setDefaultTimeout(9999999)
    const page = await context.newPage()

    await page.goto(`file:${path.join(__dirname, "index.html")}`) // 2. firefox not resolving page.goto file:
    console.log("FIREFOX not outputting this")

    const question = await page.$("h6[id^='1']")
    const {x: xStart, y: yStart, width: widthStart} = await question.boundingBox()

    const limit = await page.$("h6[id^='2']")
    const {x: xEnd, y: yEnd} = await limit.boundingBox()

    const heightCalc = yEnd - yStart
    const heightCalc2 = (yEnd - yStart) * 2
    console.log(yStart, yEnd, heightCalc)
    await page.screenshot({
        clip: {
            x: xStart,
            y: yStart,
            width: widthStart,
            height: 1000, // 2. chromium and webkit not using the height here
        },
        // path: "./chromium.png",
        path: "./webkit.png",
    })
    console.log("FINISH")
    await browser.close()
})()

Describe the bug Using screenshot: clip: height, the height is ignored, and is capped at 177px. However, if I change it to height: 10, it becomes 10px.

Couldn’t test with firefox due to the page.goto: file bug. It’s already reported.

[pavelfeldman]

Ok, poked at it. Thank you for a nice repo with the script.

• The problem with the height is that we screenshot the intersection of the provided clip and the viewport. In your case, height was falling off the viewport and hence was ignored
• The problem with the scrollIntoViewIfNeeded is that it centers the element and you can’t center both start of the topic and the end of the topic - something goes behind the viewport
• Another problem is that Chromium will not capture beyond the 13-th topic (4K pixels).

We will hunt all three problems to make sure it works as expected.

For now,elementHandle.screenshot is your best friend since we scroll, resize the viewport and do everything it takes to capture it. Action item for ourselves here is to make clip work the same way instead of intersecting with the viewport.

Following worked for me on 0.11.1 on Firefox and WebKit. Chromium made first 14 snippets. I guess you can delete them dynamically to capture all in Chromium as well.

const path = require("path")
const { chromium, webkit, firefox } = require("playwright");

(async () => {
    const browserType = webkit;
    const browser = await browserType.launch()

    // I'm using deviceScaleFactor = 2 to make images render in high dpi
    const page = await browser.newPage({ viewport:
        { width: 800, height: 600, deviceScaleFactor: 2 }
    })

    // Playwright does not yet support file:// in Firefox
    // I had to serve this on localhost for Firefox to work 
    await page.goto(`http://localhost:5000/index.html`)

    const count = await page.evaluate(() => document.querySelectorAll("h6").length)
    for (let i = 0; i < count; ++i) {
        const topic = await page.evaluateHandle(index =>
            document.querySelectorAll("h6").item(index), i)
        console.log(`Capturing ${await topic.evaluate(e => e.innerText)}`)

        // Create a transparent box, we will be screenshotting it.
        const box = await topic.evaluateHandle(question => {
            let limit = question
            while (limit && limit.nextElementSibling && limit.nodeName !== "DETAILS")
                limit = limit.nextElementSibling
            const questionRect = question.getBoundingClientRect()
            const limitRect = limit.getBoundingClientRect()

            const box = document.createElement("div")
            const y = document.documentElement.scrollTop + questionRect.y - 5;
            const height = limitRect.y - questionRect.y;
            box.style = `pointer-events: none; position: absolute; left: 0; right: 0; top: ${y}px; height: ${height}px;`
            document.body.appendChild(box)
            return box;
        }, topic)
        await box.screenshot({ path: `./${browserType.name()}_${i + 1}.png` })
        await box.evaluate(e => e.remove())
    }

    console.log("FINISH")
    await browser.close()
})()

[pavelfeldman]

Ah, I think I understand what you are doing - you need a whole section. Let me see if we can help you here.