How to test only visible viewport?

[ivnish]

I need to test full-screen popup form. Screenshot contains a form and full page. How to test only visible viewport without page scrolling? If viewport is 1920x1080 I want to get screenshot size is 1920x1080 too

[dgrebb]

@ivnish did you try using 'viewport' as a selector? This is covered in the README's Advanced Scenarios section:

selectors // Array of selectors to capture. Defaults to document if omitted. Use "viewport" to capture the viewport size.

[ivnish]

Yes. I tried it.

By default I have full page screenshot

If I use const BACKSTOP_TEST_CSS_OVERRIDE = .dialog-off-canvas-main-canvas {height:100vh;overflow:hidden;};

I have only 1920x1080 site, but I have a lot of space bottom in screenshot file

I expected:

[dgrebb]

Very strange — it looks like document is being used as the selector. You may need to set 100vh on html and body, as opposed to .dialog-off-canvas-main-canvas to get around this. Not ideal, but this has brought be the best success.

In one of my overrideCSS scripts I have:

  body {
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

Which seems crazy, but gets the job done :)

In my use case I have overflow: scroll on body for stylistic reasons, so the above override is specific to that.

[ivnish]

I tried a lot of css styles before I asked my question)

Your code doesn't help me. height:100vh;overflow:hidden; works in my browser, but doesn't work in backstopjs browser. I have a lot of white space bottom

[ivnish]

Oh, I changed playwright to puppeteer and now it works)