Take full page screenshot not working as expected in mobile view

Hi Community,

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.

Any help would be appreciated.

Thanks,
Ruben B

1 Like

Hard to understand. Please share here your script and the images taken.

1 Like

Hi @kazurayam ,

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.

def testData = findTestData('SiteURLs')

WebUI.callTestCase(findTestCase('Site/Site login'), [:], FailureHandling.STOP_ON_FAILURE)

WebUI.delay(10)

for (int rowIndex = 1; rowIndex <= testData.getRowNumbers(); rowIndex++) {

String url = testData.getValue(1, rowIndex)

String name = testData.getValue(2, rowIndex)

String timestamp = new Date().format('yyyyMMdd_HHmmss')

WebUI.navigateToUrl(url)

WebUI.enableSmartWait()

String screenshotName = '/Users/user/Desktop/Desktop_' + name + '_' + timestamp + '.png'

WebUI.takeFullPageScreenshot(screenshotName)

WebUI.disableSmartWait()

}

for (int rowIndex = 1; rowIndex <= testData.getRowNumbers(); rowIndex++) {

String url = testData.getValue(1, rowIndex)

String name = testData.getValue(2, rowIndex)

String timestamp = new Date().format('yyyyMMdd_HHmmss')

WebUI.setViewPortSize(390, 844)

WebUI.navigateToUrl(url)

WebUI.enableSmartWait()

String screenshotName = '/Users/user/Desktop/Mobile_' + name + '_' + timestamp + '.png'

WebUI.takeFullPageScreenshot(screenshotName)

WebUI.disableSmartWait()

}

WebUI.closeBrowser()

Thanks,
Ruben B


1 Like

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.

1 Like

I guess, Device Pixel Ratio may be confusing you.

See the following post:

1 Like

Hi @kazurayam ,

Thanks for helping on this.

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.

Thanks,
Ruben B


1 Like

I’ll take a look. thanks!

1 Like

Still I don’t understand what is your problem. What do you expect to see, and what do you actually see?

1 Like

Hi @kazurayam ,

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.

Thanks,
Ruben B

1 Like

i have no idea, sorry

1 Like

Hi Kazurayam,

No problem, thanks for your help.

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’ll continue investigating why it is happening.

Thanks again!


1 Like

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 understand this sentence. It does not make any sence to me.


I wrote a Test Case script. I intended to mimic your code:

import java.nio.file.Files
import java.nio.file.Path
import java.nio.file.Paths

import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

void shoot(String url, int width, Path dir, String name, String desc) {
	String timestamp = new Date().format("yyyyMMdd_HHmmss")
	WebUI.setViewPortSize(width, width)
	WebUI.enableSmartWait()
	WebUI.navigateToUrl(url)
	String f = dir.resolve(name + "_" + desc + "_" + timestamp + ".png" )
	WebUI.takeFullPageScreenshot(f.toString())
	WebUI.disableSmartWait()
}

Path projectDir = Paths.get(RunConfiguration.getProjectDir())
Path screenshotsDir = projectDir.resolve("screenshots")
Files.createDirectories(screenshotsDir)

String url = "https://www.carlsjr.com/"

WebUI.openBrowser('')

shoot(url, 1200, screenshotsDir, "top", "desktop")
shoot(url,  390, screenshotsDir, "top", "mobile")

WebUI.closeBrowser()

This produced 2 PNG images:

screenshots/top_desktop_20230823_134226.png:

top_mobile_20230823_134312.png:

I find nothing problematic in these 2 screenshots.

@jpereyra

Do you find any problems in these screenshots? If yes, please describe it in detail.

1 Like

Hi @kazurayam ,

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.

Thanks for your assistance.

Thanks,
Ruben B

1 Like

“my site” — what is it?

I thought that your site has the URL of https://www.carlsjr.com/ . Isn’t it correct?

What is the URL of “my site”?

1 Like

No, it was just an example. I can’t share the screenshots from my site.

1 Like

Unless you provide enough information, I can not see anything. I would quit. Sorry.

1 Like

Hi @kazurayam ,

Thanks for all your help! since it works with Firefox, I think I’m good now.

can you provide some advise to make the code simpler instead of using two for loops?

Thanks,
Ruben B

1 Like

No, I am not willing to.

1 Like

Thanks anyway!

1 Like