I have a script where I set the view port size to 390, 844 (mobile view size) and then take screenshots of some pages, but the screenshot of one of the pages is not being taken like it looks in that size (responsive) even though I see that the objects order are in column while the script is being executed. It takes the screenshot in desktop size view but in a small picture. It takes the screenshots for the other pages correctly, like they see in that mobile view.
Sorry if I wasn’t clear, actually, the issue is difficult to explain.
The site is responsive, so when setting serViewPortSize to (390, 844) to display the website in mobile size, the objects order change to be displayed in one column, and I can see them in the browser when the script is running, but in the screenshot the page is displayed like if you were seeing it in desktop size (up to 3 columns).
In the attached screenshots you can see that both screenshots have the same page layout, which should not be, because the mobile view display the objects in column while running the script.
You showed a source code which contains 2 for blocks. The 2 blocks look very similar. I wonder why you have these 2 for blocks. To me it looks as if you pasted a set lines twice, which looks silly to me. You can remove this duplication by introducing a local Groovy function.
The first for block contains no WebUI.setViewPortSize(390,x) statement. The second for block contains a WebUI.setViewPortSize(390,x) statement. That seems to be only difference. The first block will take screenshot of browser window of the default width, as you do not specify the width explicitly. I do not see if this is what you intended or just your mistake.
You attached black rectangular images without any explanation what these are. You expected that people would be able to guess what. Well, you expect too much kindness from others. You should try to write readable descriptions in English. Often, you would have chances to realize mistakes in codes while you are writing detail descriptions. So I would recommend you, always write enough words in questionaires.
I’m using two “for” blocks while I make it work, then I will improve the code. In the first block I’m not setting any view port size because I want it to be displayed with the default with, so it’s intended. In the second block, I’m changing the width to be displayed as mobile size.
In the screenshots I have shared, the rectangles are elements in the page that change its order to column view after switching to mobile view. But you can see in both screenshots they have the same layout.
I’m attaching a couple of a screenshots from another page where you can see that the order of the elements change and the screenshot for mobile view is displaying the correct layout.
The website is responsive, so while the width is decreasing, the elements of the page that are aligned in up to 3 columns in desktop view, change their align to 1 column when they hit the mobile view. The screenshot when changing the size to “WebUI.setViewPortSize(390, 844)” (mobile) displays the page image like it is displayed in desktop view, the content is just shrinked to fit the size of mobile view, but it doesn’t display the elements aligned in 1 column as they really are in that view. If you compare the first two screenshots I have shared, the image size is different, but the page layout is the same even though it changes when changing the port size to mobile view.
I’m attaching two new screenshots from a public website. The first screenshot is for desktop view and the second for mobile view, you can see how the elements of the page are aligned different. The same happens with my website, I can see it while the script is running, but the screenshot for mobile view takes the shot of the page as it is displayed in desktop view even though it’s in mobile view.
I don’t see any problem in the screenshots taken with your code, the one for mobile looks correct.
You can see that in desktop view, the elements are displayed in up to 3 columns, and, in the mobile view, they are displayed in 1 column. That doesn’t happen with my site, the elements are displayed in up to 3 columns in both screenshots even though I can see they are in 1 column when the script set the view port to mobile. In other words, the mobile screenshot for my site shows the page exactly like it looks in desktop view, just shrinked to the image size.
I have run the script using Firefox instead of Chrome and the mobile screenshot looks good. I don’t know why it doesn’t work with Chrome.