Take full page screenshot not working as expected in mobile view

Miscellaneous
1

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

2

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

3

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

Desktop_Homepage_20230821_183553
Desktop_Homepage_20230821_1835533456Ă—6362 412 KB

Mobile_Homepage_20230821_183632
Mobile_Homepage_20230821_1836322536Ă—11494 163 KB

4

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.

5

I guess, Device Pixel Ratio may be confusing you.

See the following post:

6

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

Desktop_People_20230822_132715
Desktop_People_20230822_1327153456Ă—1974 163 KB

Mobile_People_20230822_132753
Mobile_People_20230822_1327531000Ă—3312 127 KB

7

I’ll take a look. thanks!

8

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

9

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

10

i have no idea, sorry

11

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!

Desktop_1_
Desktop_1_1920Ă—4523 318 KB

Mobile_2_
Mobile_2_1012Ă—9778 385 KB

12

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_desktop_20230823_134226
top_desktop_20230823_1342262412Ă—9136 1.05 MB

top_mobile_20230823_134312.png:

top_mobile_20230823_134312
top_mobile_20230823_1343121012Ă—10048 522 KB

I find nothing problematic in these 2 screenshots.

@jpereyra

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

13

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

14

“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”?

15

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

16

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

17

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

18

No, I am not willing to.

19

Thanks anyway!