How to test only visible viewport?
ivnish opened this issue · 5 comments
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
@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.
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.
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
Oh, I changed playwright to puppeteer and now it works)